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
10
Ruby on Rails - The Single Engineer Framework
rstankov
0
160
Living Without Exceptions
rstankov
1
120
One engineer company with Ruby on Rails
rstankov
2
560
Eliminating noise from your code
rstankov
0
37
Best JavaScript is No Javascript
rstankov
0
67
React Mid Game
rstankov
2
51
React Native for Better or Worst
rstankov
0
70
Component-Driven UI with ViewComponent Gem
rstankov
4
910
Other Decks in Technology
See All in Technology
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
AWSでRAGを作る法方
sonoda_mj
1
140
スレットハンティングについて知っておきたいこと
hacket
0
130
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
390
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
Building Adaptive Systems
keathley
34
2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
In The Pink: A Labor of Love
frogandcode
139
22k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Leading Effective Engineering Teams 2024
addyosmani
3
300
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
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 Благодаря за вниманието :)
Въпроси?