Download to read offline
![angular.module('MainController', [])
.controller('MainCtrl',function($scope){
$scope.items = [1,2,3];
$scope.add = function(){
$scope.items.push($scope.items.length + 1)
}
})
NG1 APIs](https://image.slidesharecdn.com/devnexus-160216155925/85/Devnexus-11-320.jpg)
![ES6 Class
export class MainController {
constructor(){
this.items = [1,2,3];
}
add(){
this.items.push(this.items.length + 1)
}
}](https://image.slidesharecdn.com/devnexus-160216155925/85/Devnexus-12-320.jpg)
![@Component({
selector: 'hello-app',
template: `
<p *ngFor="#item of items">{{item}}</p>
<button (click)="add()">Add item</button>
`
})
export class MainController {
constructor(){
this.items = [1,2,3];
}
add(){
this.items.push(this.items.length + 1)
}
}](https://image.slidesharecdn.com/devnexus-160216155925/85/Devnexus-15-320.jpg)
Uploaded byMike Hartington
Devnexus
Ionic 2 is an update to the Ionic framework that uses Angular 2 and TypeScript for building hybrid mobile apps. It provides the same core UI components as Ionic 1 but with improved APIs that take advantage of newer web technologies like ES6. The update brings Angular 2 concepts like components and classes instead of controllers and directives. Ionic 2 aims to continue providing simplicity, platform continuity, performance and creative freedom for building cross-platform mobile apps with one codebase.
Devnexus
- 2. IONIC V2 Mike Hartington| @mhartington
- 3.
- 4. Side Menus Tabs Actionsheet Modal Pull ToRefresh Slidebox Infinite Scroll Swipeable List Collection Repeat Popup Popover Loading Overlay Inputs Buttons Form Controls The beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
- 6. ONE MILLION appsbuilt with the SDK Ionic apps top app store charts Used everywhere from Fortune 50 co’s to YC/TechStars companies
- 7. A LOT'S CHANGED BetterAPIs ES6/ES7 & Typescript Better Devices & OSs Did I mention ES6?!
- 8.
- 9. Angular 1 -getting long in the tooth Lot of NG specific APIS for yesterday's browser Wasn't built for ES6/7
- 10. NG-EUROPE RIP $scope, Directives,Controllers, Service
- 11. angular.module('MainController', []) .controller('MainCtrl',function($scope){ $scope.items =[1,2,3]; $scope.add = function(){ $scope.items.push($scope.items.length + 1) } }) NG1 APIs
- 12. ES6 Class export classMainController { constructor(){ this.items = [1,2,3]; } add(){ this.items.push(this.items.length + 1) } }
- 13.
- 14. NG1 Template <div ng-controller="MainCtrl"> <png-repeat="item in items">{{item}}</p> <button ng-click="add()">Add item</button> </div>
- 15. @Component({ selector: 'hello-app', template: ` <p*ngFor="#item of items">{{item}}</p> <button (click)="add()">Add item</button> ` }) export class MainController { constructor(){ this.items = [1,2,3]; } add(){ this.items.push(this.items.length + 1) } }
- 16. Controllers => Classes Directives=> Components Angular.module => ES6 Modules
- 17. WELL, WHAT ABOUTIONIC?
- 19.
- 20. <ion-content> <ion-list> <ion-item> <ion-avatart item-left> <img src="img.png"/> </ion-avatart> <p>User 1</p> </ion-item> </ion-list> </ion-content> <ion-content> <ion-list> <ion-item> <ion-icon name="person" item-left></ion-icon> <p>User 1</p> </ion-item> </ion-list> </ion-content> SIMPLICITY
- 21. @Page({ template: ` <ion-navbar> <ion-title>{{name}}</ion-title> </ion-navbar> <ion-content> Hi, myname is {{name}} </ion-content>` }) export class Profile { constructor() { this.name = 'Mike'; } } SIMPLICITY
- 22. LET’S LOOK AT AREAL APP
- 23. EVERYTHING FROM IONIC1 IS IN IONIC 2
- 24. JUST MUCH MOREPOWERFUL
- 25. WANT TO TRYIT OUT?
- 26.
- 27. GET STARTED WITHIONIC Ionic Documentation Ionic Forum Ionic Slack Signup Contribute on GitHub
- 28.