Angular 2 is a complete rewrite of AngularJS. It is component-based and focuses on better performance. An Angular 2 app is a tree of components. Components are declared using the @Component decorator and the app's routing is configured with the @RouteConfig decorator. The project structure separates the app into modules, components, services and tests. Data binding in Angular 2 allows for unidirectional and two-way binding between the template and component class.
2. Angular 2
• Complete re-write of AngularJS
• Component-based
• Better performance
• No controllers
• Can write apps in TypeScript, Dart, or
JavaScript (ES5 or ES6)
14. Starting a new project with npm
1. Generate package.json for your project:
npm init
2. Add Angular dependencies to package.json
3. Download dependencies into the dir
node_modules:
npm install
4. Install live-server npm install live-server
16. Unidirectional Binding
1. From code to template:
<h1>Hello {{ name }}!</h1>
<span [hidden]=“isZipcodeValid”>
Zip code is not valid
</span>
2. From template to code:
<button (click)="placeBid()">Place Bid</button>
<input placeholder= "Product name“
(input)="onInputEvent()">
17. Two-way Binding
Synchronizing Model and View:
<input [value]="myComponentProperty"
(input)=“onInputEvent($event)>
<input [(ngModel)] = "myComponentProperty">