Introduction to Angular.Js

Slide 1

Slide 1 text

Радослав Станков Varna User Group Meeting 27/09/2014

Slide 2

Slide 2 text

Кой съм аз? @rstankov ! ! ! ! http://rstankov.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Радослав Станков JavaScript event-driven architecture OpenFest 2010

Slide 7

Slide 7 text

Радослав Станков JavaScript event-driven architecture OpenFest 2010

Slide 8

Slide 8 text

Радослав Станков OpenFest 05/11/2011

Slide 9

Slide 9 text

Радослав Станков OpenFest 05/11/2011

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Недостатъци на Backbone.js

Slide 14

Slide 14 text

Недостатъци на Backbone.js

Slide 15

Slide 15 text

Недостатъци на Backbone.js • Application lifecycle

Slide 16

Slide 16 text

Недостатъци на Backbone.js • Application lifecycle • Conventions

Slide 17

Slide 17 text

Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system

Slide 18

Slide 18 text

Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine

Slide 19

Slide 19 text

Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing

Slide 20

Slide 20 text

Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability

Slide 21

Slide 21 text

Недостатъци на Backbone.js • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Недостатъци на Backbone.js

Slide 28

Slide 28 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Недостатъци на Backbone.js Angular

Slide 29

Slide 29 text

• Application lifecycle! • Conventions • Plugin/module system • Template engine • Routing • Testability Angular

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular

Slide 32

Slide 32 text

• Application lifecycle • Conventions! • Plugin/module system • Template engine • Routing • Testability Angular

Slide 33

Slide 33 text

Backbone

Slide 34

Slide 34 text

Angular

Slide 35

Slide 35 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular

Slide 36

Slide 36 text

• Application lifecycle • Conventions • Plugin/module system! • Template engine • Routing • Testability Angular

Slide 37

Slide 37 text

Plugin/module system

Slide 38

Slide 38 text

app = angular.module('Demo', []);

Slide 39

Slide 39 text

app = angular.module('Demo', ['ngResource', 'simpleFormat']);

Slide 40

Slide 40 text

app.controller('MessagesCtrl', function($scope) { $scope.sayHi = function() { window.alert('Hi'); } });

Slide 41

Slide 41 text

app.controller('MessagesCtrl', function($scope, $window) { $scope.sayHi = function() { $window.alert('Hi'); } });

Slide 42

Slide 42 text

app.controller('MessagesCtrl', function($scope, Message) { $scope.sayHi = function() { Message.send('Hi') } });

Slide 43

Slide 43 text

app.factory('Message', function($window) { return { send: function(message) { return $window.alert(message); } }; });

Slide 44

Slide 44 text

value service factory provider injector.get(‘Person’) Person

Slide 45

Slide 45 text

app.value('User', { name: 'Rado', });

Slide 46

Slide 46 text

app.controller('MessagesCtrl', function($scope, Message, User) { Message.send(User.name + '- Hi'); });

Slide 47

Slide 47 text

injector.get(‘Person’) Person

Slide 48

Slide 48 text

app.factory('User', function() { var name = ''; ! return { setName: function(newName) { name = newName; }, getName: function() { return name; } }; });

Slide 49

Slide 49 text

app.controller('MessagesCtrl', function($scope, Message, User) { User.setName('Rado'); Message.send(User.getName() + '- Hi'); });

Slide 50

Slide 50 text

app.factory('User', function() { var name = ''; ! return { setName: function(newName) { name = newName; }, getName: function() { return name; } }; });

Slide 51

Slide 51 text

app.factory('User', function(Message) { var name = ''; ! return { setName: function(newName) { name = newName; }, getName: function() { return name; }, say: function(message) { Message.send(name + ' - ' + message); } }; });

Slide 52

Slide 52 text

app.controller('MessagesCtrl', function($scope, Message, User) { User.setName('Rado'); Message.send(User.getName() + '- Hi'); });

Slide 53

Slide 53 text

app.controller('MessagesCtrl', function($scope, User) { User.setName('Rado'); User.say('Hi'); });

Slide 54

Slide 54 text

Cache? Cache = factory(…) false true injector.get(‘Person’) Person

Slide 55

Slide 55 text

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); }; });

Slide 56

Slide 56 text

app.controller('MessagesCtrl', function($scope, User) { User.setName('Rado'); User.say('Hi'); });

Slide 57

Slide 57 text

Cache? Cache = new service(…) false true injector.get(‘Person’) Person

Slide 58

Slide 58 text

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); } }; } });

Slide 59

Slide 59 text

app.config(function(UserProvider){ UserProvider.name = 'Rado'; });

Slide 60

Slide 60 text

app.controller('MessagesCtrl', function($scope, User) { User.say('Hi'); });

Slide 61

Slide 61 text

Cache? Cache = new provider(…) injector.get(‘PersonProvider’) PersonProvider true false

Slide 62

Slide 62 text

Cache? false true injector.get(‘Person’) Person injector.get(‘PersonProvider’) Cache = PersonProvider.$get(…)

Slide 63

Slide 63 text

app.factory('Message', function($window) { return { say: function(message) { return $window.alert(message); } }; });

Slide 64

Slide 64 text

app.factory('Message', ['$window', function($window) { return { say: function(message) { return $window.alert(message); } }; }]);

Slide 65

Slide 65 text

Slide 66

Slide 66 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular

Slide 67

Slide 67 text

• Application lifecycle • Conventions • Plugin/module system • Template engine! • Routing • Testability Angular

Slide 68

Slide 68 text

Template engine

Slide 69

Slide 69 text

{{message}}

Slide 70

Slide 70 text

{{message.text}}

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

app.factory('Message', function() { var messages = []; ! return { fetch: function() { return messages; }, post: function(text) { messages.push({text: text}); } }; }); 3

Slide 74

Slide 74 text

{{message.text}}

Slide 75

Slide 75 text

{{message.text}}

Slide 76

Slide 76 text

app.controller('MessagesCtrl', function($scope, Message) { $scope.messages = Message.fetch(); });

Slide 77

Slide 77 text

app.controller('PostCtrl', function($scope, Message) { $scope.message = ''; $scope.post = function() { if ($scope.message.length) { Message.post($scope.message); $scope.message = ''; } }; }); 4

Slide 78

Slide 78 text

{{message.text}}

Slide 79

Slide 79 text

Slide 80

Slide 80 text

Demo

Slide 81

Slide 81 text

https://github.com/RStankov/talks-code Demo Code

Slide 82

Slide 82 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular

Slide 83

Slide 83 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing! • Testability Angular

Slide 84

Slide 84 text

Routing

Slide 85

Slide 85 text

Slide 86

Slide 86 text

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; } } }); });

Slide 87

Slide 87 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular

Slide 88

Slide 88 text

• Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability Angular

Slide 89

Slide 89 text

Testability

Slide 90

Slide 90 text

describe('myDirective', function() { beforeEach(module('Demo')); ! it('replaces element', inject(function($compile, $rootScope) { var element = $compile(“")($rootScope) ! $rootScope.$digest(); ! expect(element.html()).toContain('Varna User Group Meeting 2014'); })); });

Slide 91

Slide 91 text

var app = angular.module('Demo', []); ! app.directive('myDirective', function () { return { restrict: 'E', replace: true, template: 'Varna User Group Meeting {{2013 + 1}}’ }; });

Slide 92

Slide 92 text

Angular • Application lifecycle • Conventions • Plugin/module system • Template engine • Routing • Testability

Slide 93

Slide 93 text

… и още • angular-resource • angular-animation • angular-ui-router • angular-i18n • angular-hammer • …

Slide 94

Slide 94 text

Проблеми на Angular

Slide 95

Slide 95 text

Проблеми на Angular

Slide 96

Slide 96 text

Проблеми на Angular • Много магия

Slide 97

Slide 97 text

Проблеми на Angular • Много магия • Доста логика в HTML

Slide 98

Slide 98 text

Проблеми на Angular • Много магия • Доста логика в HTML • Performance проблеми

Slide 99

Slide 99 text

Проблеми на Angular • Много магия • Доста логика в HTML • Performance проблеми • Learning curve

Slide 100

Slide 100 text

Проблеми на Angular • Много магия • Доста логика в HTML • Performance проблеми • Learning curve • Добри практики