Introduction to Angular.Js

Introduction to Angular JS from the point of view of Backbone Js developer.

Transcript

1. Радослав Станков Varna User Group Meeting 27/09/2014
2. Кой съм аз? @rstankov ! ! ! ! http://rstankov.com
6. Радослав Станков JavaScript event-driven architecture OpenFest 2010
7. Радослав Станков JavaScript event-driven architecture OpenFest 2010
8. Радослав Станков OpenFest 05/11/2011
9. Радослав Станков OpenFest 05/11/2011
13. Недостатъци на Backbone.js
14. Недостатъци на Backbone.js
15. Недостатъци на Backbone.js • Application lifecycle
16. Недостатъци на Backbone.js • Application lifecycle • Conventions
17. Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system
18. Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine
19. Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing
20. Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability
21. Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability
27. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Недостатъци на Backbone.js
28. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Недостатъци на Backbone.js Angular
29. • Application lifecycle! • Conventions • Plugin/module system • Template engine • Routing • Testability Angular
31. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular
32. • Application lifecycle • Conventions! • Plugin/module system • Template engine • Routing • Testability Angular
33. Backbone
34. Angular
35. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular
36. • Application lifecycle • Conventions • Plugin/module system! • Template engine • Routing • Testability Angular
37. Plugin/module system
38. app = angular.module('Demo', []);
39. app = angular.module('Demo', ['ngResource', 'simpleFormat']);
40. app.controller('MessagesCtrl', function($scope) { $scope.sayHi = function() { window.alert('Hi'); } });
41. app.controller('MessagesCtrl', function($scope, $window) { $scope.sayHi = function() { $window.alert('Hi'); } });
42. app.controller('MessagesCtrl', function($scope, Message) { $scope.sayHi = function() { Message.send('Hi') } });
43. app.factory('Message', function($window) { return { send: function(message) { return $window.alert(message); } }; });
44. value service factory provider injector.get(‘Person’) Person
45. app.value('User', { name: 'Rado', });
46. app.controller('MessagesCtrl', function($scope, Message, User) { Message.send(User.name + '- Hi'); });
47. injector.get(‘Person’) Person
48. app.factory('User', function() { var name = ''; ! return { setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
49. app.controller('MessagesCtrl', function($scope, Message, User) { User.setName('Rado'); Message.send(User.getName() + '- Hi'); });
50. app.factory('User', function() { var name = ''; ! return { setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
51. app.factory('User', function(Message) { var name = ''; ! return { setName: function(newName) { name = newName; }, getName: function() { return name; }, say: function(message) { Message.send(name + ' - ' + message); } }; });
52. app.controller('MessagesCtrl', function($scope, Message, User) { User.setName('Rado'); Message.send(User.getName() + '- Hi'); });
53. app.controller('MessagesCtrl', function($scope, User) { User.setName('Rado'); User.say('Hi'); });
54. Cache? Cache = factory(…) false true injector.get(‘Person’) Person
55. app.service('User', function(Message) { var name = ''; ! this.setName = function(newName) { name = newName; }; ! this.getName = function() { return name; }; ! this.say = function(message) { Message.send(name + ' - ' + message); }; });
56. app.controller('MessagesCtrl', function($scope, User) { User.setName('Rado'); User.say('Hi'); });
57. Cache? Cache = new service(…) false true injector.get(‘Person’) Person
58. app.provider('User', function() { this.name = ''; ! this.$get = function(Message) { var self = this; return { setName: function(newName) { self.name = newName; }, getName: function() { return self.name; }, say: function(message) { Message.send(self.name + ' - ' + message); } }; } });
59. app.config(function(UserProvider){ UserProvider.name = 'Rado'; });
60. app.controller('MessagesCtrl', function($scope, User) { User.say('Hi'); });
61. Cache? Cache = new provider(…) injector.get(‘PersonProvider’) PersonProvider true false
62. Cache? false true injector.get(‘Person’) Person injector.get(‘PersonProvider’) Cache = PersonProvider.$get(…)
63. app.factory('Message', function($window) { return { say: function(message) { return $window.alert(message); } }; });
64. app.factory('Message', ['$window', function($window) { return { say: function(message) { return $window.alert(message); } }; }]);
65. (function() { function MessageFactory($window) { return { say: function(message) { return $window.alert(message); } }; } ! MessageFactory.$inject = ['$window']; ! app.factory('Message', MessageFactory) })();
66. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular
67. • Application lifecycle • Conventions • Plugin/module system • Template engine! • Routing • Testability Angular
68. Template engine
69. <html ng-app> <body> <div> <ul> <li>{{message}}</li> </ul> <form> <input type="text" ng-model="message"> </form> </div> </body> </html> 1
70. <html ng-app="Demo"> <body> <div ng-controller="MessagesCtrl"> <ul> <li ng-repeat="message in messages"> {{message.text}} </li> </ul> <form ng-submit="post();"> <input type="text" ng-model="message"> </form> </div> </body> </html>
71. var app = angular.module('Demo', []); ! app.controller('MessagesCtrl', function($scope) { $scope.messages = []; $scope.message = ''; $scope.post = function() { if ($scope.message.length) { $scope.messages.push({text: $scope.message}); $scope.message = ''; } }; }); 2
72. var app = angular.module('Demo', []); ! app.controller('MessagesCtrl', function($scope, Message) { $scope.messages = Message.fetch(); $scope.message = ''; $scope.post = function() { if ($scope.message.length) { Message.post($scope.message); $scope.message = ''; } }; });
73. app.factory('Message', function() { var messages = []; ! return { fetch: function() { return messages; }, post: function(text) { messages.push({text: text}); } }; }); 3
74. <html ng-app="Demo"> <body> <div ng-controller="MessagesCtrl"> <div> <ul> <li ng-repeat="message in messages"> {{message.text}} </li> </ul> </div> <form ng-submit="post();"> <input type="text" ng-model="message"> </form> </div> </body> </html>
75. <html ng-app="Demo"> <body> <div> <div ng-controller="MessagesCtrl"> <ul> <li ng-repeat="message in messages"> {{message.text}} </li> </ul> </div> <form ng-controller="PostCtrl" ng-submit="post();"> <input type="text" ng-model="message"> </form> </div> </body> </html>
76. app.controller('MessagesCtrl', function($scope, Message) { $scope.messages = Message.fetch(); });
77. app.controller('PostCtrl', function($scope, Message) { $scope.message = ''; $scope.post = function() { if ($scope.message.length) { Message.post($scope.message); $scope.message = ''; } }; }); 4
78. <html ng-app="Demo"> <body> <div> <div ng-controller="MessagesCtrl"> <ul> <li ng-repeat="message in messages"> {{message.text}} </li> </ul> </div> <form ng-controller="PostCtrl" ng-submit="post();"> <input type="text" ng-model="message"> </form> </div> </body> </html>
79. <html ng-app="Demo"> <body> <div> <div ng-controller="MessagesCtrl">
 <input type="search" ng-model="search"> <ul> <li ng-repeat="message in messages | filter:search”> {{message.text}} </li> </ul> </div> <form ng-controller="PostCtrl" ng-submit="post();"> <input type="text" ng-model="message"> </form> </div> </body> </html> 5
80. Demo
81. https://github.com/RStankov/talks-code Demo Code
82. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular
83. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing! • Testability Angular
84. Routing
85. <div ng-view></div>
86. app.config(function($routeProvider) { $routeProvider.when('/chats/:id', { templateUrl: 'chat/show.html', controller: 'ChatShowCtrl', resolve: { messages: function($routeParams, Message) { return Message.fromRoom($routeParams.id).$promise; } } }); });
87. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular
88. • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular
89. Testability
90. describe('myDirective', function() { beforeEach(module('Demo')); ! it('replaces element', inject(function($compile, $rootScope) { var element = $compile(“<my-directive></my-directive>")($rootScope) ! $rootScope.$digest(); ! expect(element.html()).toContain('Varna User Group Meeting 2014'); })); });
91. var app = angular.module('Demo', []); ! app.directive('myDirective', function () { return { restrict: 'E', replace: true, template: 'Varna User Group Meeting {{2013 + 1}}’ }; });
92. Angular • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability
93. … и още • angular-resource • angular-animation • angular-ui-router • angular-i18n • angular-hammer • …
94. Проблеми на Angular
95. Проблеми на Angular
96. Проблеми на Angular • Много магия
97. Проблеми на Angular • Много магия • Доста логика в HTML
98. Проблеми на Angular • Много магия • Доста логика в HTML • Performance проблеми
99. Проблеми на Angular • Много магия • Доста логика в HTML • Performance проблеми • Learning curve
100. Проблеми на Angular • Много магия • Доста логика в HTML • Performance проблеми • Learning curve • Добри практики
101. И сега на къде? https://angularjs.org/
102. https://speakerdeck.com/rstankov/introduction-to-angular-dot-js
105. @rstankov Благодаря за вниманието :)
106. Въпроси?