NextGen4IT: 2017

Angular JS

· Angular Js is client side scripting, JavaScript framework. It is implemented by MISKO HERERY and Adam Abrons in 2009.

· It is maintained by Google Cooperation.

· Angular Js We can use to develop dynamic webs. It is simplified code of JavaScript providing structure programming to create webs.

· Angular Js support MVC Pattern to implement Applications. It reduce complexity of application development and increase reusability.

· Using design patterns we can separate business login from presentation layer.

· MVC Stands for Model, View, and Controller.

· Angular Js Support Dynamic databinding means, if we update a variable output also will update by itself.

· Angular Js support two way data binding concept .According to this concept if we update variable (data) view will update (Output) and if we update view (output) automatically variable will update.

· Angular Js Support Routing Concept according to this concept we can load the output of another web in current without reloading.

· It will increase performance of application.

· We can also call this Concept as Single Application (SPA).

· Angular Js Support Different types of image slides and advanced web controllers like Date picker or calendar picker or color picker, etc...

· Angular Js is a cross browser.

· Angular Js is very easy to perform unit testing because of MVC structure.

· Angular Js is providing no of services to execute functionality .Ex: $Http, $window, etc.

· Angular Js is very flexible to work with Ajax concepts.

· Angular Js is flexible to develop responsive webs.

· Angular Js-2 is fully compatible with mobile functionality. It is based on mobile architecture.

· Angular Js is very flexible to work with cookies.

HTML Tags:

· Html tags are mainly divided into two types.

1) Container.

2) Non Container.

Container:

Container can hold other elements if you want to group multiple elements one entity we can use containers,

Ex: paragraph, tables, span, body.

Container is divided into two types

1) Inline Elements.

2) Block Elements.

Inline:

It doesn’t have new line before and after.

Ex: span, Anchor, etc…

Block:

It can contain new lines after and before.

Ex: div, paragraph, etc…

Non-Container

Non-container cannot hold any other element used to receive some day or instructions from user.

Ex: Text Area, Textbox, etc...

Introduction of JavaScript

· JavaScript is client side script used to apply dynamic functionalities on html controls we can also validate html controls.

· Angular Js is implemented using JavaScript, Both script declaration syntax is similar.

· Using script tag we can declare JavaScript in web.

· Angular js-2 &Angular Js -4 working based on TYPESCRIPT

· Basic Program to understand JavaScript. <! DOCTYPE html>

<Html>

<Head>

Alert (“HELLO”)

</script>

</head>

<Body>

Alert (“From Body”)

</script>

</body>

</html>

We can also declare JavaScript in HTML s we can include Script externally.

External JavaScript declaration is good for Reusability.

.Js File

Alert (“scott”)

Alert (“Tiger’)

.Html File:

<Html>

<Head>

</script>

</head>

<Body>

<h1> Hello</h1>

</body>

</html>

Angular Js-1:

· Angular Js is providing number of directives (Properties) modules, services, etc…

· To use this functionality we need to include Angular library in the Html .

· Using script tag we can include angular Js Library in html.

· Lets see how we include angular Js in script tag.

</Script>

Directive

· Directive is nothing but an attribute (or) property.

· Angular Js is providing number of directives to use with Html tags.

· Every Directive is having prefix with “ng”.

· Ng stands for Angular.

· Directive is combination of name and values.

· Ex: ng-init, ng-repeat, ng-show, etc…

1). Ng-App:

· This is starting point of Angular Js application without Declaration of ng-app.

· We can use angular Js functionality in html s.

· We can declare this attribute within body tag or any other html tag.

Ex:

// code

</body>

<body>

</p>

<body>

2). Ng-init:

· Ng-init using this directive we can initialize variables in Angular Js Application.

3). Ng-Bind:

· To bind a variable with in the html element.

· It is one way binding.

Example Program:

<html>

<head>

</Script>

</head>

</body>

</html>

4). Ng-Model:

· It is two way data binding directive

· When we update in view automatically data also gets updated.

Ex:

<html>

<head>

</Script>

</head>

</body>

</html>

Expression:

· Using Expression we can bind variable in Html DOM.

· Expression is enclosed with double curly braces ({{}}).

· It is one way databinding.

· We can use this expressions without any Html Tags.

· We can use Html Element Properties.

<html>

<head>

</Script>

</head>

<body ng-app=”” ng-init=”x=200;y=’Scott’”> {{x}}{{y}}

</body>

</html>

Note: At the time of calling Expression no need to use any angular Js directive.

Array:

· Array is the collection of elements, We can store any type of values in array.

· Angular Js is loosely typed coupled.

· Array is collection of heterogeneous elements.

· We can store any type of values in arrays.

· Difference between normal variable &Array is normal variable can store single value, array can store collection of values.

· Every Element contain index start with [0] and ends with [total number of elements-1]

<html>

<head>

</Script>

</head>

</body>

</html>

Ng-Repeat:

· Using this directive we can run a loop through the element of the array

<html>

<head>

</Script>

</head>

</li>

</body>

</html>

Drop Down List:

<html>

<head>

</Script>

</head>

</option>

</select>

</li>

</body>

</html>

Ng-Repeat in Image Property:

<html>

<head>

</Script>

</head>

</body>

</html>

Note: ng-repeat is working based on values if there is any duplicate values available in array ng-repeat functionality will stop.

If we want to get duplicate elements we should track element by index instead of values.

Syntax:

Ng-show:

· To display or to hide elements Syntax

· Ng-show =”true”---^à Display

· Ng-show =”False”--^àHide

Ng-Hide:

· To display or to hide elements Syntax

· Ng-hide =”true”---^à Hide

· Ng- hide =”False”--à Display

Events:

· Number of event attributes are available to execute some statements based on actions (Events) what we are performing on that control.

· Available Event Attributes are

1. Ng-click

2. ng-mouseover

3. Ng-mouseout

4. Ng-keyup

5. Ng-keydown…………….etc.,,,

<html>

<head>

</Script>

</head>

<img src={{x}} width=100 ng-mouseover=”x=’img2.jpeg’”ng-click =’x=”img3.jpeg”’ ng-mouseout=”x=’img1.jpeg’’> {{x}}

</body>

</html>

RadioButton:

<input type=”radio” name=”gn” ng-click=”x=true” checked> Registration <input type=”radio” name=”gn” ng-click=”x=true” checked> Login <div ng-show=”x”>

<h2> Registration</h2>

Username:<input>

<br>

Password:<input>

<br>

Email:<input>

<br>

</div>

<h2> Login</h2>

Username:<input>

<br>

Password:<input>

<br>

</div>

</body>

Module:

· In angular Js module is collection of controllers, services, filters etc...

· Number of preimplemented (predefined) Modules are available.

· We can also create user defined module.

Module

Controller

Services

Filters

Using angular.module function. We can create

Syntax:

Angular.Module (modulename,[dependency module])

Ex:app=angular.module(“MyApp”,[‘ng-cookies’])

Controller:

· Controller is a collection of data and function we can create number of controllers in a module.

· Using controller function we can create controllers in module

Syntax:

Module .ref.controller(controller Name,call back function)

Ex:

app.controller(“c1”,function(){})

We can call module from html document using ng-app directive.

Syntax:

Ng-app=”module name”

To call controller ng controller is directive

Syntax:

Ng-controller =”name of the controller”

Ex:

</Script>

App=angular.model(“myapp”,[])

App.controller(“ct1”,function(){

Alert(“Controller is created”)

})

</script>

Program with Multiple controllers:

</Script>

App=angular.model(“myapp”,[])

App.controller(“ct1”,function(){

Alert(“From ct1”)

})

App.controller(“ct2”,function(){

Alert(“From ct2”)

})

</script>

</p>

</body>

$Scope:

· $Scope is predefined service to provider gobal accessibitlity to the variables and functions of the controller by default controller members we cannot access from html elements using $scope service we can access.

· Angular js providing number of services with functionality, we need to initialize these services in controller callback function signature.

</Script>

angular.model(“myapp”,[]).controller(“ct1”,function($Scope){

$scope.sno=100

$scope.fun1=function(x)

{

Alert(x)

}

})

</script>

<body ng-app=”myapp” ng-controller=”ct1”> <button ng-click=”fun1(10)”> Click</button>

Program buy writing function outside:

</Script>

angular.model(“myapp”,[]).controller(“ct1”,fun1)

function fun1($Scope)

{

$scope.sno=100

$scope.abc=function(x)

{

Alert(x)

Alert(“From Fun1”)

}

</script>

<body ng-app=”myapp” ng-controller=”ct1”> {{sno}}

Program to create Two text boxes with Addistion and substraction buttons:

</Script>

angular.model(“myapp”,[]).controller(“ct1”,cbkfun)

function cbkfun ($Scope)

{

$scope.t1;

$scope.t2;

$scope.res;

$scope.funadd=function(){

$scope.res=parseInt($scope.t1)+ parseInt($scope.t2)

}

$scope.funsub=function(){

$scope.res=parseInt($scope.t1)- parseInt($scope.t2)

}

</script>

<body >

NO1<input type=”text” ng-module=”t1”/>,<br>

NO2<input type=”text” ng-module=”t2”/>,<br>

Result<input type=”text” value=”{{res}}/>

</body>

Object:

· Object is collection of properties.

· Property is combination of name and value.

· Object properties we should enclose with “{}”

<h1>{{obj.uname}}</h1>

</body>

<style>

Th{

Color:Silver;

Background-color:black;

}

Tr:nth-child(even){

Background-color:lightBlue;

}

Tr:nth-child(odd){

Background-color:lightgreen;

}

</Style>

<th> UserName</th>

<td>{{x.uname}}>/td>

</tr>

</table>

</body>

Ng-if:

· using this directive we can check the conditions.

· We can also display (or) hide html elements using “ng-if”.

</body>

Program by using condition in ng-if

x is Big

<div>

Y is Big

<div>

</body>

Ng-switch:

· Using this attribute we can check a variable with no of cases and displaying the matching case value.

Ng-Switch-when:

· to check the values with switch value.

Ng-switch-default:

· to display default content, if no match is found.

Example program for switch:

<option> Apple</option>

<option> mango</option>

</select>

<h2> Apple</h2>

Price : 100/- Kg

</div>

<h2> mango</h2>

Price : 200/- Kg

</div>

<h1> Please Select Valid option</h1>

</div>

</body>

$Route Scope:

· Using this service we can access members of one controller to another controller.

· We need to do initialization for this service then we can access it.

· Using this service we can provide global accessibility to data of the controller.

· Controller data can be access from any location using $RouteScope .

</Script>

App=angular.model(“myapp”,[])

App.controller(“ct1”,function($Scope){

$Scope.x=100;

})

App.controller(“ct2”,function($Scope){

$RootScope.y=100;

})

<body ng-app=”myapp” ng-controller=”ct1”> {{x}}{{y}}

{{y}{{x}}

</p>

</body>

Ng-class:

· Using this attribute we can call class selector into html element.

</Script>

<style>

.abc{

Color:red;

Text-decoration:underline;

Font-size:20px;

Font-family:”arial”;

}

.def{

Color:green;

Text-decoration:none;

Font-size:25px;

}

</style>

<div ng-class=”x” ng-mouseover=”x=’def’” ng-mouseout=”x=’abc’”> Welcome to Angular Js…..

</div>

</body>

Ng-include:

· To include a file in current Html program.( we have to Write one HTML program and we have to provide reference of the location where new html file is available.

Home.html

</Script>

</div>

Hello …welcome home!!!!!!!!!!

</body>

ContactUs.html

</Script>

</div>

Hello …welcome To Contact Us!!!!!!!!!!

</body>

Aboutus.html

</Script>

</div>

Hello …welcome To AboutUs!!!!!!!!!!

</body>

P1.html.

<a href=”Contactus.html”> Contact US</a> <a href=”Aboutus.html”> AboutUs</a>

$Event:

$Event is an object providing properties about current action or current event.

Event. Type:

Using this property we can get the type of event what is executed.

Program:

</Script>

function funcon($Scope)

{

$scope.fun1=function(e)

{

Alert(e.type)

}

App=angular.model(“myapp”,[]);

app.controller(“ct1”,funcon)

</script>

<body ng-app=”myapp” ng-controller=”ct1” ng-click=”fun1($event)” ng-

mouseover=”fun1($event)”>

<p> Welcome</p>

</body>

$Event.clientX:

Using this property we can get ‘x’ position of mouse cursor.

$Event.clientY:

Using this property we can get ‘y’ position of mouse cursor.

These properties are available in mouse related events.

</Script>

<style>

Body{

Height:100%;

}

</style>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.msg=”Welcome”;

$scope.fun1=function(ev)

{

$scope.msg=”X axis is:”+ev.clientX+”y axis is:”+ev.clientY

}

})

</script>

</body>

Program for Position of Image with respective X-axis and Y-axis:

</Script>

<style>

Body{

Height:100%;

}

</style>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.xp=100;

$scope.yp=100;

$scope.fun1=function(ev)

{

$scope.xp=+ev.clientX;

$scope.xp=ev.clientY

}

})

</script>

Welcome</p>

$event.button:

To get mouse button information which is clicked by user.

</Script>

<style>

Body{

Height:100%;

}

</style>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.fun1=function(ev)

{

If(e.Button==2)

{

Alert(“Cannot Use Right Click”)

}

})

</script>

$Event.key

To get information of key selected by user .

It is available with keyboard related events(ng-keyUp,ng-keydown,etc)

</Script>

<style>

Body{

Height:100%;

}

</style>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.fun1=function(ev)

{

Alert(e.key)

}

})

</script>

keyCode:

· To get unique code value of input character.

· Unique code is same as ASCII code value but it contains same value for capital and small alphbets(65-90)

</Script>

<style>

Body{

Height:100%;

}

</style>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.fun1=function(ev)

{

Alert(e.keyCode)

}

})

</script>

Example program for entering only numbers

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.msg=” “;

$scope.fun1=function(e)

{

$scope.msg=””;

If(e.keyCode<48e.keyCode>57)

{

$scope.msg=”Enter Number Only”;

e.proventDefault()

}

})

</script>

<div>

</div>

</body>

preventDefault()

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

For example, this can be useful when:

· Clicking on a "Submit" button, prevent it from submitting a form

· Clicking on a link, prevent the link from following the URL

Note: Not all events are cancelable. Use the cancelable property to find out if an event is cancelable.

Note: The preventDefault() method does not prevent further propagation of an event through the DOM. Use the stopPropagation() method to handle this.

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.msg=” “;

$scope.t1=””;

$scope.fun1=function(e)

{

If($scope.t1.length==0)

{

Alert(”Enter UserName”);

e.proventDefault()

}

Else If($scope.t2.length==0)

{

Alert(”Enter password”);

e.proventDefault()

}

})

</script>

<body ng-app=”myapp” ng-controller=”ct1” > <Form action=p1.html ng-submit=”fun1($event)”> Username:<input type=”text” ng-model=”t1”> <br>

password:<input type=”text” ng-model=”t2”> < br >

<div>

</div>

</body>

$Http Service:

· Using this service we can create AJAX object in browser to get information from server.

· Ajax is web technology to send request to server without sending current web.

· Ajax Stands for Asynchronous JavaScript and XML.

Asynchronous:

· It is a process of sending request to server without waiting for previous response .

JavaScript:

· Using JavaScript document object model we can create Ajax object and send that object to server.

XML:

· Data Between browser & server transfer in the form of xml.

Sometimes we need to get update from server without submitting current web we can archive this concept using Ajax.

HttpSevice providing no of Methods.

GET():

· We use get() method to transfer Ajax object.

· If we use get() method data transmission between browser and server is fast .but it is not encoding data that’s why it is not secure.

Post():

· To transfer Ajax Object with post method.

· Post method encodes data that’s why it is secure then Get(). But its performance is slow.

Then():

· This method will execute when Ajax object request and response completed successfully we should place a call back function to execute some statements. After Ajax object functionality is completed.

Data:

· Using this property we can get response text of Ajax object.

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.msg=” “;

$scope.fun1=function(e)

{

$http.get(“p2.html”).then(function(x)

{

$scope.msg=x.data

})

}

})

</script>

<body ng-app=”myapp” ng-controller=”ct1” > Welcome

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.msg=” “;

$window.setInterveral(function()

{

$http.get(“p2.html”).then(function(x)

{

$scope.msg=x.data

})

}

})

</script>

<body ng-app=”myapp” ng-controller=”ct1” > Welcome

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope,$http)

{

$scope.fun1=function(){

{

$http.({url:”p2.html”,Method:post”}).then(function(dt)

{

Alert(dt.data)

},function(){

Alert(“not available”)

})

}

})

</script>

<body ng-app=”myapp” ng-controller=”ct1” > Welcome

$Window:

· using this service we can got the information about current window.

· It is providing no of properties and methods.

$window.alert:

· To display message box.

$Window.prompt:

· To display input dialog box

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,fun1)

Function fun1($window)

{

Var rv=$window.prompt(“Enter Username”))

$window.alert(rv)

}

</script>

$Window.confirm:

· Display confirmation dialog box on browser to user/Client.

$Window .Print:

· Display print properties dialog box on browser.

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,fun1)

Function fun1($window)

{

Var rv=$window.confirm(“Do you wann take print”))

$window.print()

}

</script>

$Window.Location:

· Using this property we can redirect from current to other .

</Script>

angular.model(“myapp”,[]).controller(“ct1”,fun1)

function fun1($window,$scope)

{

$scope.fun2=function(){

{

$window.location=”https://www.google.co.in”

}

$scope.fun3=function(){

{

$window.location=”https://www.facebook.com”, “_blank” ,”width=200,height=150,scrollbars=yes,menu bar=yes”)

}

</script>

<body ng-app=”myapp” ng-controller=”ct1” > Welcome

$window.setTimeout:

· to call a function or to execute set of statements after specified time.

$window.setInterval:

· To execute setoff statements for every regular interval of time period.

</Script>

App=angular.model(“myapp”,[]).controller(“ct1”,fun1)

Function fun1($window,$scope)

{

window.setInterval(function ())

{

Alert(“Hi”)

}

},1000)

}

</script>

NextGen4IT

AngularJs Notes Part1