Introduction to Angular JS from the point of view of Backbone Js developer.
Радослав СтанковVarna User Group Meeting 27/09/2014
View Slide
Кой съм аз?@rstankov!!!!http://rstankov.com
Радослав Станков JavaScript event-driven architectureOpenFest 2010
Радослав Станков OpenFest 05/11/2011
Радослав Станков OpenFest05/11/2011
Недостатъци на Backbone.js
Недостатъци на Backbone.js• Application lifecycle
Недостатъци на Backbone.js• Application lifecycle• Conventions
Недостатъци на Backbone.js• Application lifecycle• Conventions• Plugin/module system
Недостатъци на Backbone.js• Application lifecycle• Conventions• Plugin/module system• Template engine
Недостатъци на Backbone.js• Application lifecycle• Conventions• Plugin/module system• Template engine• Routing
Недостатъци на Backbone.js• Application lifecycle• Conventions• Plugin/module system• Template engine• Routing• Testability
• Application lifecycle• Conventions• Plugin/module system• Template engine• Routing• TestabilityНедостатъци на Backbone.js
• Application lifecycle• Conventions• Plugin/module system• Template engine• Routing• TestabilityНедостатъци на Backbone.jsAngular
• Application lifecycle!• Conventions• Plugin/module system• Template engine• Routing• TestabilityAngular
• Application lifecycle• Conventions• Plugin/module system• Template engine• Routing• TestabilityAngular
• Application lifecycle• Conventions!• Plugin/module system• Template engine• Routing• TestabilityAngular
Backbone
Angular
• Application lifecycle• Conventions• Plugin/module system!• Template engine• Routing• TestabilityAngular
Plugin/module system
app = angular.module('Demo', []);
app = angular.module('Demo', ['ngResource', 'simpleFormat']);
app.controller('MessagesCtrl', function($scope) {$scope.sayHi = function() {window.alert('Hi');}});
app.controller('MessagesCtrl', function($scope, $window) {$scope.sayHi = function() {$window.alert('Hi');}});
app.controller('MessagesCtrl', function($scope, Message) {$scope.sayHi = function() {Message.send('Hi')}});
app.factory('Message', function($window) {return {send: function(message) {return $window.alert(message);}};});
value service factory providerinjector.get(‘Person’)Person
app.value('User', {name: 'Rado',});
app.controller('MessagesCtrl', function($scope, Message, User) {Message.send(User.name + '- Hi');});
injector.get(‘Person’)Person
app.factory('User', function() {var name = '';!return {setName: function(newName) {name = newName;},getName: function() {return name;}};});
app.controller('MessagesCtrl', function($scope, Message, User) {User.setName('Rado');Message.send(User.getName() + '- Hi');});
app.factory('User', function(Message) {var name = '';!return {setName: function(newName) {name = newName;},getName: function() {return name;},say: function(message) {Message.send(name + ' - ' + message);}};});
app.controller('MessagesCtrl', function($scope, User) {User.setName('Rado');User.say('Hi');});
Cache? Cache = factory(…)falsetrueinjector.get(‘Person’)Person
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);};});
Cache? Cache = new service(…)falsetrueinjector.get(‘Person’)Person
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);}};}});
app.config(function(UserProvider){UserProvider.name = 'Rado';});
app.controller('MessagesCtrl', function($scope, User) {User.say('Hi');});
Cache? Cache = new provider(…)injector.get(‘PersonProvider’)PersonProvidertruefalse
Cache?falsetrueinjector.get(‘Person’)Personinjector.get(‘PersonProvider’)Cache = PersonProvider.$get(…)
app.factory('Message', function($window) {return {say: function(message) {return $window.alert(message);}};});
app.factory('Message', ['$window', function($window) {return {say: function(message) {return $window.alert(message);}};}]);
(function() {function MessageFactory($window) {return {say: function(message) {return $window.alert(message);}};}!MessageFactory.$inject = ['$window'];!app.factory('Message', MessageFactory)})();
• Application lifecycle• Conventions• Plugin/module system• Template engine!• Routing• TestabilityAngular
Template engine
{{message}}1
{{message.text}}
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
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 = '';}};});
app.factory('Message', function() {var messages = [];!return {fetch: function() {return messages;},post: function(text) {messages.push({text: text});}};});3
app.controller('MessagesCtrl', function($scope, Message) {$scope.messages = Message.fetch();});
app.controller('PostCtrl', function($scope, Message) {$scope.message = '';$scope.post = function() {if ($scope.message.length) {Message.post($scope.message);$scope.message = '';}};});4
5
Demo
https://github.com/RStankov/talks-codeDemo Code
• Application lifecycle• Conventions• Plugin/module system• Template engine• Routing!• TestabilityAngular
Routing
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;}}});});
Testability
describe('myDirective', function() {beforeEach(module('Demo'));!it('replaces element', inject(function($compile, $rootScope) {var element = $compile(“")($rootScope)!$rootScope.$digest();!expect(element.html()).toContain('Varna User Group Meeting 2014');}));});
var app = angular.module('Demo', []);!app.directive('myDirective', function () {return {restrict: 'E',replace: true,template: 'Varna User Group Meeting {{2013 + 1}}’};});
Angular• Application lifecycle• Conventions• Plugin/module system• Template engine• Routing• Testability
… и още• angular-resource• angular-animation• angular-ui-router• angular-i18n• angular-hammer• …
Проблеми на Angular
Проблеми на Angular• Много магия
Проблеми на Angular• Много магия• Доста логика в HTML
Проблеми на Angular• Много магия• Доста логика в HTML• Performance проблеми
Проблеми на Angular• Много магия• Доста логика в HTML• Performance проблеми• Learning curve
Проблеми на Angular• Много магия• Доста логика в HTML• Performance проблеми• Learning curve• Добри практики
И сега на къде?https://angularjs.org/
https://speakerdeck.com/rstankov/introduction-to-angular-dot-js
@rstankovБлагодаря за вниманието :)
Въпроси?
rstankov
rponte
you
kawaguti
trycycle
hayaok3
satoshirobatofujimoto
hcrane
ryomaru0825
iselegant
takmin
spinscale
nenonaninu
morganepeng
malarkey
panda_program
bermonpainter
kevinliebholz
akmur
schacon
edds
kastner
reverentgeek
jrom
lara