AngularIS Module Demo: ‘myControler! >

yyApp = angular.module("myApp", [)s smyApp.controller("myContrller’ function scope) { ‘Sscopemessuge = "Hello Angular World!" Maile » 3 < Output : AngularJS Module Demo: Hello Angular World! In the shove example, we created application module and controller in the same HTML. file, However, we can create separate JavaSeript files for each module as shown below. ‘ ‘ <[body> (MU-New Syllabus wes academic year 21-22) (M6-104) IB rechneo Publications. SACHIN SHAH Venture nracsemarisneaborectomieen Ey studocu Downlaadad by Nogre Shibja(vut!2021007 @pvpnco8.20.n)Wb .0 (MU-Sem 6-17) {itroduation to Angulax8)...Page no. (3-8) File Name: apps var myApp = angular.module("myApp", )) File Name: myController,js ‘myApp.controler("myContrller,funetion (Sscope) { Secopesmessage ~ "Hello Angular World!"; Ys Example 2 : Here, we use application module using ng- app ditective, and conuoller using ngcontoller directive. We import the mainApp.js and studentControllerjs in the ‘main HTML page. In mainApp.s we declare an application mainApp module using angular.module function and pass aan emply array to it. This array generally contains dependent modules. In studentControllerjs, we declare a controller studentController module using mainApp.controller function, File Name: testAngularJS html Angular JS Modules ‘ ‘

AngularJS Sample Application

“div ng-app = "mainApp" ng-contoller = 'studentControlle"> ‘ ‘ ‘

Enter first name: ‘student. frstName">	Enter last name:
Name:	{student fllNameQ)})}	Subject:	Name Marks {{ subjectiname }) {{ subjectamarks }}

File Name: mainApp.is var mainApp = angular.module(’mainAp []}; File Name: studentController js mainApp.controler('studentController, funetion($seope) { Sseope.student = { firstNames "Sach (MU-New Syllabus wes academic year 21-22) (M6-104) IB rech-neoPubcations.A SACHIN SHAH Venture Downloaded by Nagre Shitja ([email protected])Wb X.0 (MU-Sem 6-17) (itroduation to Angulard8)...Page no. (3-9) TastName: "Shab, foes:500, subject:[ {name: Physics! marks:70}, {name: Chemistry’ marks:80), {name:Math’smarks:65}, with ng- where ng stands for Angular. AngularJS includes various buil-in directives. In addition to this, you ean create custom ditectives for your application. The Table 3.4.1, lists the important built-in Angular] Gixectives, {name:'English'marks:75}, Table 3.4.1 : {name:'Hindi'ymarks:67} Directive Description fullNames function) { nea ‘Auto bootstrap AngularIS application, en ng-init Initializes AngularJS variables student Object = Sscope.student Fears lolenObjoctfestNemo + "* ngmodel | Binds HTML controls value to studentObject.lastName; property on the Sscope object. , ng-controller | Attaches the controller of MVC to the hh view. » ng-bind Replaces the value of HTML contol output : with the value of specified AngularIS ae expression, AngularJS Sample Application ngepeat | Repeats HTML vemplate once per each stem inthe specified collection, ey ee ng-show Display HTML element based on the ‘ifeclost names. || Shan value ofthe specified expression, nereadonly | Makes HTML. element read-only based Name Sachin Sha ean | enthe value of th pein expresion ‘Name ng-disabled ‘Sets the disable attribute on the HTML clement if specified expression evaluates Physics to true, su Chemistry net Removes or recreates HIML clement Subject based on an expression Math * ng-click | Specifies custom behavior when an eae clement is clicked 3.4.1 ng-app 13.4 ANGULAR JS DIRECTIVES © Directives are markers on a DOM element that tell AngulatJS to attach a specified behavior to that DOM. clement or even transform the DOM element and its children, In shor, it extends the HTML © Most of the directives in AngularIS are starting The ng-app directive is a starting point of AngularJS Application. I; initializes the AngularSS. framework automatically AngularJS framework will first check for ng-app Guective in a HTML document alter the entice document is loaded and if ng-app is found, it bootstraps itself and compiles the ITTML template (MU-New Syllabus wes academic year 21-22) (M6-104) IB rechneo Publications. SACHIN SHAH Venture nracsemarisneaborectomieen Ey studocu Downlaadad by Nogre Shibja(vut!2021007 @pvpnco8.20.n) ModuleWb .0 (MU-Sem 6-17) (Introduction to AngularJS)...Page no. (3-10) Typically, ag-app directives should be placed at the root of an HTML document e.g. or tag, so that it can control the entire DOM hierarchy However, you can place it in any DOM element. The AngularlS framework will only process the DOM clements and its child clements where the ng-app directive is applied © Example : In the below example, ng-app directive is placed in the div element whose id is. "myDiv ‘Therefore, AngularJS will only compile myDiv and its child elements. It will not compile the parent or sibling clements of myDiv, ‘ < ‘
Enter your name:
Hello output 10 Enter your name: Hello iy Enter your name: [Sachin Hello Sachin ‘© In the above example, ng-bind directive binds a result of an expression "10 + 5" to the . The same ‘way, itbinds a value of a model property "name" to the . The value of "name" property will be the value entered in a textbox. 3.4.5 ng-repeat © The ng-repeat directive repeats HTML once per each item in the specified atray collection Example: ‘ in students">

width: 100%; height: 50px3, display: blocks margin: 15px 0.0 10px; }

Read-only:

Disabled:

output (click Me: O New: ‘Read-only: Tiss road-ony Disable: Msi asabied ———] Click Me: New} Read-only [This is read-only Module Disabled: [This i disabled W349 ng-click ©The “ng-lick directive” in AngulaeIS is used to apply ceustom behavior when an clement in HTML is clicked ‘This directive is normally used for butions because that is the most commonplace for adding events that respond to clicks performed by the user. It is also used to popup alerts when a button is clicked Event Registration

AngularJS ng-click Directive Example {jax/libs/angularjs/1.3.16/an < ‘count +

The Current Count is ({count))

(MU-New Syllabus wes academic year 21-22) (M6-104) IB rechneo Publications. SACHIN SHAH Venture nracsemarisneaborectomieen Ey studocu Downlaadad by Nogre Shibja(vut!2021007 @pvpnco8.20.n)Wb X.0 (MU-Sem 6-17) (introduction to AngularJS)...Page no. (3-14) output output AngularJS ng-click Directive Example [AngularJS ng-show Directive Example Sra mance _ From the above output, © We can see that the button “Increment” is displayed and the value of the count variable is initially zero, © When you click on the Inevement button, the value of the count is incremented accordingly 3.4.10 ng-show ‘The ng-Show directive in AngulatJS is used to show or hide a given specific HTML clement based on the expression provided to the ng-show attribute, In the background, the HTML clement is shown or hidden by removing or adding the .ng-hide CSS class onto the element. Itis a predefined CSS class which sets the display to none. Event Registration ‘

AngularIS ng-show Directive Example

“

"Show Angular” ng- ‘

‘ false; function trues © We are attaching the ng-click event directive to the button element. Over here we are referencing a function called “ShowHide” which is defined in our controller - DemoConteolle. © We are attaching the ng-show attribute to a div tag which contains the text Angular. This is the tag which we are going to show/hide based on the ng-show attribute In the controller, we are attaching the “IsVisible” member variable to the scope object. This attribute will be passed to the ng-show angular attribute to control the visibility of the div control We ate initially setting this to false so that when the page is first displayed the div tag will be hidden Note: When the attributes ng-show is set to true, the subsequent control which in our case is the div tag will be shown to the user. When the ng-show atuibute is set to false the control will be hidden from the user. © We are adding code to the ShowHide function which will set the IsVisible member variable to true so that the AngularJS show hide div on click tag can be shown to the user. From the output, ‘© We can initially see that the div tag which has the text "Angular IS" isVisible scope object is initially set to false which is then subsequently passed to the ng-show directive of the div tag © When we click on the is not shown and this is because the ‘Show AngularS” button, it changes the isVisible member variable to become true and hence the text “Angular” becomes visible to the 3411 nghide fein AngularIS is a function using which an element will be hidden if the expression is ‘TRUE. Ifthe Expression is FALSE, the clement will be shown, In the background, the element is shown or (MU-New Syllabus wes academic year 21-22) (M6-104) TB recto ubctons. A SACHIN SHAW Verte Downloaded by Nagre Shitja ([email protected])Wb X.0 (MU-Sem 6-17) (introduction to AngularJS)...Page no. (3-15) hidden by removing or adding the ng-hide CSS class conto the element, © On the other hand, with ng-hide, the element is hidden if the expression is true and it will be shown if it is false. < Event Registration ‘

AngularJS ng-hide Direetive Example

de Angulac" ng- elick="ShowHide"/>

Angular ‘ output AngularJS Sample Application (MU-New Syllabus wes academic year 21-22) (M6-104) TB Tect-neo ubctons A SACHIN SHAW Verte Downloaded by Nagre Shitja ([email protected])Web X.0 (MU-Sem 6-7) (introduction to AngularJS)...Page no. (3-17) Parameter Details Scope Property to set the scope of the directive. It can be set as false, true or as an isolate scope: i (@,=,.<.8) scope: falsy Directive uses parent scope, No scope created for directive cope Directive inherits parent scope protolypically as a new child scope. If there are multiple Scope: tre directives on the same element requesting a new scope, then they will share one new svope. scopes @ } ‘One way binding of a directive scope property to a DOM attribute valve, As the attribute value Ps bound in the parent, it will change in the directive scope. scope! t=) Bi-directional attribute binding that changes the atribute in the parent if the directive attribute changes and vice-versa One way binding of a ditective scope property and a DOM attribute expression. The expression 2 is evaluated in the patent. This watches the identity of the parent value so changes to an objec! scone property in the parent won't be reflected in the ditective, Changes to an object property in a directive will be reflected in the parent, since both reference the same object scope: ( & } Allows the directive to pass data to an expression tobe evaluated in the parent compile: function ‘This function is used to perform DOM transformation on the directive template before the link function runs. It accepts tElement (the directive template) and tAttr (ist of attributes declared| fon the directive). It does not have access to the scope, It may return a function that will be registered as a post-link function or it may return an object with pre and post properties with will be registered as the pre-link and post-link functions, link: function/object The link property can be configured as a function or object. It can receive the following arguments: scope (directive scope), iElement (DOM element where directive is applied). iAtrs (collection of DOM element attributes), contoller (array of contollers required by ditective) lwanscludeFa, It is mainly used to for setting up DOM listeners, watching model properties for changes, and updating the DOM. It executes after the template is cloned. It is configured| independently if there is no compile function. pre-ink function Link function that executes before any child link functions. By default, child directive link functions execute before parent directive link functions and the pre-link function enables the parent to link first, One use case is ifthe child requires data from the parent. post-link function Link function that executives after child elements are inked to parent. It is commonly used for| attaching event handlers and access ing child directives, but data required by the child directive should not be st here because the child directive will have already been linked. restrict string Defines how to call the directive from within the DOM, Possible values (Assuming our| directive name is demoDirective):E- Element name (),A- Ateibut directv (

) C- Matching class (

2*2 2/2=1 AngularlS. like expression except for the following differences w expression is JavaScript code [AngulaeIS expression cannot contain conditions, loops, exceptions or regular expressions e.g. if Bsa else, temary, for loop, while loop ete (2) AngularIS expression cannot declare functions. ieee @)_AngularJS expression cannot contain comma or sre="hitpsl/aix.googleapis.com/ajavlibslangulais/1.3.16Van void rularsmin,j"> (4) AngularJS expression cannot contain return Beas keyword <

AngularS Expression Deme: #AngularJS expression contains literals of any datatype

Example 2425 {(2+2)}
he 2-2={{2-2))
pag 202 = ({2*2})
Seana - (MU-New Syllabus wes academic year 21-22) (M6-104) TB rech-neoPubications.A SACHIN SHAH Venture Downloaded by Nagre Shitja([email protected])Wb X.0 (MU-Sem 6-17) (Introduction to AngularJS)...Page no. (3-19) “ ‘

AngulacJS Expression Demo:

{{Hello World"}}
4200}
{Ktrue}}
(0.2)

output AngularIS Expression Demo: Hello World 100 true 102 ‘© AngulardS expression can contain arithmetic operators wh ‘operands, similar to JavaSerip' {{50 + 100 }} {true + false}}
{4100 + 10.2)

output Hello World 150 1 20.2 ‘© AngularJS expression can contain variables declared via ng-init ditective, The ng-init directive is used to declare AngulaeJS. application variables of any data ope “

{{ {amount * rateOfinterest * duration)/100 }}
{myAn{i))}
{({person.firstName +" + person lastNarne}}

output ° Module 10500 200 3 Sachin Shah » ANGULARYS DATA BINI iG Data binding isa very useful and powerful feature used in software development technologies, It acts as a bridge between the view and business logic of the application, ‘© Angular/S follows Two-Way data binding model 3.7.1 One-Way Data Binding The one-way data binding is an approach where a value js taken from the data model and inserted into an HTML clement There is no way to update model from view: # Icis used in classical emplate systems. These systems bind data in only one direction, (One-Way Data Binding {One-imd merge po a= ocaiig. 37.1 : One-Way Data Binding (MU-New Syllabus wes academic year 21-22) (M6-104) IB rechneo Publications. SACHIN SHAH Venture nracsemarisneaborectomieen Ey studocu Downlaadad by Nogre Shibja(vut!2021007 @pvpnco8.20.n)Wb .0 (WU-Sem 6-17) {introduction to AngularJS)...Page no. (3-20) 3.7.2. Two-Way Data Binding © Data-binding in Angular apps is the automatic synchronization of data between the model and view ‘components © Data binding lets you teat the model as the single- source-of-ruth in your application. The view is a projection of the model at all times. If the model is changed, the view reflects the change and vice versa Two-Way Data Binding Compile view a nn W change craw || cosssmaanqmaann. | Case eye | ae | ore sae eneneer | ee > ode cag. 3.72 Two Way Bndog Example IDOCTYPE hen Shum sro="hups:ajan-googleapis.com/ajasibsfangulays/1..16/an gslarin ">

Input something inthe input x:

Name:

You wrote: ((firtName ))

output Input something in the input box: Name: You wrote! Tnput something in the input box: Name: [Ajoot ‘You wrote: Ajeet In the above example, the (( firstName }} expression is an Angular}S data binding expression, Data binding in AngulatIS binds AngulasIS expressions with AngulaelS data, = {(firstName }) is bound with ng-model="firstName’ Lets take another example where two text fields are bound together with two ng-model directives number” ng model 100000 | number = {(100000 | number?)
‘{Aamount | number)}
{amount | number:2}} {amount | number:4}} amount | number amount | number: amount | number:4 © The currency filter formats a number value as a © When no currency symbol is provided, default symbol for current locale is used, = Syntax{( expression | currency ‘raction’)} ‘currency_symbol’ ‘© In the below example, we have applied currency filter to person.salary, which is a numeric property. It can be displayed with different fractions currency symbols and ajax googleapis.comyajaxlibs/angularjs/1 3.16/an sularsmin,s"> “

‘var myApp = angular.module(myApp!, (i inyApp controller 'myControlle” fan 1 ($scope) { $scope person = { firstName: ‘James’, LastName: "Bond!, salary: 100000) ys output AngularJS eurreney Filter Demo; Default currency: $100,000.00 Custom currency identifier: Rs.100,000.00 No Fraction: Rs.100,000 Fraction 2: GBP100,000.00 3.8.3 Date Filter ‘© Formats date to string based on the specified format, © Syntax: ({ date_expression | date: format)} ‘

AngularJS Upperease/Lowercase Filter Demo:

Lowercase: {{perionfirsName +'" + person laxName | owersase}}
Uppercase: { (person intName +" + person JastName | uppercase} output AngularIS Upperease/Lowerease Filter Demo: Lower case: sachin shah Upper cases SACHIN SHAH, 385 Filer ‘+ Filter selects items from an array based on the specified criteria and retums a new array Syntax (( expression | filter = fiker_crteria }) + In the below example, searchCriteria contains a text entered in the input box, which will be used to Gter items of an array myArr using fillersearchCriteria expression. (MU-New Syllabus wes academic year 21-22) (M6-104) IB rech-neoPubcations.A SACHIN SHAH Venture Downloaded by Nagre Shitja ([email protected])Wb X.0 (MU-Sem 6-17) (introduction to AngularJS)...Page no. (3+23) “=IDOCTYPE himl> Enter Name to search:
Result: {{myArr | filtersearchCriteria}}

var myApp = angular module(‘myApp',[)s ‘myApp.controlle("myControlles" function ($scope) { ‘$SscopemyArr = [Sachin ‘Alta, Nilesh, ‘Shraddha', "Anaghal, Ram!) Dn output ‘AngularJS Filter Demo: este Name ss Rent [sahil "Shad "Am Ra AngularJS Filter Demo: Enter Name to sea [Result:["Altab"] b: [Aa 3.8.6 orderBy Filter ©The orderBy silter sorts an array based on specified expression predicate # Syntax({ expression | ordesBy : predicate_expression reverse) The above example displays alist of person names and phone numbers in a particular order specified using orderBy:SortOrder filter. SortOrder is a model property and will be set to the selected value in the dropdown, ‘© Therefore, based on the value of SortOrder, ng-repeat irective will display the data, ‘ AnguladS orderBy Filter Demo: ‘myApp” >

‘Name (ase) ‘Name (dec) ‘ Phone (ase) Module "phone"> Phone (dee} 3 ‘

person
• ({person.name}} - {{person-phone}}

var myApp = angularmodule(myApp!, [Ds ‘myApp.controller("myController" function (Sscope) { [{ name: ‘Jobe’, phone: '512-45 { name: Mary, phone: 899-383-3845) }, {names ‘Mike’, phone: ‘511-144-4821" }, { name: ‘Bill, phone: 145-788-5678), 4 name: Ran, phone: 433-444-8765, { name: ‘Steve’, phone: 218-345-5678" }] SscopeSonOnder Ys name’, (MU-New Syllabus wes academic year 21-22) (M6-104) IB rechneo Publications. SACHIN SHAH Venture nracsemarisneaborectomieen Ey studocu Downlaadad by Nogre Shibja(vut!2021007 @pvpnco8.20.n)Wb .0 (WU-Sem 6-17) (introduction to AngularJS)...Page no. (3-24) output [AngularJS orderBy Filter Demo: + Jota ite suet [AngularJS orderBy Filter Demo: s.r + Mite -5u-444-4321 4 Ram 483-40 9765 13.9 _ANGULARJS CONTROLLERS: © AngularJS application mainly zelies on contellers to ccontzol the flow of data in the application, © A controller is defined using ng-controller dixective, © A controller is a JavaScript object that contains attibutes/properties, and functions ‘© Bach controler accepts Sscope as a parameter, which refers to the application/module that the controller needs to handle

© Here, we declare a controller named studentController, using the ng-contoller directive. We define it as follows: fanction studentController($scope) { Sseope.stadent = { firstName: "Sachin", TastName: "Shah", TullName: function) { var stadentObjects sudentObject = Sscope.student; retum studentObjectsfirstName 4°" + studentObjectlasiName; y h } The studentController is defined as a JavaScript object with Sscope as an argument. ©The $scope refers to application which uses the stadentController object. ©The Sscope.student is a property of studentController object, ©The FirstName and the lastName are two properties of Sscope.student object. We pass the default values to them. © The property fullName is the function of Sscope.student object, which returns the combined ‘In the fullName function, we get the student object and then return the combined name, + As anote, we can also detine the controller object in a separate JS file and refer that fle in the HTML page. © Now we can use studentController's student property sing ng-model or using expressions as follows: Enter first name: input type = "text" ng-model = ‘student. firstName">
Enter last name:

You are entering: {{student.fullName)}} © We bound student. ‘ovo input boxes. © We bound student fullName() to HTML. Now whenever you type anything in first name and last ame input boxes, you can see the full name getting updated automatically firstName and studentlastname to The following example shows the use of controller <

‘ 3