Angular.js

Wrocław, 28.01.2013

ABOUT ME Tymon Tobolski B @iteamon H teamon.eu G teamon

HTML++

HTTP = EVENT WEBAPP = STATE

ONE-WAY DATA BINDING View Template Model merge

BACKBONE & FRIENDS View Template Model View Template Router Model
Model

BINDING MESS View Model Template

EVENT HANDLING class MyView extends Backbone.View events: "click #my-button": "handler"
handler: (e) => alert("Click!")

EVENT HANDLING $("#my-button").click (e) => alert("Click!")

ONE-WAY DATA BINDING View Template Model merge ?

TWO-WAY DATA BINDING View Template Model compile instant update

<!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>

Controllers business logic Directives DOM manipulation Filters output manipulation Services
external dependencies ARCHITECTURE

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

DIRECTIVES user “events” ng-click ng-change ng-submit ng-mouse* state reﬂection ng-hide
ng-model ng-repeat ng-style

DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/>

DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/> custom UI directive

FILTERS $scope.value = 20000 <span>{{ value | currency }}</span>

FILTERS $scope.value = 20000 <span>{{ value | currency }}</span> ﬁlter

FILTERS currency date json lowercase uppercase number orderBy

SERVICES $http $resource REST $locale i18n $location $q Promise $scope
$routeParams

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:'/'})

$scope.items = Item.query() CALLBACK ARE BAD Promise (deffered) http://docs.angularjs.org/api/ng.$q

Questions? k

RESOURCES HOMEPAGE http://angularjs.org CONCEPTUAL MUST READ: http://docs.angularjs.org/guide/concepts TUTORIAL: http://docs.angularjs.org/tutorial/

Angular.js

Angular.js

Tymon Tobolski

More Decks by Tymon Tobolski

Other Decks in Programming

Featured

Transcript

Wrocław, 28.01.2013

ABOUT ME Tymon Tobolski B @iteamon H teamon.eu G teamon

HTML++

HTTP = EVENT WEBAPP = STATE

ONE-WAY DATA BINDING View Template Model merge

BACKBONE & FRIENDS View Template Model View Template Router Model

BINDING MESS View Model Template

EVENT HANDLING class MyView extends Backbone.View events: "click #my-button": "handler"

EVENT HANDLING $("#my-button").click (e) => alert("Click!")

ONE-WAY DATA BINDING View Template Model merge ?

TWO-WAY DATA BINDING View Template Model compile instant update

<!doctype html> <html ng-app> <head> <script src="angular.js"></script> </head> <body> <div>

Controllers business logic Directives DOM manipulation Filters output manipulation Services

app = angular.module('myapp', []) app.controller 'ItemsCtrl', ($scope) -> $scope.items =

app = angular.module('myapp', []) app.controller 'ItemsCtrl', ($scope) -> $scope.items =

DIRECTIVES user “events” ng-click ng-change ng-submit ng-mouse* state reﬂection ng-hide

DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/>

DIRECTIVES angular-ui.github.com <input ng-model="date" ui-date/> custom UI directive

FILTERS $scope.value = 20000 <span>{{ value | currency }}</span>

FILTERS $scope.value = 20000 <span>{{ value | currency }}</span> ﬁlter

FILTERS currency date json lowercase uppercase number orderBy

SERVICES $http $resource REST $locale i18n $location $q Promise $scope

ROUTING app.config ($routeProvider) -> $routeProvider. when('/', {controller: IndexCtrl, templateUrl: 'index.html'}).

$scope.items = Item.query() CALLBACK ARE BAD Promise (deffered) http://docs.angularjs.org/api/ng.$q

Questions? k

RESOURCES HOMEPAGE http://angularjs.org CONCEPTUAL MUST READ: http://docs.angularjs.org/guide/concepts TUTORIAL: http://docs.angularjs.org/tutorial/