Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View Slide

  2. Кой съм аз?
    @rstankov

    !
    !
    !
    !
    http://rstankov.com

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. Радослав Станков

    JavaScript event-driven architecture
    OpenFest 2010

    View Slide

  7. Радослав Станков

    JavaScript event-driven architecture
    OpenFest 2010

    View Slide

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

    View Slide

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

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. View Slide

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

    View Slide

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

    View Slide

  33. Backbone

    View Slide

  34. Angular

    View Slide

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

    View Slide

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

    View Slide

  37. Plugin/module system

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. injector.get(‘Person’)
    Person

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  68. Template engine

    View Slide





  69. {{message}}







    1

    View Slide






  70. {{message.text}}








    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide







  74. {{message.text}}









    View Slide







  75. {{message.text}}









    View Slide

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

    View Slide

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

    View Slide







  78. {{message.text}}









    View Slide













  79. 5

    View Slide

  80. Demo

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  84. Routing

    View Slide


  85. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  89. Testability

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  103. View Slide

  104. View Slide

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

    View Slide

  106. Въпроси?

    View Slide