AgularJS basics- angular directives and controllers
jobinThomas54
50 views
33 slides
May 03, 2024
Slide 1 of 33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
About This Presentation
Angular Js
Slide Content
Angular JS Open source web app framework AngularJS version 1.0 was released in 2012.Miško Hevery , a Google employee, started to work with AngularJS in 2009. AngularJS extends HTML with new attributes and it is perfect for Single Page Applications (SPAs), Easy to learn. Workshop on Advanced JavaScript & Frameworks
General features : We can create rich internet application by using Angular JS. Angular js Allow us to write the client-side code using javascript . AngularJs provides cross-browser compliant and it automatically handles JavaScript code suitable for each browser. Angularjs is used to build high-performance, large scale, and easy-to-maintain web applications. Workshop on Advanced JavaScript & Frameworks
Core features : 1. Data-binding : 2. Scope : 3. Controller : 4. Services : 5. Filters : 6. Dependency Injection : 7. Routing : 8. Templets : 9. Directives : 10. Deep linking : Workshop on Advanced JavaScript & Frameworks
Model View Controller: In Angular JS, it is very easy to develop application in a clean MVC way. You just have to split your application code into MVC components i.e. Model, View and the Controller. Workshop on Advanced JavaScript & Frameworks
AngularJS MVC Architecture Model: It is responsible for managing application data. It responds to the requests from view and to the instructions from controller to update itself. View: It is responsible for displaying all data or only a portion of data to the users. It also specifies the data in a particular format triggered by the controller's decision to present the data. Controller: It is responsible to control the relation between models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model. Workshop on Advanced JavaScript & Frameworks
AngularJS extends HTML attributes with Directives , and binds data to HTML with Expressions . AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: <script src ="https://ajax.googleapis.com/ajax/libs/ angularjs /1.6.9/angular.min.js"></script> Workshop on Advanced JavaScript & Frameworks
AngularJS Directives AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application and it defines the root element of an AngularJS, this directive will auto-bootstrap (automatically initialize) the application when a web page is loaded. Workshop on Advanced JavaScript & Frameworks
The ng- init directive defines initial values for an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea ) to application data. Provide type validation for application data (number, email, required). Provide status for application data (invalid, dirty, touched, error). Provide CSS classes for HTML elements. Bind HTML elements to HTML forms. The ng-bind directive binds application data to the HTML view. Workshop on Advanced JavaScript & Frameworks
<html> <script src ="https://ajax.googleapis.com/ajax/libs/ angularjs /1.6.9/angular.min.js"></script> <body> <div ng-app=" myApp " ng-controller=" myCtrl "> First Name: <input type="text" ng-model=" firstName ">< br > Last Name: <input type="text" ng-model=" lastName ">< br >< br >Full Name: {{ firstName + " " + lastName }} </div> <script>var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope) { $ scope.firstName = "John"; $ scope.lastName = "Doe";}); </script></body></html> Workshop on Advanced JavaScript & Frameworks
AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object , created by a standard JavaScript object constructor . ng-repeat directive, each repetition has access to the current repetition object: Workshop on Advanced JavaScript & Frameworks
AngularJS Scope Workshop on Advanced JavaScript & Frameworks The scope is the binding part between the HTML (view) and the JavaScript (controller) and it is an object with the available properties and methods. The scope is available for both the view and the controller. How to Use the Scope? When you make a controller in AngularJS, you pass the $scope object as an argument:
AngularJS Expressions Workshop on Advanced JavaScript & Frameworks Inside double braces: {{ expression }} . C an also be written inside a directive: ng-bind=" expression " . AngularJS Expressions vs. JavaScript Expressions Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables. Unlike JavaScript expressions, AngularJS expressions can be written inside HTML. AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do. AngularJS expressions support filters, while JavaScript expressions do not. Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Modules and Controllers An AngularJS module defines an application. The module is a container for the different parts of an application and it is a container for the application controllers, Controllers always belong to a module. The [] parameter in the module definition can be used to define dependent modules. Workshop on Advanced JavaScript & Frameworks
<div ng-app=" myApp ">...</div> <script> var app = angular.module (" myApp ", []); </script> Without the [] parameter, you are not creating a new module, but retrieving an existing one. Workshop on Advanced JavaScript & Frameworks
Adding a Controller: Workshop on Advanced JavaScript & Frameworks <div ng-app=" myApp " ng-controller= " myCtrl " > {{ firstName + " " + lastName }} </div> <script> var app = angular.module ( " myApp " , []); app.controller ( " myCtrl " , function($scope) { $ scope.firstName = “ sri "; $ scope.lastName = “ ranji "; }); </script>
<!DOCTYPE html><html><script src ="https://ajax.googleapis.com/ajax/libs/ angularjs /1.6.9/angular.min.js"></script> <body> <h2>program information.</h2> <div ng-app=" myapp " ng-controller="ctrl"> < br > The department is {{dept}} an dprogram is {{program}} </div> <script> var app = angular.module (' myapp ', []); app.controller ('ctrl', function ($scope) { $ scope.dept = "CSE"; $ scope.program = "AIML"; }); </script> </body> </html> Workshop on Advanced JavaScript & Frameworks
AngularJS Forms Workshop on Advanced JavaScript & Frameworks Forms in AngularJS provides data-binding and validation of input controls. The ng-model directive can provide type validation for application data (number, e-mail, required): <form ng-app="" name=" myForm "> Email: <input type="email" name=" myAddress " ng-model ="text"> <span ng-show="myForm. myAddress .$ error.email ">Not a valid e-mail address</span> < br >< br > You have entered:{{text}} </form>
Input controls are the HTML input elements: input elements select elements button elements textarea elements Data-Binding Input controls provides data-binding by using the ng-model directive. <form> First Name: <input type="text" ng-model =" firstname "> </form> <h1>You entered: {{ firstname }}</h1> Workshop on Advanced JavaScript & Frameworks
Workshop on Advanced JavaScript & Frameworks Checkbox A checkbox has the value true or false . Apply the ng-model directive to a checkbox, and use its value in your application. <h2> Checkbox Buttons: </h2>< br > Select Programming languages: <input type="checkbox" ng-model ="myVar1">Python <input type="checkbox" ng-model ="myVar2">Java <input type="checkbox" ng-model ="myVar3"> HTML,CSS.Javascript <h2 ng-show="myVar1">I have selected 1st option </h2> <h2 ng-show="myVar2">I have selected 2nd option </h2> <h2 ng-show="myVar3">I have selected 3rd option </h2>
Radio buttons Bind radio buttons to your application with the ng-model directive. Radio buttons with the same ng-model can have different values, but only the selected one will be used. <h2> Radio Buttons </h2>< br > Select Highest Qualification: <input type="radio" ng-model =" myVar " value="BE">B.E <input type="radio" ng-model =" myVar " value="MTech"> M.Tech <input type="radio" ng-model =" myVar " value=" Phd "> Phd Workshop on Advanced JavaScript & Frameworks
Workshop on Advanced JavaScript & Frameworks Selectbox Bind select boxes to your application with the ng-model directive. The property defined in the ng-model attribute will have the value of the selected option in the selectbox . <h2> Selectbox :</h2> Select a Country: <select ng-model =" myVar " > <option value=""> <option value="in">India <option value="au">Australia <option value="us">United States </select>
ng-repeat <div ng-app ="" ng- init =" names=[‘apple’, ’Orange’, ‘grapes']"> <p>Looping with ng-repeat:</p> < ul > <li ng-repeat ="x in names"> {{ x }} </li> </ ul > </div> Workshop on Advanced JavaScript & Frameworks Looping with ng-repeat: apple Orange grapes
<div ng-app="" ng- init ="names=[ { name:'Jani',country:'Norway '}, { name:'Hege',country:'Sweden '}, { name:'Kai',country:'Denmark '}]"> <p>Looping with objects:</p> < ul > <li ng-repeat ="x in names"> {{ x.name + ', ' + x.country }}</li> </ ul > </div> Workshop on Advanced JavaScript & Frameworks Looping with objects: Jani, Norway Hege, Sweden Kai, Denmark
AngularJS Services Workshop on Advanced JavaScript & Frameworks In AngularJS, a service is a function, or object, that is available for, and limited to. AngularJS has about 30 built-in services. The $location service Example: The $location service has methods which return information about the location of the current web page: var app = angular.module (' myApp ', []); app.controller (' customersCtrl ', function($scope, $location) { $ scope.myUrl = $ location.absUrl (); });
The $timeout Service var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope, $timeout) { $ scope.myHeader = "Hello World!"; $timeout(function () { $ scope.myHeader = "How are you today?"; }, 2000); }); The $http Service The service makes a request to the server, and lets your application handle the response. Workshop on Advanced JavaScript & Frameworks
<!DOCTYPE html><html><script src ="https://ajax.googleapis.com/ajax/libs/ angularjs /1.6.9/angular.min.js"></script> <body><div ng-app=" myApp " ng-controller=" myCtrl "> <p> Data : {{content}}</p> <p>Status : {{ statuscode }}</p></div> <p>The response object has many properties. This example demonstrate the value of the data, status, and statusText properties.</p> <script>var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope, $http) { $ http.get ("welcome.html") .then(function(response) { $ scope.content = response.data ; $ scope.statuscode = response.status ; }); });</script> </body> </html Workshop on Advanced JavaScript & Frameworks
AngularJS Routing Workshop on Advanced JavaScript & Frameworks The ngRoute module helps your application to become a Single Page Application. If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application ), The ngRoute module routes your application to different pages without reloading the entire application.
AngularJS Filters Filters can be added in AngularJS to format data. currency Format a number to a currency format. date Format a date to a specified format. filter Select a subset of items from an array. json Format an object to a JSON string. limitTo Limits an array/string, into a specified number of elements/characters. lowercase Format a string to lower case. number Format a number to a string. orderBy Orders an array by an expression. uppercase Format a string to upper case. Workshop on Advanced JavaScript & Frameworks
Example: <div ng-app=" myApp " ng-controller=" personCtrl "> <p>The name is {{ firstName | lowercase }}</p> </div> <script> angular.module (' myApp ', []).controller(' personCtrl ', function($scope) { $ scope.firstName = "John", $ scope.lastName = "Doe" }); </script> Workshop on Advanced JavaScript & Frameworks
<div ng-app=" myApp " ng-controller=" costCtrl "> <h1>Price: {{ price | currency }}</ h1> </div> <script> var app = angular.module (' myApp ', []); app.controller (' costCtrl ', function($scope) { $ scope.price = 58; }); </script> Workshop on Advanced JavaScript & Frameworks Price: $58.0
<div ng-app=" myApp " ng-controller=" namesCtrl "> <p>Looping with objects:</p> < ul > <li ng-repeat="x in names | orderBy :'country'"> {{ x.name + ', ' + x.country }} </li> </ ul > </div> <script> angular.module (' myApp ', []).controller(' namesCtrl ', function($scope) { $ scope.names = [ { name:'Jani',country:'Norway '}, { name:'Carl',country:'Sweden '}, {name:' Margareth ', country:'England '}, { name:'Hege',country:'Norway '}, { name:'Joe',country:'Denmark '}, { name:'Gustav',country:'Sweden '}, { name:'Birgit',country:'Denmark '}, { name:'Mary',country:'England '}, { name:'Kai',country:'Norway '} ]; }); </script> Workshop on Advanced JavaScript & Frameworks Looping with objects: Joe, Denmark Birgit, Denmark Margareth , England Mary, England Jani, Norway Hege, Norway Kai, Norway Carl, Sweden Gustav, Sweden
Example: Programs on Directives Expression Services Routing Forms Filters Modules, Controllers, & Scope https://replit.com/@FakhruddinBasha/Angular#index.html Workshop on Advanced JavaScript & Frameworks
Workshop on Advanced JavaScript & Frameworks
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 50
- Slides 33
- Age 577 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
45 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views