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
170
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
17
All you need is CSS
rstankov
0
58
Ruby on Rails The Single Engineer Framework
rstankov
0
12
Rails: The Missing Parts
rstankov
1
170
The dream that turned into nightmare
rstankov
0
260
The dream that turned into nightmare (lightning)
rstankov
0
83
Ruby on Rails - The Single Engineer Framework
rstankov
0
310
Living Without Exceptions
rstankov
1
260
One engineer company with Ruby on Rails
rstankov
2
760
Other Decks in Technology
See All in Technology
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
160
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
160
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.1k
2025年になってもまだMySQLが好き
yoku0825
8
4.2k
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
350
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.5k
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
11
1k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
150
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
9.9k
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
590
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
300
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Six Lessons from altMBA
skipperchong
28
4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Visualization
eitanlees
148
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Unsuck your backbone
ammeep
671
58k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building an army of robots
kneath
306
46k
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 Благодаря за вниманието :)
Въпроси?