AngularJs

501
-1

Published on

These presentation file was meant to be used in a local weekly-based meetings but hadn't have the chance of being presented.

Unfortunately this presentation file does not include all aspects of AngularJs which were supposed to be updated but it's never happened.

Anyways, hope it may come to some use.

Published in: Technology, Business
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
501
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

AngularJs

  1. 1. Angular
  2. 2. Angular Expressions
  3. 3. $interopolateProvieder
  4. 4. Undefined / Null
  5. 5. $eval()
  6. 6. 2-Way Data Binding
  7. 7. <div>{{ username }}</div>
  8. 8. angular.module('opentalks') .controller('UserController', ['$scope', function($scope){ $scope.username = "Someone :D"; }]);
  9. 9. <input type="text" ng-model="username" />
  10. 10. angular.module('opentalks') .controller('UserController', ['$scope', function($scope){ $scope.$watch('username', function(newVal, oldVal){ ... console.log("Username has been changed!"); }; }]);
  11. 11. Filters
  12. 12. Pipes In Linux |
  13. 13. ls | “ ”grep something
  14. 14. <div>{{ username }}</div>
  15. 15. <div>{{ username | uppercase }}</div>
  16. 16. Custom Filter
  17. 17. angular.module('opentalks') .filter(...);
  18. 18. angular.module('opentalks') .filter('opentalks', ...);
  19. 19. angular.module('opentalks') .filter('opentalks', function(){ …. });
  20. 20. angular.module('opentalks') .filter('opentalks', function(){ return function(){ …. }; });
  21. 21. angular.module('opentalks') .filter('opentalks', function(){ return function(input){ }; });
  22. 22. angular.module('opentalks') .filter('opentalks', function(){ return function(input){ return 'output'; }; });
  23. 23. angular.module('opentalks') .filter('opentalks', function(){ return function(input, arg1, arg2, ...){ return 'output'; }; });
  24. 24. angular.module('opentalks') .filter('opentalks', function(Dependencies){ return function(input, arg1, arg2, ...){ return 'output'; }; });
  25. 25. <div>{{ username | opentalks }}</div>
  26. 26. <div>{{ username | opentalks:'arg1' }}</div>
  27. 27. <div>{{ username | opentalks:'arg1':'arg2' }}</div>
  28. 28. Filters in { , , ...Controllers Services }
  29. 29. Angular.modeule('opentalks') .controller('OpentalksController', function(opentalksopentalksFilterFilter) { }
  30. 30. Angular.modeule('opentalks') .controller('OpentalksController', function(opentalksFilter) { var output = opentalksFilteropentalksFilter(input, arg1, arg2)(input, arg1, arg2);; }
  31. 31. Services
  32. 32. Reusability
  33. 33. Singleton
  34. 34. . ( )angular module 'opentalks' .factory(...);
  35. 35. . ( )angular module 'opentalks' . (factory 'OpentalksPeople', ...);
  36. 36. . ( )angular module 'opentalks' . ( ,factory 'OpentalksPeople' (){function ... });
  37. 37. . ( )angular module 'opentalks' . ( , (factory 'OpentalksPeople' function Dependencies) { {return .... }; });
  38. 38. . ( )angular module 'opentalks' . ( , (){factory 'OpentalksPeople' function {return .... }; });
  39. 39. . ( )angular module 'opentalks' . ( , (){factory 'OpentalksPeople' function ()return new Aservice ; });
  40. 40. . ( )angular module 'opentalks' . ( , (){factory 'OpentalksPeople' function return 'Or even a string'; });
  41. 41. . ( )angular module 'opentalks' . ( , (){factory 'OpentalksPeople' function return 123465798; });
  42. 42. Revealing Module Pattern
  43. 43. . ( )angular module 'opentalks' . ( , ( )factory 'OpentalksPeople' function Dependencies { ... = (){...}aPublicfunction function = (){...}aPrivateFunction function ... {return :aMethod somePublicfunction }; });
  44. 44. . ( )angular module 'opentalks' .service(...);
  45. 45. . ( )angular module 'opentalks' . (service 'OpentalksPeople', ...);
  46. 46. . ( )angular module 'opentalks' . ( ,service 'OpentalksPeople' (){function ... });
  47. 47. . ( )angular module 'opentalks' . ( ,service 'OpentalksPeople' (){function ... });
  48. 48. . ( )angular module 'opentalks' . ( , (){service 'OpentalksPeople' function . = (){}this somemethod function ; … });
  49. 49. . ( )angular module 'opentalks' . ( , (service 'OpentalksPeople' function Dependencies) { . = (){}this somemethod function ; ... });
  50. 50. Configurable?
  51. 51. Providers
  52. 52. Accessible in Config Phase
  53. 53. As a Service
  54. 54. . ( )angular module 'opentalks' .provider(...);
  55. 55. . ( )angular module 'opentalks' . (provider 'TabrizOpentalks', ...);
  56. 56. . ( )angular module 'opentalks' . ( ,provider 'OpentalksWebsite' (){function .... . = (){...}this setCity function ; });
  57. 57. . ( )angular module 'opentalks' . ( , (){provider 'OpentalksWebsite' function .... . = (){...}this $get function });
  58. 58. . ( )angular module 'opentalks' . ( , (){provider 'OpentalksWebsite' function .... . = (this $get function ServiceDependencies){ ... } });
  59. 59. Using In Config Phase
  60. 60. . ( )angular module 'opentalks' . ( (config function OpentalksWebsiteProviderProvider){ . ( )OpentalksWebsiteProvider setCity 'Tabriz' ; });
  61. 61. Using As A Service
  62. 62. . ( )angular module 'opentalks' . ( ,controller 'CityController' (function OpentalksWebsite){ ... });
  63. 63. Directives
  64. 64. Teaching HTML New Tricks
  65. 65. DOM Manipulation
  66. 66. jqLite
  67. 67. -Angular UI
  68. 68. <div -ng repeat="person in opentalks"> {{ }}person /< div>
  69. 69. <pagination ... />< pagination>
  70. 70. <button -ng click= ("someFunction ' :D:D ) /' ">< button>
  71. 71. HTML5 Compliance
  72. 72. data-{attribute-name}
  73. 73. x-{attribute-name}
  74. 74. Imperative .vs Declarative
  75. 75. =<div id "username /">< div> ... . (document getElementById 'username ). =' innerHTML , , !'My username not yours goes here ';
  76. 76. {{<div> username }} /< div>
  77. 77. =”<div id pagination” />< div> …. = . (var pagination document getElementById 'pagination )' ; ...
  78. 78. <pagination currentPage=”139”></pagination>
  79. 79. Dependency Injection
  80. 80. Form Validation
  81. 81. <form name="opentalks"> ... /< form>
  82. 82. .opentalks $valid
  83. 83. .opentalks $invalid
  84. 84. .opentalks $pristine
  85. 85. .opentalks $dirty
  86. 86. <form name="opentalks"> <input name=” ”username ...required /> /< form>
  87. 87. .opentalks username.$pristine
  88. 88. . .opentalks username .{...}$error
  89. 89. =” ”<input name username minlength=”5” />
  90. 90. =” ”<input name username pattern=”A Pattern :D” />
  91. 91. Minification
  92. 92. ngmin
  93. 93. . ( , (controller 'SomeCtrl' function $scope){ ... });
  94. 94. . ( ,controller 'SomeCtrl' ['$scope', (function $scope){ ... }]);
  95. 95. -Angular seed
  96. 96. ...Debuging
  97. 97. Unminified Version
  98. 98. AngularJs Batarang
  99. 99. SEO
  100. 100. Search Engine Crawlers
  101. 101. .prerender io
  102. 102. .getseojs com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×