Introduction to Angular.Js

Transcript

1. 1.

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

2. 2.

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

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

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

7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

    None
11. 11.

    None
12. 12.

    None
13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

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

17. 17.

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

    system
18. 18.

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

    system • Template engine
19. 19.

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

    system • Template engine • Routing
20. 20.

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

    system • Template engine • Routing • Testability
21. 21.

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

    system • Template engine • Routing • Testability
22. 22.

    None
23. 23.

    None
24. 24.

    None
25. 25.

    None
26. 26.

    None
27. 27.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Недостатъци на Backbone.js
28. 28.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Недостатъци на Backbone.js Angular
29. 29.

    • Application lifecycle! • Conventions • Plugin/module system • Template

    engine • Routing • Testability Angular
30. 30.

    None
31. 31.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Angular
32. 32.

    • Application lifecycle • Conventions! • Plugin/module system • Template

    engine • Routing • Testability Angular
33. 33.

    Backbone

34. 34.

    Angular

35. 35.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Angular
36. 36.

    • Application lifecycle • Conventions • Plugin/module system! • Template

    engine • Routing • Testability Angular
37. 37.

    Plugin/module system

38. 38.

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

39. 39.

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

40. 40.

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

41. 41.

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

    });
42. 42.

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

    });
43. 43.

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

    } }; });
44. 44.

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

45. 45.

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

46. 46.

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

47. 47.

    injector.get(‘Person’) Person

48. 48.

    app.factory('User', function() { var name = ''; ! return {

    setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
49. 49.

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

    });
50. 50.

    app.factory('User', function() { var name = ''; ! return {

    setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
51. 51.

    app.factory('User', function(Message) { var name = ''; ! return {

    setName: function(newName) { name = newName; }, getName: function() { return name; }, say: function(message) { Message.send(name + ' - ' + message); } }; });
52. 52.

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

    });
53. 53.

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

54. 54.

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

55. 55.

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

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

57. 57.

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

58. 58.

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

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

60. 60.

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

61. 61.

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

62. 62.

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

63. 63.

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

    } }; });
64. 64.

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

    $window.alert(message); } }; }]);
65. 65.

    (function() { function MessageFactory($window) { return { say: function(message) {

    return $window.alert(message); } }; } ! MessageFactory.$inject = ['$window']; ! app.factory('Message', MessageFactory) })();
66. 66.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Angular
67. 67.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine! • Routing • Testability Angular
68. 68.

    Template engine

69. 69.

    <html ng-app> <body> <div> <ul> <li>{{message}}</li> </ul> <form> <input type="text"

    ng-model="message"> </form> </div> </body> </html> 1
70. 70.

    <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>
71. 71.

    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
72. 72.

    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 = ''; } }; });
73. 73.

    app.factory('Message', function() { var messages = []; ! return {

    fetch: function() { return messages; }, post: function(text) { messages.push({text: text}); } }; }); 3
74. 74.

    <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>
75. 75.

    <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>
76. 76.

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

77. 77.

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

    { if ($scope.message.length) { Message.post($scope.message); $scope.message = ''; } }; }); 4
78. 78.

    <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>
79. 79.

    <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
80. 80.

    Demo

81. 81.

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

82. 82.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Angular
83. 83.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing! • Testability Angular
84. 84.

    Routing

85. 85.

    <div ng-view></div>

86. 86.

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

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Angular
88. 88.

    • Application lifecycle • Conventions • Plugin/module system • Template

    engine • Routing • Testability Angular
89. 89.

    Testability

90. 90.

    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'); })); });
91. 91.

    var app = angular.module('Demo', []); ! app.directive('myDirective', function () {

    return { restrict: 'E', replace: true, template: 'Varna User Group Meeting {{2013 + 1}}’ }; });
92. 92.

    Angular • Application lifecycle • Conventions • Plugin/module system •

    Template engine • Routing • Testability
93. 93.

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

    angular-i18n • angular-hammer • …
94. 94.

    Проблеми на Angular

95. 95.

    Проблеми на Angular

96. 96.

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

97. 97.

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

    HTML
98. 98.

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

    HTML • Performance проблеми
99. 99.

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

    HTML • Performance проблеми • Learning curve
100. 100.

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

     HTML • Performance проблеми • Learning curve • Добри практики
101. 101.

     И сега на къде? https://angularjs.org/

102. 102.

     https://speakerdeck.com/rstankov/introduction-to-angular-dot-js

103. 103.

     None
104. 104.

     None
105. 105.

     @rstankov Благодаря за вниманието :)

106. 106.

     Въпроси?