Your SlideShare is downloading. ×
AngularJs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJs

414

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. …

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
414
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
3
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×