AngularJs Notes Part1

AngularJs Notes Part1

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.






  1
 

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>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width"> <title>Basic JavaScript Program</title>

<script type=’text/JavaScript’ language=”JavaScript”>

Alert (“HELLO”)

</script>

</head>

<Body>

<img src=”img1.jpeg” width=”100”>

<script>

Alert (“From Body”)

</script>

<input type=”Button” value=”Click” onclick=”JavaScript: alert (“From Button”)/>

</body>

</html>

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

External JavaScript declaration is good for Reusability.








  3

 

 



.Js File

Alert (“scott”)

Alert (“Tiger’)



.Html File:

<Html>

<Head>

<script src=”MyScript.js”>

</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 src=”Angular.js”>

</Script>







  4

 

 



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:
 

<body ng-app=””>
//  code
</body>
 


Or
 


<body>

<p ng-app=””>
</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.











  5

 

 



Example Program:
 


<html>
<head>
<script src=”angular.min.js”>

</Script>
</head>

<body ng-app=”” ng-init=”x=200;y=400”> <p ng-bind=”x”></p> <h1>ng-bind=”y”</h1>

</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 src=”angular.min.js”>

</Script>
</head>
<body ng-app=”” ng-init=”x=200;y=’Scott’”>
<p ng-bind=”x”></p>
<h1>ng-bind=”y”</h1>

<input ng-model=”y”>
</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.


  6

 

 



·        We can use Html Element Properties.
 


<html>
<head>
<script src=”angular.min.js”>
</Script>
</head>

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

<h1>{{x}}</h1>
</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 src=”angular.min.js”>
</Script>
</head>

<body ng-app=”” ng-init=”arr=[10,200,30,’scott’]”>
{{ar[2]}}
</body>
</html>







  7

 

 



Ng-Repeat:

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


<html>

<head>
<script src=”angular.min.js”>
</Script>

</head>

<body ng-app=”” ng-init=”arr=[10,200,30,’scott’,100,200]”> <li ng-repeat=”x in arr”>
{{x}}
</li>

</body>
</html>


Drop Down List:
 


<html>
<head>
<script src=”angular.min.js”>
</Script>
</head>

<body ng-app=”” ng-init=”arr=[‘PHP’,’scott’,’JQuery’,’java’]”> <select>

<option ng-repeat=”y in arr”>
{{x}}
</option>

</select>
</li>
</body>
</html>


Ng-Repeat in Image Property:
 


<html>
<head>
<script src=”angular.min.js”>


  8

 

 




</Script>

</head>

<body ng-app=”” ng-init=”arr=[‘img1.jpeg’,’ img2.jpeg’,’ img3.jpeg’,’ img4.jpeg’]”>

<img ng-repeat=”iname in arr”src={{iname}} width=100 height=100>
</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:

<li ng-repeat=”v in arr track by $index” ng-bind=”v”></li>



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.



  9

 

 



·        Available Event Attributes are

1.     Ng-click

2.     ng-mouseover

3.     Ng-mouseout

4.     Ng-keyup

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




<html>
<head>
<script src=”angular.min.js”>

</Script>
</head>
<body ng-app=”” ng-init=”x=img1.jpeg”>

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

</body>

</html>


RadioButton:
 


<script src=”angular.min.js”>

<body ng-app=”” ng-init=”x=true”>

<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>
<input type=”button” value=”Register”>
</div>
<div ng-hide=”x”>


  10

 

 




<h2> Login</h2>

Username:<input>
<br>
Password:<input>

<br>
<input type=”button” value=”Login”>
</div>
{{x}}
</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’])




  11

 

 



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 src=”angular.min.js”>
</Script>
App=angular.model(“myapp”,[])
App.controller(“ct1”,function(){

Alert(“Controller is created”)
})
</script>

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





  12

 

 



Program with Multiple controllers:
 


<script src=”angular.min.js”>
</Script>
App=angular.model(“myapp”,[])

App.controller(“ct1”,function(){
Alert(“From ct1”)
})
App.controller(“ct2”,function(){
Alert(“From ct2”)

})

</script>

<body ng-app=”myapp” ng-controller=”ct1”> <p ng-controller=”ct2”>
</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 src=”angular.min.js”>
</Script>
angular.model(“myapp”,[]).controller(“ct1”,function($Scope){
$scope.sno=100
$scope.fun1=function(x)

{
Alert(x)
}
})

</script>


  13

 

 




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

<input type=”button”ng-click=”fun1(1234)” value=”clickme”> </body>







Program buy writing function outside:
 


<script src=”angular.min.js”>
</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}}

<input type=”button” ng-click=”abc(10)” value=”click”> </body>




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


<script src=”angular.min.js”>
</Script>
angular.model(“myapp”,[]).controller(“ct1”,cbkfun)

function cbkfun ($Scope)
{

$scope.t1;


  14

 

 




$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}}/>

<input type=”button” ng-click=”funadd()” value=”+”> <input type=”button” ng-click=”funsub()” value=”-”>

</body>




Object:

·        Object is collection of properties.

·        Property is combination of name and value.

·        Object properties we should enclose with “{}
 


<script src=”angular.min.js”>
<body ng-app=”” ng-init=”obj={uname:’scott’.city:Hyderabad’}”>

<h1>{{obj.uname}}</h1>
<h2>{{obj.city}}</h2>
</body>








  15

 

 




<style>

Th{
Color:Silver;
Background-color:black;

}
Tr:nth-child(even){
Background-color:lightBlue;
}
Tr:nth-child(odd){

Background-color:lightgreen;
}

</Style>

<script src=”angular.min.js”> <body ng-app=”” ng-init=”obj=[ {uname:’Chaitanya’.city:’Hyderabad’}, {uname:’Ramalakshumma’.city:’Rajampet’}, {uname:’charitha’.city:’Rajampet’}, {uname:’Krishna Reddy’.city:’Rajampet’} ]”>

<table border=’2’>
<th> UserName</th>

<th> City</th>
<tr ng-repeat=”x in obj”>
<td>{{x.uname}}>/td>
<td>{{x.city}}</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”.









  16

 

 




<script src=”angular.min.js”></script>

<body ng-app=”” ng-init=”x=false”>
<img src=’img1.jpeg’ width=100 ng-if=”x”>
<img src=’img2.jpeg’ width=100 >

</body>


Program by using condition in ng-if
 


<script src=”angular.min.js”></script> <body ng-app=”” ng-init=”x=300;y=200”> <div ng-if=”x>y”>

x is Big
<div>
<div ng-if=”x<y”>

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:
 


<script src=”angular.min.js”></script>
<body ng-app=”” ng-init=”x=’’”>
<select ng-model=”x”>

<option> Apple</option>
<option> mango</option>
</select>
<div ng-switch=”x”>


  17

 

 




<div ng-switch-when=”Apple”>

<h2> Apple</h2>
Price : 100/- Kg
</div>

<div ng-switch-when=”mango”>
<h2> mango</h2>
Price : 200/- Kg
</div>
<div ng-switch-default>

<h1> Please Select Valid option</h1>
</div>

</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 src=”angular.min.js”>

</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}}

<p ng-controller=”ct2”>
{{y}{{x}}
</p>


  18

 

 




</body>

Ng-class:

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


<script src=”angular.min.js”>
</Script>
<style>
.abc{
Color:red;
Text-decoration:underline;
Font-size:20px;

Font-family:”arial”;
}
.def{
Color:green;
Text-decoration:none;

Font-size:25px;
}
</style>
<body ng-app=”” ng-init=”x=300”>

<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 src=”angular.min.js”>

</Script>
<body ng-app=”” ng-init=”x=p1.html’”>
<div ng-include=”x”>
</div>
Hello …welcome home!!!!!!!!!!


  19

 

 




</body>

ContactUs.html
 


<script src=”angular.min.js”>
</Script>
<body ng-app=”” ng-init=”x=p1.html’”>
<div ng-include=”x”>
</div>
Hello …welcome To Contact Us!!!!!!!!!!
</body>

Aboutus.html
 


<script src=”angular.min.js”>
</Script>
<body ng-app=”” ng-init=”x=p1.html’”>
<div ng-include=”x”>
</div>
Hello …welcome To AboutUs!!!!!!!!!!

</body>


P1.html.
 


<a href=”home.html”> Home</a>

<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 src=”angular.min.js”>
</Script>
function funcon($Scope)
{



  20

 

 




$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 src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;

}
</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{
$scope.msg=”Welcome”;
$scope.fun1=function(ev)



  21

 

 




{

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

</script>

<body ng-app=”myapp” ng-controller=”ct1” ng-mousemove=”fun1($event)”>
<div>{{msg}}</div>
</body>


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


<script src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;
}
</style>

<script>
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>

<body ng-app=”myapp” ng-controller=”ct1” ng-mousemove=”fun1($event)”> <p ng-style=”{color:’Red’}”>
Welcome</p>

<img src=img1.jpeg”ng-style=”{width:30,top:yp,position:absolute,left:xp}> </body>



  22

 

 



$event.button:

To get mouse button information which is clicked by user.
 


<script src=”angular.min.js”>
</Script>
<style>
Body{
Height:100%;
}
</style>

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

$scope.fun1=function(ev)

{
If(e.Button==2)
{
Alert(“Cannot Use Right Click”)
}
}
})

</script>
<body ng-app=”myapp” ng-controller=”ct1” >

<img src=img1.jpeg” width=”100”ng-mousedown=”fun1($event)”> </body>


$Event.key

To get information of key selected by user .

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


<script src=”angular.min.js”>

</Script>
<style>
Body{

Height:100%;


  23

 

 




}

</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{

$scope.fun1=function(ev)
{
Alert(e.key)

}
})

</script>

<body ng-app=”myapp” ng-controller=”ct1” > <input ng-keyup=”fun1($event)”> </body>




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 src=”angular.min.js”>
</Script>
<style>

Body{
Height:100%;
}
</style>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)
{

$scope.fun1=function(ev)

{
Alert(e.keyCode)
}



  24

 

 




})

</script>

<body ng-app=”myapp” ng-controller=”ct1” > <input ng-keyup=”fun1($event)”> </body>

Example program for entering only numbers
 


<script src=”angular.min.js”>
</Script>
<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>
<body ng-app=”myapp” ng-controller=”ct1” >
<input type=”text” ng-keydown=”fun1($event)”>

<div>
{{msg}}
</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:



  25

 

 



·         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 src=”angular.min.js”>
</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,function($Scope)

{
$scope.msg=” “;
$scope.t1=””;

$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>


  26

 

 




password:<input type=”text” ng-model=”t2”> < br >
<input type= submit value=”enter”>
<div>

{{msg}}
</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.


  27

 

 



·        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 src=”angular.min.js”>

</Script>
<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

<input type=”Button” value=”getData” ng-click=”Fun1()”> </body>




  28

 

 




<script src=”angular.min.js”>

</Script>
<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

<input type=”Button” value=”getData” ng-click=”Fun1()”> </body>
 



<script src=”angular.min.js”>
</Script>
<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”)
})
}
})


  29

 

 




</script>

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

<input type=”Button” value=”click” ng-click=”Fun1()”> </body>

$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 src=”angular.min.js”>

</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,fun1)

Function fun1($window)
{
Var rv=$window.prompt(“Enter Username”))
$window.alert(rv)

}
</script>

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


$Window.confirm:

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

$Window .Print:

·        Display print properties dialog box on browser.
 


<script src=”angular.min.js”>


  30

 

 




</Script>

<script>
App=angular.model(“myapp”,[]).controller(“ct1”,fun1)
Function fun1($window)

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

}

</script>

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


$Window.Location:

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


<script src=”angular.min.js”>
</Script>
<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

<input type=”Button” value=”Goo” ng-click=”Fun2()”>


  31

 

 




<input type=”Button” value=”Foo” ng-click=”Fun3()”> </body>

$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 src=”angular.min.js”>

</Script>
<script>
App=angular.model(“myapp”,[]).controller(“ct1”,fun1)

Function fun1($window,$scope)
{
window.setInterval(function ())
{
Alert(“Hi”)
}
},1000)

}
</script>

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