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
130
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
Rails: The Missing Parts
rstankov
1
94
The dream that turned into nightmare
rstankov
0
130
The dream that turned into nightmare (lightning)
rstankov
0
45
Ruby on Rails - The Single Engineer Framework
rstankov
0
240
Living Without Exceptions
rstankov
1
210
One engineer company with Ruby on Rails
rstankov
2
660
Eliminating noise from your code
rstankov
0
110
Best JavaScript is No Javascript
rstankov
0
140
React Mid Game
rstankov
2
120
Other Decks in Technology
See All in Technology
東京Ruby会議12 Ruby と Rust と私 / Tokyo RubyKaigi 12 Ruby, Rust and me
eagletmt
3
850
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
2.3k
Unsafe.BitCast のすゝめ。
nenonaninu
0
190
Kotlin Multiplatformのポテンシャル
recruitengineers
PRO
2
150
AWS re:Invent 2024 re:Cap Taipei (for Developer): New Launches that facilitate Developer Workflow and Continuous Innovation
dwchiang
0
160
Azureの開発で辛いところ
re3turn
0
240
#TRG24 / David Cuartielles / Post Open Source
tarugoconf
0
570
【NGK2025S】動物園(PINTO_model_zoo)に遊びに行こう
kazuhitotakahashi
0
220
月間60万ユーザーを抱える 個人開発サービス「Walica」の 技術スタック変遷
miyachin
1
130
KMP with Crashlytics
sansantech
PRO
0
240
AWSマルチアカウント統制環境のすゝめ / 20250115 Mitsutoshi Matsuo
shift_evolve
0
110
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
120
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
Documentation Writing (for coders)
carmenintech
67
4.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing for humans not robots
tammielis
250
25k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A Tale of Four Properties
chriscoyier
157
23k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Optimising Largest Contentful Paint
csswizardry
33
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
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 Благодаря за вниманието :)
Въпроси?