Scribd
Upload
19 views

Angular

The document discusses how to create a new Angular project using the Angular CLI, how the app execution starts from main.ts and bootsraps the AppModule, the structure of an Angular app including components, modules, services and data binding, and how to serve the app.

Uploaded by

leltavolte
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views

Angular

The document discusses how to create a new Angular project using the Angular CLI, how the app execution starts from main.ts and bootsraps the AppModule, the structure of an Angular app including components, modules, services and data binding, and how to serve the app.

Uploaded by

leltavolte
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

npm install -g @angular/cli

installs angular cli

ng new app-name
creates new a project

ng serve
compiles app code, starts server and deploys app at port
4200(default port)

angular.json > projects > app-name > architect > build > styles

app execution starts with main.ts.


in main.ts we trigger bootstrapModule function by passing application module as
parameter.
platformBrowserDynamic().bootstrapModule(AppModule)

AppModule => app>app.module.ts


AppModule contains all the components declared that are to be bootsrapped.

NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})

AppComponent refers to AppComponent.ts file. Angular processes the AppComponent.ts


file and the selector defined is used to place in the index file.

main.ts>AppModule.ts>Component.ts>index.html

Components
Data binding
Directives
services
Dependency injection

Data-Binding:
String interpolation {{}}
property binding [property]=variabale
two-way data binding [(ngModel)]=variabale
event binding (event)=action($event)

Directives:
*ngIf - structural directive
ng-template
[ngStyle]={style object}
[ngClass]={className:condition}

when using c9.io codeanywhere virtual ides use ng serve --host 0.0.0.0 --disable-
host-check to get output on required container url.
when importing a inbuilt module import it in app.module.ts and declare import in
imports array of NgModule directory
Service are edfined by using @Injectable() decorator.

if we want to inject a service in to another service we need to use @Injectable()


decorator.

Services are injected into client components as a dependency


components and services are simply classes, with decorators
A Router maps URL-like paths to views
If the router determines that the current application state requires particular
functionality, and the module that defines it hasn't been loaded, the router can
lazy-load the module on demand.

You might also like