Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
-
Upload
alessandro-nadalin -
Category
Technology
-
view
4.282 -
download
0
description
Transcript of Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
![Page 1: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/1.jpg)
AngularJS is the futureAlessandro Nadalin - Montreal, February 2014
![Page 2: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/2.jpg)
AngularJS
![Page 3: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/3.jpg)
![Page 4: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/4.jpg)
2009
![Page 5: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/5.jpg)
SPA
![Page 6: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/6.jpg)
example.org/#!/about
![Page 7: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/7.jpg)
![Page 8: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/8.jpg)
history.pushState(...)
![Page 9: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/9.jpg)
![Page 10: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/10.jpg)
Killer Features
![Page 11: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/11.jpg)
Killer Features2-way data binding
![Page 12: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/12.jpg)
Model changes the View
![Page 13: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/13.jpg)
View changes the Model
![Page 14: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/14.jpg)
![Page 15: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/15.jpg)
http://jsfiddle.net/WLUPj/2/
![Page 16: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/16.jpg)
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
![Page 17: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/17.jpg)
<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div></div>
![Page 18: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/18.jpg)
<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div></div>
![Page 19: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/19.jpg)
<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div></div>
![Page 20: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/20.jpg)
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
![Page 21: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/21.jpg)
<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div></div>
![Page 22: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/22.jpg)
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
Title: <input ng-model="title">
![Page 23: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/23.jpg)
function Ctrl($scope) { $scope.title = 'Lorem Ipsum';}
Title: <input ng-model="title">
![Page 24: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/24.jpg)
<div ng-app="zippyModule"> <div ng-controller="Ctrl"> Title: <input ng-model="title"> <hr> <div data-zippy="title"></div> </div></div>
![Page 25: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/25.jpg)
directive('zippy', function(){return {
restrict: 'A',replace: true,scope: {
title:'=zippy'},template: '<input type="text" ng-model="title" />'
}}
![Page 26: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/26.jpg)
directive('zippy', function(){return {
restrict: 'A',replace: true,scope: {
title:'=zippy'},template: '<input type="text" ng-model="title" />'
}}
![Page 27: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/27.jpg)
directive('zippy', function(){return {
restrict: 'A',replace: true,scope: {
title:'=zippy'},template: '<input type="text" ng-model="title" />'
}}
![Page 28: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/28.jpg)
![Page 29: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/29.jpg)
http://docs.angularjs.org/guide/databinding
![Page 30: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/30.jpg)
Killer FeaturesDependency Injection
![Page 31: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/31.jpg)
function Ctrl($scope) { // WHAT THE HECK SHALL I DO HERE???}
![Page 32: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/32.jpg)
function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE???}
![Page 33: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/33.jpg)
function Ctrl($scope, $location) { // WHAT THE HECK SHALL I DO HERE???}
![Page 34: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/34.jpg)
function Ctrl($scope, $location) { $scope.whereAmI = $location.host();}
![Page 35: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/35.jpg)
![Page 36: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/36.jpg)
![Page 37: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/37.jpg)
http://jsfiddle.net/9J7u5/2/
![Page 38: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/38.jpg)
Killer FeaturesSupport
![Page 39: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/39.jpg)
![Page 40: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/40.jpg)
![Page 41: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/41.jpg)
![Page 42: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/42.jpg)
![Page 43: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/43.jpg)
![Page 44: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/44.jpg)
![Page 45: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/45.jpg)
![Page 46: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/46.jpg)
https://github.com/angular/protractor
![Page 47: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/47.jpg)
Killer FeaturesDirectives
![Page 48: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/48.jpg)
<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div></div>
![Page 49: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/49.jpg)
<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div></div>
![Page 50: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/50.jpg)
<div ng-app="confoo"> <div ng-controller="Ctrl"> <div menu></div> </div></div>
![Page 51: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/51.jpg)
<div ng-app="confoo"> <div ng-controller="Ctrl"> <div data-menu></div> </div></div>
![Page 52: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/52.jpg)
var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' }};
![Page 53: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/53.jpg)
var links = { home: { link: 'http://example.com', title: 'Home' }, about: { link: 'http://example.com/about', title: 'About Us' }};
![Page 54: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/54.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 55: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/55.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 56: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/56.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 57: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/57.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 58: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/58.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 59: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/59.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 60: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/60.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 61: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/61.jpg)
<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div></div>
![Page 62: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/62.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 63: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/63.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 64: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/64.jpg)
<div ng-app="confoo"> <div ng-controller="Ctrl"> <div data-menu /> </div></div>
![Page 65: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/65.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 66: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/66.jpg)
<div ng-app="confoo"> <div ng-controller="Ctrl"> <menu /> </div></div>
![Page 67: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/67.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 68: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/68.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 69: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/69.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 70: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/70.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 71: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/71.jpg)
angular.module('confoo', []) .directive('menu', function(){ return { restrict: 'AE', scope: {}, template: ‘path/to/tpl.html’, link: function (scope) { scope.items = links; } } });
![Page 72: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/72.jpg)
<body ng-app="confoo"><confoo-header><div><div ng-controller=”MainCtrl”><confoo-sidebar>
</div><confoo-footer>
</div>
![Page 73: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/73.jpg)
<body ng-app="confoo"><confoo-header><div><div ng-controller=”MainCtrl”><confoo-sidebar>
</div><confoo-footer>
</div>
![Page 74: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/74.jpg)
<body ng-app="confoo"><confoo-header><div><div ng-controller=”MainCtrl”><confoo-sidebar>
</div><confoo-footer>
</div>
![Page 75: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/75.jpg)
<body ng-app="confoo"><confoo-header><div><div confoo-main-content><confoo-sidebar>
</div><confoo-footer>
</div>
![Page 76: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/76.jpg)
http://jsfiddle.net/Lj6CH/6/
![Page 77: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/77.jpg)
“Controllers, Directives and Services” http://is.gd/QlGYID
![Page 78: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/78.jpg)
and much much more :)
![Page 79: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/79.jpg)
Why do we like AngularJS?
![Page 80: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/80.jpg)
Solid and clear foundation
![Page 81: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/81.jpg)
Solid and clear foundation
$routeProvider.when(‘/about’, {templateUrl: '/views/about.html',controller: 'AboutController',
});
![Page 82: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/82.jpg)
Solid and clear foundation
$http({ method: 'GET', url: '/milk.html }).success(function(...) {
alert(‘YEAH!’);}).error(function(...) {
alert(‘AWWW, SNAP!’);});
![Page 83: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/83.jpg)
Works well with the JS ecosystem
![Page 84: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/84.jpg)
Works well with the JS ecosystem
![Page 85: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/85.jpg)
.container(data-bindonce).row
#my-whateverp {{ myModel.text }}
Works well with the JS ecosystem
![Page 86: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/86.jpg)
.container(data-bindonce).row
#my-whateverinput(ng-model=”myModel”)
Works well with the JS ecosystem
![Page 87: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/87.jpg)
Modern API-oriented architectures
![Page 88: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/88.jpg)
APIfy everything
![Page 89: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/89.jpg)
![Page 90: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/90.jpg)
Easier to scale
![Page 91: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/91.jpg)
No sessions on the servers
![Page 92: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/92.jpg)
mantain state on the client (LS)
![Page 93: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/93.jpg)
What will you hateabout AngularJS?
![Page 94: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/94.jpg)
ehm...
![Page 95: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/95.jpg)
https://www.destroyallsoftware.com/talks/wat
![Page 96: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/96.jpg)
Watchers
![Page 97: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/97.jpg)
lotsa bindings, lotsa watchers
![Page 98: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/98.jpg)
lotsa watchers, lotsa computation
![Page 99: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/99.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
![Page 100: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/100.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
prepare for N...
![Page 101: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/101.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
N * 1
![Page 102: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/102.jpg)
<ul> <li ng-repeat="item in items"> <a href="{{ item.link }}"> {{ item.title }} </a> </li></ul>
N * 2
![Page 103: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/103.jpg)
![Page 104: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/104.jpg)
<ul> <li ng-repeat="item in items">
<a href="{{ item.link }}">{{ item.title }}<menu
ng-if=”item.links”links=”item.links”
/></a>
</li></ul>
![Page 105: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/105.jpg)
<ul> <li ng-repeat="item in items">
<a href="{{ item.link }}">{{ item.title }}<menu
ng-if=”item.links”links=”item.links”
/></a>
</li></ul>
![Page 106: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/106.jpg)
use 1-way data binding if possible
![Page 107: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/107.jpg)
https://github.com/Pasvaz/bindonce
![Page 108: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/108.jpg)
try to stay under ~800 watchers
![Page 109: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/109.jpg)
UI screws for realat ~2000
;-)
![Page 110: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/110.jpg)
ehm...
![Page 111: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/111.jpg)
but also…
![Page 112: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/112.jpg)
![Page 113: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/113.jpg)
memory, rendering, ...
![Page 114: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/114.jpg)
they don’t just render anymore
![Page 115: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/115.jpg)
The browser is your platform
![Page 116: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/116.jpg)
and the VM on whichyour application runs
![Page 117: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/117.jpg)
is implemented in different ways, based on the browsers themselves
![Page 118: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/118.jpg)
![Page 119: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/119.jpg)
Is AngularJS the future?
![Page 120: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/120.jpg)
Maybe.
![Page 121: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/121.jpg)
Or, I mean...
![Page 122: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/122.jpg)
We will still need backends
![Page 123: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/123.jpg)
or use WP a lot ;-)
![Page 124: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/124.jpg)
but
![Page 125: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/125.jpg)
Natural evolution, decoupled apps
![Page 126: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/126.jpg)
Handy solution for some scenarios
![Page 127: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/127.jpg)
It is a future
![Page 128: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/128.jpg)
Javascript Frameworks And Data Bindinghttp://tunein.yap.tv/javascript/2012/06/11/javascript-frameworks-and-data-binding/
Angular, Backbone, CanJS and Emberhttp://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/
![Page 129: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/129.jpg)
...yawn...
![Page 130: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/130.jpg)
Alessandro Nadalin
![Page 131: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/131.jpg)
Alessandro Nadalin
@_odino_
![Page 132: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/132.jpg)
Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
![Page 133: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/133.jpg)
Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology
![Page 134: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/134.jpg)
Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology
odino.org
![Page 135: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/135.jpg)
Thanks!Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology
odino.org
![Page 136: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/136.jpg)
By the way
![Page 137: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/137.jpg)
Wanna join?
![Page 138: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/138.jpg)
We are looking for talented nerds!
![Page 139: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/139.jpg)
frontend engineer
We are looking for talented nerds!
![Page 140: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/140.jpg)
frontend engineer
We are looking for talented nerds!
data engineer
![Page 141: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/141.jpg)
lead frontend engineer
We are looking for talented nerds!
data engineer
![Page 142: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/142.jpg)
Thanks!Alessandro Nadalin
@_odino_
Namshi | Rocket Internet
VP Technology
odino.org
![Page 143: Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)](https://reader033.fdocuments.net/reader033/viewer/2022052522/554bb17eb4c905b8618b5a6a/html5/thumbnails/143.jpg)
Image credits
https://www.flickr.com/photos/santheo/374630020/sizes/l/http://www.flickr.com/photos/spunkinator/3050946547/sizes/o/in/photostream/
https://www.flickr.com/photos/savidgefamily/6873109431/sizes/l/https://www.flickr.com/photos/safari_vacation/7496765660/sizes/o/
https://www.flickr.com/photos/fensterbme/439758782/sizes/l/https://www.flickr.com/photos/dkrape/5154684383/sizes/l/
https://www.flickr.com/photos/kingstongal/2101194332/sizes/o/https://www.flickr.com/photos/thescott365/3186150930/sizes/l/