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. 3.
  2. 4.
  3. 5.
  4. 10.
  5. 11.
  6. 12.
  7. 22.
  8. 23.
  9. 24.
  10. 25.
  11. 26.
  12. 27.

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

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

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

    engine • Routing • Testability Недостатъци на Backbone.js Angular
  14. 30.
  15. 33.
  16. 34.
  17. 48.

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

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

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

    setName: function(newName) { name = newName; }, getName: function() { return name; } }; });
  19. 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); } }; });
  20. 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); }; });
  21. 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); } }; } });
  22. 65.

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

    return $window.alert(message); } }; } ! MessageFactory.$inject = ['$window']; ! app.factory('Message', MessageFactory) })();
  23. 69.
  24. 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>
  25. 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
  26. 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 = ''; } }; });
  27. 73.

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

    fetch: function() { return messages; }, post: function(text) { messages.push({text: text}); } }; }); 3
  28. 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>
  29. 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>
  30. 77.

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

    { if ($scope.message.length) { Message.post($scope.message); $scope.message = ''; } }; }); 4
  31. 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>
  32. 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
  33. 80.
  34. 84.
  35. 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; } } }); });
  36. 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'); })); });
  37. 91.

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

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

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

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

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

    HTML • Performance проблеми • Learning curve • Добри практики
  40. 103.
  41. 104.