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
160
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
Building LLM Powered Features (lightning talk)
rstankov
0
9
All you need is CSS
rstankov
0
52
Ruby on Rails The Single Engineer Framework
rstankov
0
8
Rails: The Missing Parts
rstankov
1
160
The dream that turned into nightmare
rstankov
0
250
The dream that turned into nightmare (lightning)
rstankov
0
78
Ruby on Rails - The Single Engineer Framework
rstankov
0
300
Living Without Exceptions
rstankov
1
260
One engineer company with Ruby on Rails
rstankov
2
750
Other Decks in Technology
See All in Technology
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
400
robocopy の怖い話/scary-story-about-robocopy
emiki
0
290
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
6.9k
Recoil脱却の現状と挑戦
kirik
3
420
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
250
ファインディにおける Dataform ブランチ戦略
hiracky16
0
180
スプリントレビューを効果的にするために
miholovesq
9
1.6k
OpenTelemetry の Log を使いこなそう
biwashi
5
1k
地図と生成AI
nakasho
0
790
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
200
MCPと認可まわりの話 / mcp_and_authorization
convto
2
240
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
140
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Gamification - CAS2011
davidbonilla
81
5.4k
Embracing the Ebb and Flow
colly
86
4.8k
Side Projects
sachag
455
43k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
4 Signs Your Business is Dying
shpigford
184
22k
BBQ
matthewcrist
89
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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 Благодаря за вниманието :)
Въпроси?