Download to read offline
![MODULE • An AngularJS module defines an application. • A module is a container for the different parts of an application. • All application controllers should belong to a module. • There can be multiple module. //declare module: var myAppModule=angular.module(‘myApp’,[--here goes dependent modules--]);](https://image.slidesharecdn.com/angularjs-150718191458-lva1-app6892/75/Angularjs-16-2048.jpg)
![FILTERS • AngularJS filters format data for display for the users. • Can create custom filters. //Declare Filters: {{expression [|filter_name[:parameter_value]..]}} {{uppercase_expression | uppercase}} {{expression |filter1|filter2}}](https://image.slidesharecdn.com/angularjs-150718191458-lva1-app6892/75/Angularjs-19-2048.jpg)
Angularjs
- 1.
- 2. WHAT IS ANGULARJS? • It is not JavaScript library. • There are no functions we can call and use directly. • It is not a DOM like jQuery. But uses subset of jQuery (jqLite). • Focuses more on HTML side of webpages. • For MVC/MVVM design pattern. • Thus, AngularJS is a JavaScript MVC framework created by Google to build properly architecture and maintainable web application.
- 3. HISTORY • AngularJS version1.0 was released in 2012. • Miško Hevery, a Google employee, started to work with AngularJS in 2009. • The idea turned out very well, and the project is now officially supported by Google. • AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- 4. WHY ANGULARJS ? •Defines ways to organize web application at client side. • Extends HTML with new attributes, custom tags, expressions, templates with html. • Good for Single Page Application (SPA) . • Encourages MV/MVVM design patterns.
- 5.
- 6.
- 7.
- 8.
- 9. MODEL AND VIEW MODEL •Plain old Java(Script) Objects (POJO) is used. • No need to extend hierarchy. VIEW • Just plain HTML. • Built in directives similar to JSTL.
- 10. CONTROLLER • AngularJS controllerscontrol the data of AngularJS applications. • AngularJS controllers are regular JavaScript Objects. • Controller can have methods too. • The ng-controller directive defines the application controller. • It’s a plain old javascript function //declare Controller: <div ng-app=“myApp” ng-controller=“myCtrl”>
- 11. • The ng-appdirective tells AngularJS that the <div> element is the "owner" of an AngularJS application. • Use this directive to auto-bootstrap an application. • Only one ng-app directive can be used per html document. //Declare ng-app <html ng-app> ng-app
- 12. • AngularJS letsyou extend HTML with new attributes called Directives. • The directives can be placed in elements name, attributes, class names as well as comments. • Directives are ways to teach html new tricks. • A directive is just a function that executes when compiler encounters it in the DOM //Declare Directives: <input ng-model=‘name’> Directives
- 13. • The ng-appdirective initializes an AngularJS application. • The ng-init directive initializes application data. • The ng-model directive binds the value of HTML controls (input, select, text-area) to application data. <div ng-app=“” ng-init=“firstName='John‘ “> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div> Example
- 14. EXPRESSION • AngularJS expressionsare written inside double braces: {{ expression }}. • AngularJS expressions binds data to HTML the same way as the ng-bind directive. • AngularJS will "output" data exactly where the expression is written. • AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables. • Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
- 15. FORMS • An AngularJSform is a collection of input controls. • It provides validation services, so that the users can be notified of invalid inputs. • It provides instance feedback.
- 16. MODULE • An AngularJSmodule defines an application. • A module is a container for the different parts of an application. • All application controllers should belong to a module. • There can be multiple module. //declare module: var myAppModule=angular.module(‘myApp’,[--here goes dependent modules--]);
- 17. SCOPE • An objectthat refers to application itself (model). • An execution context for expressions like {{todo.name}}. • Scope are arranged in hierarchical structure that mimics the DOM structure of the application. • Scope can watch expressions and propagate events. //declare Scope: $Scope
- 18. DEPENDENCY INJECTION • DependencyInjection is a software design pattern that deals with how the codes gets hold of its dependency. • Testing is easy. • Its SOLID (oop principle/design pattern)
- 19. FILTERS • AngularJS filtersformat data for display for the users. • Can create custom filters. //Declare Filters: {{expression [|filter_name[:parameter_value]..]}} {{uppercase_expression | uppercase}} {{expression |filter1|filter2}}
- 20. SERVICES • Provides cleanercode. • Organizable and reusability. • Shared business logic. • Data retrieval. • One instance in app.