Angular 1.x vs 2 - In code level
-
Upload
anuradha-bandara -
Category
Software
-
view
267 -
download
1
Transcript of Angular 1.x vs 2 - In code level
![Page 1: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/1.jpg)
Angular 1.x vs Angular 2.0By Anuradha Bandara
By Anuradha Bandara
![Page 2: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/2.jpg)
Why ?Google’s Angular lead says they’ll also continue supporting Angular 1 for at least another year.”What we’ve said on that is we’re going to support Angular 1 until the majority of folks come over to Angular 2” says Green.
![Page 3: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/3.jpg)
Why ?More perks on Angular 2
Better performance
Mobile first
Short learning curve
ECMA 6 - The future
![Page 4: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/4.jpg)
No controllers & $scope
![Page 5: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/5.jpg)
![Page 6: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/6.jpg)
No ng-app
![Page 7: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/7.jpg)
Angular 1.x have 2 ways for app bootstrap
● Using ng-app● Using javascript
![Page 8: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/8.jpg)
No 5 ways of create a service
![Page 9: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/9.jpg)
● Provider● Factory● Service● Constant● Value
![Page 10: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/10.jpg)
DI No same like as previous
![Page 11: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/11.jpg)
DI achieve via constructor
![Page 12: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/12.jpg)
No $routerProvider & no when()
![Page 13: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/13.jpg)
Route config use @routeconfig
Ng-view replace by <router-outlet>
![Page 14: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/14.jpg)
No ng- for inbuilt directives
![Page 15: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/15.jpg)
Use camelCase
● Ng-model : ngModel
● Ng-bind : ngBind
● Ng-class : ngClass
![Page 16: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/16.jpg)
Direct access for html attributes
![Page 17: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/17.jpg)
Use html attributes directly
● ng-href : href
● ng-src : src
● Ng-show / hide : hidden
![Page 18: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/18.jpg)
More changes
![Page 19: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/19.jpg)
Use html attributes directly
● ng-click : (click)
● ng-model : [(ngModel)]
● ng-href : [routerLink]
![Page 20: Angular 1.x vs 2 - In code level](https://reader036.fdocuments.net/reader036/viewer/2022081604/5879ced61a28ab842c8b4b3f/html5/thumbnails/20.jpg)
Thank you