Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Angularjs
Similar to Angularjs (20)
Recently uploaded
Recently uploaded (20)
Angularjs
- 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 version 1.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.
- 6. KEY FEATURES
- 7. Features
- 8. DATA BINDING
- 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 controllers control 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-app directive 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 lets you 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-app directive 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 expressions are 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 AngularJS form 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 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--]);
- 17. SCOPE • An object that 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 • Dependency Injection 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 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}}
- 20. SERVICES • Provides cleaner code. • Organizable and reusability. • Shared business logic. • Data retrieval. • One instance in app.