![import {Component} from 'angular2/core';
import {Route, RouteConfig, RouterOutlet} from 'angular2/router';
import HomeComponent from '../home/home';
import NavbarComponent from '../navbar/navbar';
import FooterComponent from '../footer/footer'; import SearchComponent from '../search/search';
import ProductDetailComponent from "../product-detail/product-detail";
@Component({
selector: 'auction-application',
templateUrl: 'app/components/application/application.html',
directives: [ RouterOutlet, NavbarComponent, FooterComponent,
SearchComponent, HomeComponent ]
})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/products/:id', component: ProductDetailComponent, as: 'ProductDetail'}
])
export default class ApplicationComponent {}](https://image.slidesharecdn.com/angular2-170114064325/85/Angular-2-5-320.jpg)
![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()">](https://image.slidesharecdn.com/angular2-170114064325/85/Angular-2-16-320.jpg)
![Two-way Binding
Synchronizing Model and View:
<input [value]="myComponentProperty"
(input)=“onInputEvent($event)>
<input [(ngModel)] = "myComponentProperty">](https://image.slidesharecdn.com/angular2-170114064325/85/Angular-2-17-320.jpg)
Angular 2
- 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)
- 3. An app is a tree of components
- 4. HTML
- 5. import {Component} from 'angular2/core'; import {Route, RouteConfig, RouterOutlet} from 'angular2/router'; import HomeComponent from '../home/home'; import NavbarComponent from '../navbar/navbar'; import FooterComponent from '../footer/footer'; import SearchComponent from '../search/search'; import ProductDetailComponent from "../product-detail/product-detail"; @Component({ selector: 'auction-application', templateUrl: 'app/components/application/application.html', directives: [ RouterOutlet, NavbarComponent, FooterComponent, SearchComponent, HomeComponent ] }) @RouteConfig([ {path: '/', component: HomeComponent, as: 'Home'}, {path: '/products/:id', component: ProductDetailComponent, as: 'ProductDetail'} ]) export default class ApplicationComponent {}
- 10. HomeComponent
- 12. A Sample Toolbox
- 13. Index.html<!DOCTYPE html> <html> <head> <script src="//npmcdn.com/angular2@2.0.0-beta.7/bundles/angular2-polyfills.js"></script> <script src="//npmcdn.com/typescript@1.7.5/lib/typescript.js"></script> <script src="//npmcdn.com/systemjs@0.19.22/dist/system.src.js"></script> <script src="//npmcdn.com/rxjs@5.0.0-beta.2/bundles/Rx.js"></script> <script src="//npmcdn.com/angular2@2.0.0-beta.7/bundles/angular2.dev.js"></script> <script> System.config({ transpiler: 'typescript', typescriptOptions: {emitDecoratorMetadata: true} }); System.import('main.ts'); </script> </head> <body> <hello-world></hello-world> </body> </html> HelloWorldComponent Angular from CDN SystemJS
- 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
- 15. package.json { "name": "walkthrough5", "version": "1.0.0", "description": “A sample package.json for the Angular app”, "scripts": { "start": "live-server" }, "dependencies": { "es6-shim": "0.33.13", "es6-promise": "^3.0.2", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "systemjs": "0.19.23", "zone.js": "0.5.15", "angular2": "2.0.0-beta.9" }, "devDependencies": { "live-server": "^0.9.0", "typescript": "^1.7.5" } }
- 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">
- 18. • https://github.com/angular/angular • https://angular.io/docs/ts/latest/guide/ngmodule.html • ng-book 2 Ari Lerner, Felipe Coury, Nate Murray, Carlos Taborda • https://yakovfain.com • https://www.npmjs.com/~angularcore • https://opencredo.com/a-deep-dive-into-angular-2-0/ • https://vsavkin.com/writing-angular-2-in-typescript- 1fa77c78d8e8#.5kycaxhbu