$30 off During Our Annual Pro Sale. View Details »

Introduction to Angular.Js

Introduction to Angular.Js

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

Radoslav Stankov

September 27, 2014
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

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. Въпроси?