Angular.js

Transcript

1. Wrocław, 28.01.2013
2. ABOUT ME Tymon Tobolski B @iteamon H teamon.eu G teamon
5. HTML++
6. HTTP = EVENT WEBAPP = STATE
7. ONE-WAY DATA BINDING View Template Model merge
8. BACKBONE & FRIENDS View Template Model View Template Router Model Model
9. BINDING MESS View Model Template
10. EVENT HANDLING class MyView extends Backbone.View events: "click #my-button": "handler" handler: (e) => alert("Click!")
11. EVENT HANDLING $("#my-button").click (e) => alert("Click!")
12. ONE-WAY DATA BINDING View Template Model merge ?
13. TWO-WAY DATA BINDING View Template Model compile instant update
14. <!doctype html> <html ng-app> <head> <script src="angular.js"></script> </head> <body> <div> <input type="text" ng-model="name"/> <span>Hello {{ name }}!</span> </div> </body> </html>
15. Controllers business logic Directives DOM manipulation Filters output manipulation Services external dependencies ARCHITECTURE
16. app = angular.module('myapp', []) app.controller 'ItemsCtrl', ($scope) -> $scope.items = [ {name: "Item A"} {name: "Item B"} ] $scope.newName = "" $scope.add = () -> $scope.items.push({name: $scope.newName}) $scope.newName = "" angular.bootstrap(document, ['myapp']) <div ng-controller="ItemsCtrl"> <li ng-repeat="item in items"> {{ item.name }} </li> <input type="text" ng-model="newName"/> <button ng-click="add()">+</button> </div> http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
17. app = angular.module('myapp', []) app.controller 'ItemsCtrl', ($scope) -> $scope.items = [ {name: "Item A"} {name: "Item B"} ] $scope.newName = "" $scope.add = () -> $scope.items.push({name: $scope.newName}) $scope.newName = "" angular.bootstrap(document, ['myapp']) <div ng-controller="ItemsCtrl"> <li ng-repeat="item in items"> {{ item.name }} </li> <input type="text" ng-model="newName"/> <button ng-click="add()">+</button> </div> http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
19. DIRECTIVES user “events” ng-click ng-change ng-submit ng-mouse* state reflection ng-hide ng-model ng-repeat ng-style
20. DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/>
21. DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/> custom UI directive
22. FILTERS $scope.value = 20000 <span>{{ value | currency }}</span>
23. FILTERS $scope.value = 20000 <span>{{ value | currency }}</span> filter
24. FILTERS currency date json lowercase uppercase number orderBy
25. SERVICES $http $resource REST $locale i18n $location $q Promise $scope $routeParams
26. ROUTING app.config ($routeProvider) -> $routeProvider. when('/', {controller: IndexCtrl, templateUrl: 'index.html'}). when('/edit/:id', {controller: EditCtrl, templateUrl: 'edit.html'}). when('/new', {controller: NewCtrl, templateUrl: 'new.html'}). otherwise({redirectTo:'/'})
27. $scope.items = Item.query() CALLBACK ARE BAD Promise (deffered) http://docs.angularjs.org/api/ng.$q
28. Questions? k
29. RESOURCES HOMEPAGE http://angularjs.org CONCEPTUAL MUST READ: http://docs.angularjs.org/guide/concepts TUTORIAL: http://docs.angularjs.org/tutorial/