Introduction to Angular.Js

Introduction to Angular.Js

Introduction to Angular JS from the point of view of Backbone Js developer.

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

September 27, 2014
Tweet

Transcript

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

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

  3. None
  4. None
  5. None
  6. Радослав Станков JavaScript event-driven architecture OpenFest 2010

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

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

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

  10. None
  11. None
  12. None
  13. Недостатъци на Backbone.js

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

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

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

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

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

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

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

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

    system • Template engine • Routing • Testability
  22. None
  23. None
  24. None
  25. None
  26. None
  27. • Application lifecycle • Conventions • Plugin/module system • Template

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

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

    engine • Routing • Testability Angular
  30. None
  31. • Application lifecycle • Conventions • Plugin/module system • Template

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

    engine • Routing • Testability Angular
  33. Backbone

  34. Angular

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

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

    engine • Routing • Testability Angular
  37. Plugin/module system

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

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

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

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

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

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

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

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

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

  47. injector.get(‘Person’) Person

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

    setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
  49. app.controller('MessagesCtrl', function($scope, Message, User) { User.setName('Rado'); Message.send(User.getName() + '- Hi');

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

    setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
  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. app.controller('MessagesCtrl', function($scope, Message, User) { User.setName('Rado'); Message.send(User.getName() + '- Hi');

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

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

  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. app.controller('MessagesCtrl', function($scope, User) { User.setName('Rado'); User.say('Hi'); });

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

  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. app.config(function(UserProvider){ UserProvider.name = 'Rado'; });

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

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

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

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

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

    $window.alert(message); } }; }]);
  65. (function() { function MessageFactory($window) { return { say: function(message) {

    return $window.alert(message); } }; } ! MessageFactory.$inject = ['$window']; ! app.factory('Message', MessageFactory) })();
  66. • Application lifecycle • Conventions • Plugin/module system • Template

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

    engine! • Routing • Testability Angular
  68. Template engine

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

    ng-model="message"> </form> </div> </body> </html> 1
  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. 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. 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. app.factory('Message', function() { var messages = []; ! return {

    fetch: function() { return messages; }, post: function(text) { messages.push({text: text}); } }; }); 3
  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. <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. app.controller('MessagesCtrl', function($scope, Message) { $scope.messages = Message.fetch(); });

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

    { if ($scope.message.length) { Message.post($scope.message); $scope.message = ''; } }; }); 4
  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. <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. Demo

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

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

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

    engine • Routing! • Testability Angular
  84. Routing

  85. <div ng-view></div>

  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. • Application lifecycle • Conventions • Plugin/module system • Template

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

    engine • Routing • Testability Angular
  89. Testability

  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. var app = angular.module('Demo', []); ! app.directive('myDirective', function () {

    return { restrict: 'E', replace: true, template: 'Varna User Group Meeting {{2013 + 1}}’ }; });
  92. Angular • Application lifecycle • Conventions • Plugin/module system •

    Template engine • Routing • Testability
  93. … и още • angular-resource • angular-animation • angular-ui-router •

    angular-i18n • angular-hammer • …
  94. Проблеми на Angular

  95. Проблеми на Angular

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

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

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

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

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

    HTML • Performance проблеми • Learning curve • Добри практики
  101. И сега на къде? https://angularjs.org/

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

  103. None
  104. None
  105. @rstankov Благодаря за вниманието :)

  106. Въпроси?