Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angular workshop
Similar to Angular workshop (20)
Recently uploaded
Recently uploaded (20)
Angular workshop
- 2. What is ANGULARJS? AngularJS is a JavaScript framework created by Google to build properly architectured and maintainable web applications.
- 3. What is ANGULARJS? <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="myCtrl"> <h2>{{message}}</h2> </div> <script> angular.module("app", []) .controller("myCtrl", function($scope) { $scope.message = "Hello World" }); </script> </body>
- 4. Key Features of ANGULARJS • Template and Expressions • Model • Data Binding • Controller and $scope • Filters • Services • Directives
- 5. Template and Expressions Template are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }} <body> 1+2={{1+2}} </body>
- 6. Model Binding the view into the model, which other directives such as input, textarea or select require. Setting related CSS classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng- touched, ng-untouched, ng-empty, ng-not-empty) including animations.
- 7. Data Binding
- 9. Filters
- 10. Using Filters
- 11. Built-in Filters • uppercase • lowercase • number • currency • date • json • orderBy • limitTo • filter
- 12. Services Services are JavaScript functions and are responsible to do a specific tasks only. Services Lazily instantiated Singletons
- 13. Built-in Services • $http • $resource • $anchorScroll • $cacheFactory • $compile • $parse • $locale • $timeout • $exceptionHandler • $filter • $cookieStore • $interpolate • $log • $rootScope • $ window • $ document • $ rootElement • $ route • $ routeParams • $ location • $ controller
- 14. Directive The directives can be placed in element names, attributes, class names, as well as comments. Directives are a way to teach HTML new tricks. A directive is just a function which executes when the compiler encounters it in the DOM.
- 15. Event Directives • ngClick • ngDblClick • ngMousedown • ngMouseenter • ngMouseleave • ngMousemove • ngMouseover • ngMouseup • ngChange
- 16. Other Directive • ngApp • ngBind • ngBindTemplate • ngBindHtml • ngBindHtmlUnsafe • ngHide • ngShow ngCloak ngStyle ngClass ngClassEven ngClassOdd ngDisabled ngChecked ngMultiple ngReadonly ngSelected ngForm ngSubmit ngHref ngSrc
- 17. Example
- 18. Resources Documentation • AngularJS Developer Guide • AngularJS API • AngularJS Tutorial
Editor's Notes
- Lazily instantiated – Angular only instantiates a service when an application component depends on it. Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.