Angular js 1.3 presentation for fed nov 2014
Seu SlideShare está sendo baixado.
×
Confira estes a seguir
Mais Conteúdo rRelacionado
Semelhante a AIT SEMINAR.pptx (20)
Mais de bhavyag24 (6)
Mais recentes (20)
AIT SEMINAR.pptx
- 1. An Autonomous college of University of Mysuru, Re-Accredited by NAAC with ‘A’ Grade Recognised by UGC as college with potential for Excellence Ooty Road, Mysuru=570025, Karnataka, India SEMINAR TOPICS: ANGULAR- DIRECTIVES EXPRESSION FILTERS TEAM ASSOCIATES • HARSHITHA K L JPC21052 • SUPRIYA JPC21057 • BHAVYA G JPC21007 • POOJA B N JPC21053
- 2. 1. DIRECTIVES Directives are markers in the Document Object Model(DOM). Directives can be used with any of controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present which is predefined but if a developer wants he can create new directives (custom-directive). The following table lists the important built-in AngularJS directives. Directives Description ng-app Start of AngularJS application. ng-init Used to initialise a variable ng-model ng-model is used to bind to the HTML controls ng-controller Attaches a controller to the view ng-bind Binds the value with HTML element ng-repeat Repeats HTML template once per each item in the specified collection. ng-show Shows or hides the associated HTML element ng-readonly Makes HTML element read-only ng-disabled Use to disable or enable a button dynamically ng-if Removes or recreates HTML element ng-click Custom step on click
- 3. a. ng-app The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS Application. b. ng-init: The ng-init directive is used to initialize an AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. c. ng-model: ng-model is a directive which binds input, select and text area, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during validations in a form.
- 4. d. ng-controller: The ng-controller Directive in AngularJS is used to add controller to the application. It can be used to add methods, functions and variables that can be called on some event like click, etc. to perform certain action. e. ng-bind: The ng-bind directive in AngularJS is used to bind/replace the text content of any particular HTML element with the value that is entered in the given expression. The value of specified HTML content updates whenever the value of the expression changes in ng-bind directive.
- 5. f. ng-click: The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can popup alert when button is clicked. g. ng-show: The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. j. ng-if: The ng-if Directive in AngularJS is used to remove or recreate a portion of HTML element based on an expression. The ng-if is different from ng-hide because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it is false then the element is removed and if it is true then the element is added to the DOM.
- 6. h. ng-readonly: The ng-readonly Directive in AngularJS is used to specify the readonly attribute of an HTML element. The HTML element will be readonly only if the expression inside ng- readonly directive returns true. i. ng-disabled: The ng-disabled Directive in AngularJS is used to enable or disable HTML elements. If the expression inside the ng-disabled attribute returns true then the form field will be disabled or vice versa. It is usually applied on form field (input, select, button, etc.).
- 7. <!DOCTYPE html> <html> <head> <title>ng-controller Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> </head> <body ng-app="app" style="text-align:center"> <h1 style="color:green">JSS COLLEGE</h1> <h2>ng-controller Directive</h2><br> <div ng-controller=“JSS"> Name: <input class="form-control" type="text" ng-model="name"> <br><br> You entered: <b><span>{{name}}</span></b> </div> <script> var app = angular.module('app', []); app.controller(‘JSS', function ($scope) { $scope.name = “JSS COLLEGE"; }); </script> </body> </html> EXAMPLE PROGRAM Output: JSS COLLEGE ng-controller Directive Name: You entered: JSS COLLEGE JSS COLLEGE
- 8. 2. EXPRESSION Angular JS expression are much like JavaScript Expressions: They can contain literals, operators and variables. Example: {(5+5)} or {{firstName+” “+lastName}} Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is written. The expressions in AngularJS are written in double braces: {{ expression }}. They behave similar to ng-bind directives: ng-bind=”expression”. Syntax: {{ expression }} AngularJS expressions can be written inside double braces: {{ expression }}. AngularJS expressions can also be written inside a directive: ng-bind="expression". AngularJS will resolve the expression, and return the result exactly where the expression is written.
- 9. Example 1 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/li bs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html> OUTPUT: My first expression: 10
- 10. Example 2 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs /1.6.9/angular.min.js"></script> <body> <div > <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html> OUTPUT: My first expression: {{ 5 + 5 }}
- 11. 3. FILTERS • AngularJS filters are used to process data and format values to present to the user. • They are applied on expressions in our HTML, or directly on data in our controllers and services. • Filters can be applied to expressions in view templates using the following syntax: {{expression | filter}} Example: the markup {{12 | currency}} {{expression | filter1 | filter2 | ..}} {{expression | filter:argument1:argument2..}} • Filters are only executed when their inputs have changed. • AngularJS has some built-in filters to work with dates, numbers, strings and arrays
- 12. AngularJS Filters: AngularJS provides filters to transform data of different data types. The following table shows the significant filters: • currency: It is used to convert a number into a currency format. • date: It is used to convert a date into a specified format. • filter: It is used to filter the array and object elements and return the filtered items. • json: To convert a JavaScript object into JSON. • limitTo: It is used to return an array or a string that contains a specified number of elements. • lowercase: It is used to convert a string into lowercase letters. • uppercase: It is used to convert a string into uppercase letters. • number: It is used to convert a number into a string or text. • orderBy: It sorts an array based on specified predicate expressions.
- 13. EXAMPLE PROGRAM: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1. 6.9/angular.min.js"> </script> </head> <body> <h1 style="color: green"> JSS COLLEGE </h1> <h3>AngularJS lowercase Filter</h3> <div ng-app="app1" ng-controller="lowCtrl"> <strong>Input:</strong> <input type="text" ng-model="string" /> <br><br> <strong>Output:</strong> {{string|lowercase}} </div> <script> var app = angular.module("app1", []); app.controller("lowCtrl", function($scope) { $scope.string = ""; }); </script> </body> </html> OUTPUT: JSS COLLEGE Angular JS Lowercase Input: Output: jss college JSS COLLEGE
- 14. THANK YOU
