Getting Started withAngular

 Angular is a perfect client-side framework for most web applications because it

provides a very clean and structured approach.
 With a clean, structured front end, you will find that it is much easier to implement
clean, well-structured server-side logic.

Why Angular?
 JavaScript is a powerful programming language that allows developers to use a web
browser as a full application platform. Angular provides a great framework that
makes it faster and easier to create client-side JavaScript applications.
 Developers use Angular because it provides a lot of the structure of web
applications—such as data binding, expressions,Pipes,dependency injection, and
HTTP communications

Understanding Angular(Angular Features):

 Angular is a great JavaScript framework, which means it provides a number of APIs
and structure that helps you quickly and easily create complex client-side code.
 Angular does a great job at providing not only features but also a basic framework
and programming model to create client applications.

1. Modules
 In general, Angular apps use a modular design. While not required, modules are
highly recommended because they allow you to separate your code into separatefiles.
 This helps you keep your code files short and manageable while still allowing you to
access the functionality from each one.
 We use modules using TypeScript language(.ts file), with Angular you import
external
modules at the top of a file and export the functionality you need at the bottom.

with the following syntax for import and export,:

Import {Component} from 'angular2/core';
 Export class App{}

2. Directives
Directives are JavaScript classes with metadata that defines the structure and behavior.
Directives provide the majority of UI functionality for Angular applications.
There are three major types of directives:
1. Components: A component directive is a directive that incorporates an HTML
template with JavaScript functionality to create a self-contained UI element that can
be added to an Angular application as a custom HTML element. Components are
likely to be the directives you use the most in Angular.
2. Structural: You use structural directives when you need to manipulate theDOM.
Structural directives allow you to create and destroy elements and components from a
view.
3. Attribute: An attribute directive changes the appearance and behavior of HTML
elements by using HTML attributes.

3. Data Binding
 One of the best features of Angular is the built-in data binding—the process of
linking data from a component with what is displayed in a web page.
 Angular provides a very clean interface to link model data to elements in a web page.
 When data is changed on a web page, the model is updated, and when data is
changed in the model, the web page is automatically updated.
 This way, the model is always the only source for data represented to the user, and the
view is just a projection of the model.

4. Dependency Injection
 Dependency injection is a process in which a component defines dependencies on
other components. When the code is initialized, the dependent component is made
available for access within the component.
 Angular applications make heavy use of dependency injection.A common use for
dependency injection is consuming services.
  For example, if you are defining a component that requires access to a web server via
HTTP requests, you can inject the HTTP services into the component, and the
functionality is

5. Services
 Services are the major workhorses in the Angular environment. Services are singleton
classes that provide functionality for a web app.
 For example, a common task of web applications is to perform AJAX requests to a
web server. Angular provides an HTTP service that houses all the functionality to
access a web server.The service functionality is completely independent of context or
state, so it can beeasily consumed from the components of an application.
 Angular provides a lot ofbuilt-in service components for basic uses, such as HTTP
requests, logging, parsing,and animation. You can also create your own services and
reuse them throughout
your code. available in the component code

Angular Implementation:
To implement Angular in the appropriate manner.
The following are a few rules to follow when implementing Angular:
o The view acts as the official presentation structure for the application. Indicate any
presentation logic as directives in the HTML template of the view.
o If you need to perform any DOM manipulation, do it in a built-in or custom directive
JavaScript code—and nowhere else.
o Implement any reusable tasks as services and add them to your modules by using
dependency injection.
o Ensure that the metadata reflects the current state of the model and is the single source
for data consumed by the view.
o Define controllers within the module namespace and not globally to ensure that your
application can be packaged easily and avoid overwhelming the globalnamespace.

Using the Angular CLI

Angular provides a powerful CLI that makes building out Angular applications a
much more streamlined process. By using the CLI, you will quickly be able to
generate new Angular applications, components, directives, pipes, and services .

Generating Content with the CLI

One of the most common purposes of the CLI is to generate content for applications.
It automates the process of creating and bootstrapping a new Angular application,
letting you get straight to the meat of the application.
From the command line, run the command

ng new [application name]

To create a new Angular application. If you navigate to that newly created
application, you have access to many other useful commands.
Creating a Basic Angular Application

very basic Angularapplication that implements an Angular

component with an inline template, an inlinestylesheet, and the
Component class.
Welcome to Angular
We'll be using the Angular CLI for this tutorial. To install and use the command line
interface as well as run the Angular application server, you'll need
the Node.js JavaScript runtime and npm (the Node.js package manager) installed.
npm is included with Node.js which you can install from Node.js downloads.
Tip: To test that you have Node.js and npm correctly installed on your machine, you
can type node --version and npm --version.
To install the Angular CLI, in a terminal or command prompt type:

npm install -g @angular/cli

This may take a few minutes to install. You can now create a new Angular application
by typing:

ng new my-app

my-app is the name of the folder for your application. The ng new command
prompts you with options for the generated application. Accept the defaults by
pressing the Enter key. This may take a few minutes to create the Angular
application in TypeScript and install its dependencies.
Let's quickly run our Angular application by navigating to the new folder and
typing ng serve to start the web server and open the application in a browser:

cd my-app
ng serve

You should see "Welcome to app!!" on http://localhost:4200 in your browser. We'll

leave the web server running while we look at the application with VS Code.
Now expand the src\app folder and select the app.component.ts file.
Hello World
Let's update the sample application to "Hello World". Go back to
the app.component.ts file and change the title string in AppComponent to "Hello
World".

import { Component } from'@angular/core';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.css']

})

exportclassAppComponent {

title = 'Hello World';

}
 Once you save the app.component.ts file, the running instance of the server will
update the web page and you'll see "Welcome to Hello World!!".
Tip: VS Code supports Auto Save, which by default saves your files after a delay.
Check the Auto Save option in the File menu to turn on Auto Save

To get the current execution policy in PowerShell, you can use the
command Get-ExecutionPolicy:
 Get-ExecutionPolicy: Gets the current execution policy for the computer
 Get-ExecutionPolicy -List: Gets all execution policies for the current
session, listed in precedence order
 Get-ExecutionPolicy -Scope <ExecutionPolicyScope>: Gets the
execution policy set for a particular scope
The effective execution policy is determined by: Execution policies set by
Set-ExecutionPolicy and Group Policy settings.
Here are some examples of using Get-ExecutionPolicy:
 Get the current execution policy: PS C:\> Get-ExecutionPolicy Restricted

 Get all execution policies: PS C:\> Get-ExecutionPolicy -List

 Get the effective execution policy: PS C:\> Get-ExecutionPolicy

You can also use the Set-ExecutionPolicy cmdlet to set a new execution
policy: PS C:\> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned.
PS C:\Users\HP\mean> Get-ExecutionPolicy
Restricted
PS C:\Users\HP\mean> Set-ExecutionPolicy -Scope Process -
ExecutionPolicy Bypass
PS C:\Users\HP\mean> Get-ExecutionPolicy
Bypass
PS C:\Users\HP\mean>ng Serve

Understanding and Using NgModule

Now that you’ve created your component, you need some way to tell the rest
of your app about it. You do this by importing NgModule from Angular. NgModule is
an Angular decorator that allows you to place all your imports, declarations, and
bootstrap files for a particular module in a single location. This makes bootstrapping
all the files in large applications very easy. NgModule has several metadata options
that allow different things to be imported, exported, and bootstrapped:
1. providers: This is an array of injectable objects that are available in the injector of
the current module.
2. declarations: This is an array of directives, pipes, and/or components that belong in
the current module.
 3. imports: This is an array of directives, pipes, and/or components that will be
available to other templates within the current module.
4. exports: This is an array of directives, pipes, and/or modules that can be used within
any component that imports the current module.
5. entryComponents: This is an array of components that will be compiled and will
have a component factory created when the current module is defined.
6. bootstrap: This is an array of components that will be bootstrapped when the current
module is bootstrapped.
7. schemas: This is an array of elements and properties that aren’t directives or
components.
8. id: This is a simple string that acts as a unique ID to identify this module.
The Following Code Available in app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule, provideClientHydration, withEventReplay } from
'@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { ComponentRvrComponent } from './component-rvr/component-
rvr.component';
import { LogoComponentComponent } from './logo-component/logo-
component.component';

@NgModule({
declarations: [
AppComponent,
ComponentRvrComponent,
LogoComponentComponent,

],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [
provideClientHydration(withEventReplay())
],
bootstrap: [AppComponent]
})
export class AppModule { }
First, you import NgModule, BrowserModule, and any custom
components, directives, services, and so on that your app has. Second, you
configure the @NgModule object to bootstrap everything together. Notice
that when the component is imported, the bootstrap property has the
component’s export class name. Finally, you export the class named
AppModule.