This project was generated with Angular CLI version 1.3.0.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
Chapter 1 : Components
- ng new -> To create the new project,multiple options available
- ng server -> To start the application,multiple options available
- index.html -> Entry point for the application
- app-root -> Custom tag in html
- webpack -> Browser independent module bundler for the application
- src/main.ts -> Bootstrapper of the application like the ng-app in angular1.x
- Module -> Group of component. Usually for a feature
- src/app.module.ts -> Main module(app module) initializer
- NgModule -> Decorator which let us declare all the dependencies and component of our application without the need to it on a per-component basis
- Component -> Reusable piece of UI,usually depicted by the custom tag, AppComponent : Root component
- ng generate interface person -> To define the interface like thing. Shorthand is : ng g i person
- ng generate component --inline-template people-list -> Generate the component with inline template. Short hand is : ng g c -it people-list
Chapter 2 : Services and Dependency Injection
- ng generate service people -> Generates the people service. ng g s people(shorthand form)
- Service inclusion in component -> Use service in component using Dependency Injection
- Error till now -> Because No provider for PeopleService! (PeopleListComponent -> PeopleService)
- Register service with angular 2 -> Use the providers property of the component in which this service is supposed to be used
- Register service at the module level -> user NgModule decorator of AppModule
- Register service using angular-cli -> angular-cli helps registering service with specific module
- ngOnInit -> Instead of placing the people code in constructor place it in the ngOnInit. It'll make the constructor more leaner
- DI in service -> This is service with in another service. Use constructor after importing the other service
Chapter 3 : Component and Data Binding
Chapter 4 : Routing
- For routing to work you'll need @angular/router module as that's not included in @angular/core
- You need to have routes config array which specify the path and specific component.
- Export that routes array with RouterModule's forRoot method by passing that routes array as argument.
- Import that exported RouterModule in app.module.ts and put in imports array of @NgModule decorator
- Add the custom tag router-outlet in the app.component.html
- Add in the head tag of index.html
- To create the routing link use the [routerLink] directive that helps you generate links
- To extract params from routes you need ActivatedRoute service from the @angular/router module and inject that service in the component's constructor
- ActivatedRoute returns a params property which returns the subscribe decorator pattern which can help get route param. Do this on ngOnInit method(hook).
- To keep the component light you can unsubscribe that decorator in the ngOnDestroy method(hook)
Chapter 5 : Forms and Validation
- To use the forms import the @angular/forms and put it in the imports array of ngModule decorator of app.module.ts
- To bind the field with data you need to add the [value] and (click) property and event of the input tag
- To bind the field(2 way data binding) you can also use the ngModel also like in angular1.x
- Many way for the bindings
- Interpolation(one way binding) : {{componentVariable}}
- Property Binding(one way binding) : [src]="person.imageUrl"
- Event Binding(one way binding) : (click)="selectPerson(person)"
- [(ngModel)] (Two way binding) : [(ngModel)]="person.name"