Introduction to Angular.Js

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