This document provides an overview of moving from AngularJS to Angular 2, highlighting key differences and new concepts. It discusses why developers might want to use Angular 2 due to improvements in cross-platform support, performance, and tooling. Key changes include a new component-based architecture replacing controllers, services replacing providers/factories, and zones replacing $scope. Core concepts covered are components, dependency injection, data binding, modules, and metadata/decorators.

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
oslo@exilesoft.com
Stortorvet 10
0155 Oslo
Norway
Sweden
+46 735 194 442
stockholm@exilesoft.com
Stockholmsvägen 33
181 33 Lidingö
Sweden
Australia
+61 412 446 105
sydney@exilesoft.com
Suite2.14, 32 Delhi Road
North Ryde, NSW 2113
Australia
Sri Lanka
+94 112 300 900
colombo@exilesoft.com
201, Sir James Peiris Mw.
Colombo 02
Sri Lanka
www.exilesoft.com