Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Angular.Js
Search
Radoslav Stankov
September 27, 2014
Technology
0
110
Introduction to Angular.Js
Introduction to Angular JS from the point of view of Backbone Js developer.
Radoslav Stankov
September 27, 2014
Tweet
Share
More Decks by Radoslav Stankov
See All by Radoslav Stankov
The dream that turned into nightmare (lightning)
rstankov
0
20
Ruby on Rails - The Single Engineer Framework
rstankov
0
190
Living Without Exceptions
rstankov
1
140
One engineer company with Ruby on Rails
rstankov
2
590
Eliminating noise from your code
rstankov
0
56
Best JavaScript is No Javascript
rstankov
0
88
React Mid Game
rstankov
2
70
React Native for Better or Worst
rstankov
0
89
Component-Driven UI with ViewComponent Gem
rstankov
4
940
Other Decks in Technology
See All in Technology
脆弱星に導かれて
nishimunea
1
1.5k
Hyperledger Fabricの成長、成熟を振り返る / Looking back history of Hyperledger Fabric
gakumura
0
180
RAGHack: Kickoff and RAG 101
pamelafox
0
220
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
5
680
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
エンジニア向け会社紹介資料
caddi_eng
15
250k
歴史と背景から改めて振り返るVPC
shotashiratori
2
220
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
2
580
Practical GenAI with Go - Elastic and Golang Sydney
adriancole
0
130
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
660
APIのドキュメント化何使ってますか?
miu_crescent
2
160
waitany と waitall を作った話
mrkn
0
110
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
The Cult of Friendly URLs
andyhume
76
5.9k
Adopting Sorbet at Scale
ufuk
72
8.9k
Designing the Hi-DPI Web
ddemaree
278
34k
Fireside Chat
paigeccino
31
2.9k
Teambox: Starting and Learning
jrom
131
8.7k
Agile that works and the tools we love
rasmusluckow
327
20k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
Web development in the modern age
philhawksworth
204
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Transcript
Радослав Станков Varna User Group Meeting 27/09/2014
Кой съм аз? @rstankov ! ! ! ! http://rstankov.com
None
None
None
Радослав Станков JavaScript event-driven architecture OpenFest 2010
Радослав Станков JavaScript event-driven architecture OpenFest 2010
Радослав Станков OpenFest 05/11/2011
Радослав Станков OpenFest 05/11/2011
None
None
None
Недостатъци на Backbone.js
Недостатъци на 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
Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module
system • Template engine • Routing • Testability
None
None
None
None
None
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing • Testability Недостатъци на Backbone.js
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing • Testability Недостатъци на Backbone.js Angular
• Application lifecycle! • Conventions • Plugin/module system • Template
engine • Routing • Testability Angular
None
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing • Testability Angular
• Application lifecycle • Conventions! • Plugin/module system • Template
engine • Routing • Testability Angular
Backbone
Angular
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing • Testability Angular
• Application lifecycle • Conventions • Plugin/module system! • Template
engine • Routing • Testability Angular
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 provider injector.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() { var name = ''; ! return {
setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
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, Message, User) { User.setName('Rado'); Message.send(User.getName() + '- Hi');
});
app.controller('MessagesCtrl', function($scope, User) { User.setName('Rado'); User.say('Hi'); });
Cache? Cache = factory(…) false true injector.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); }; });
app.controller('MessagesCtrl', function($scope, User) { User.setName('Rado'); User.say('Hi'); });
Cache? Cache = new service(…) false true injector.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’) PersonProvider true false
Cache? false true injector.get(‘Person’) Person injector.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 • Testability Angular
• Application lifecycle • Conventions • Plugin/module system • Template
engine! • Routing • Testability Angular
Template engine
<html ng-app> <body> <div> <ul> <li>{{message}}</li> </ul> <form> <input type="text"
ng-model="message"> </form> </div> </body> </html> 1
<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>
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
<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>
<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>
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
<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>
<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
Demo
https://github.com/RStankov/talks-code Demo Code
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing • Testability Angular
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing! • Testability Angular
Routing
<div ng-view></div>
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; } } }); });
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing • Testability Angular
• Application lifecycle • Conventions • Plugin/module system • Template
engine • Routing • Testability Angular
Testability
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'); })); });
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 • Много магия
Проблеми на 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
None
None
@rstankov Благодаря за вниманието :)
Въпроси?