![Components Example
@Component({
selector: 'my-component',
providers: [MyService],
template: ‘<p *ngFor=”let item of list” (click)=”sendUpdate()”>{{ item }}</p>’,
styles: [‘p { font-size: 14px }’]
})
class MyComponent implements OnInit {
@Input() list;
@Output() update = new EventEmitter();
ngOnInit() { } // get async data
sendUpdate() { this.update.emit(‘some value’) }
}](https://image.slidesharecdn.com/techtalkangular2-160831072335/85/Moving-From-AngularJS-to-Angular-2-11-320.jpg)
![Dependency Injection Example
@Component({
...
providers: [MyService]
})
export class MyComponent {
constructor(private service: MyService) {} // inject here
ngOnInit() {
service.getList(); // this is just a dummy line
}
}](https://image.slidesharecdn.com/techtalkangular2-160831072335/85/Moving-From-AngularJS-to-Angular-2-12-320.jpg)
![Data Binding
• Interpolation
• Property binding (inputs)
• Event binding (outputs)
• Two-way binding
// example
<my-component [title]=”list” (update)=”getUpdate($event)”></my-component>](https://image.slidesharecdn.com/techtalkangular2-160831072335/85/Moving-From-AngularJS-to-Angular-2-13-320.jpg)
![Modules Example
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
Import { MyComponent } from ‘./my.component’;
@NgModule({
imports: [BrowserModule],
providers: [MyService],
declarations: [MyComponent, MyDirective, MyPipe],
bootstrap: [AppComponent]
})
export class AppModule { }](https://image.slidesharecdn.com/techtalkangular2-160831072335/85/Moving-From-AngularJS-to-Angular-2-16-320.jpg)
Moving From AngularJS to Angular 2
- 1. Moving From AngularJS to Angular 2 By Ahamed Imran @immysl
- 2. “AngularJS is a framework. Angular 2 is a platform” - Brad Green -
- 3. Why Angular 2? • Cross platform • Very good performance • Good tooling support (IDEs and CLI tool) • Ecosystem — RxJS, TypeScript, NativeScript, etc. • Very good mobile support
- 4. “The value in TypeScript is in writing safer code” - John Papa -
- 5. Why TypeScript? • Check for errors at compile time • Good tooling support • Is a mix of types, ES2015 and ESNext • The fastest growing superset of JavaScript • Compatibility with non-TypeScript libraries
- 7. What has changed? • There are components — No controllers • There are services — No providers and factories • There are zones — No $scope • There are APIs for DOM manipulation — No jqLite • One way data flow — No two way data flow
- 9. Angular 2 Concepts • Components • Dependency Injection • Data Binding • Metadata / decorators • Modules
- 10. Components • Inputs • Outputs / events • Lifecycle • Providers • Template
- 11. Components Example @Component({ selector: 'my-component', providers: [MyService], template: ‘<p *ngFor=”let item of list” (click)=”sendUpdate()”>{{ item }}</p>’, styles: [‘p { font-size: 14px }’] }) class MyComponent implements OnInit { @Input() list; @Output() update = new EventEmitter(); ngOnInit() { } // get async data sendUpdate() { this.update.emit(‘some value’) } }
- 12. Dependency Injection Example @Component({ ... providers: [MyService] }) export class MyComponent { constructor(private service: MyService) {} // inject here ngOnInit() { service.getList(); // this is just a dummy line } }
- 13. Data Binding • Interpolation • Property binding (inputs) • Event binding (outputs) • Two-way binding // example <my-component [title]=”list” (update)=”getUpdate($event)”></my-component>
- 14. Metadata / Decorators @Component({ selector: '...', template: ‘<h2>{{title}}</h2>’ }) // common decorators @Input() @Output() @Pipe() @Injectable()
- 15. Modules • Brand new — released yesterday • Somewhat similar to AngularJS module • An app needs to have a root module • Separate modules based on features • Not same as JavaScript / TypeScript modules
- 16. Modules Example import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; Import { MyComponent } from ‘./my.component’; @NgModule({ imports: [BrowserModule], providers: [MyService], declarations: [MyComponent, MyDirective, MyPipe], bootstrap: [AppComponent] }) export class AppModule { }
- 17. Angular Libraries • Router • Form • Upgrade • Compiler • Compiler-cli
- 19. Angular CLI • Official scaffolding and build tool for Angular 2 • Maintained by the Angular team • Latest uses Webpack for build and server • Currently as a command-line tool only
- 20. Other Tools • Codelyzer — style guide checker • Augury — Angular 2 debugger as a Chrome extension • Lite-server — A live reload server for Angular
- 21. Demo
- 22. Norway +47 959 23 712 [email protected] Stortorvet 10 0155 Oslo Norway Sweden +46 735 194 442 [email protected] Stockholmsvägen 33 181 33 Lidingö Sweden Australia +61 412 446 105 [email protected] Suite2.14, 32 Delhi Road North Ryde, NSW 2113 Australia Sri Lanka +94 112 300 900 [email protected] 201, Sir James Peiris Mw. Colombo 02 Sri Lanka www.exilesoft.com