Harsha AngularJS Material

Harsha Vardhan
Page 2 of 101 Harsha Vardhan

(Web UI Expert)
P a g e 2 | 101
(Web UI Expert)
P a g e 3 | 101
(Web UI Expert)
P a g e 4 | 101
(Web UI Expert)
P a g e 5 | 101
(Web UI Expert)
P a g e 6 | 101
(Web UI Expert)
P a g e 7 | 101
(Web UI Expert)
P a g e 8 | 101
(Web UI Expert)
P a g e 9 | 101
(Web UI Expert)
P a g e 10 | 101
(Web UI Expert)
P a g e 11 | 101
(Web UI Expert)
P a g e 12 | 101
(Web UI Expert)
P a g e 13 | 101
(Web UI Expert)
P a g e 14 | 101
(Web UI Expert)
P a g e 15 | 101
(Web UI Expert)
P a g e 16 | 101
(Web UI Expert)
P a g e 17 | 101
(Web UI Expert)
P a g e 18 | 101
(Web UI Expert)
P a g e 19 | 101
(Web UI Expert)
P a g e 20 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - First Example</title>
<style type="text/css">
body, input {
font-family: 'Tahoma';
font-size: 30px;
}
</style>

<script type="text/javascript" src="angular.js">
</script>
</head>
<body>
<div ng-app>
{{10+20}}
</div>
</body>
</html>
P a g e 21 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-init</title>
body, input {
font-size: 30px;
}
</style>
</script>
</head>
<body>
<div ng-app ng-init="x=10; y=20; z=x+y">
<p>{{x}}</p>
<p>{{y}}</p>
<p>{{z}}</p>
</div>
</body>
</html>
P a g e 22 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-model</title>
body, input
{
font-size: 30px;
}
</style>

</script>
</head>
<body>
<div ng-app ng-init="empid=101; empname='scott';
salary=4500">
Emp ID: <input type="text" ng-
model="empid"><br>
P a g e 23 | 101
(Web UI Expert)
Emp Name: <input type="text" ng-

model="empname"><br>
Salary: <input type="text" ng-model="salary"><br>
</div>
</body>
</html>
P a g e 24 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-bind</title>
body, input
{
font-size: 30px;
}
</style>

</script>
</head>
<body>
<div ng-app ng-init="empid=101; empname='scott';
salary=4500">
Emp ID: <span ng-bind="empid"></span><br>
Emp Name: <span ng-
bind="empname"></span><br>
P a g e 25 | 101
(Web UI Expert)
Salary: <span ng-bind="salary"></span><br>

</div>
</body>
</html>
P a g e 26 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - JSON</title>
body, input
{
font-size: 30px;
}
</style>

</script>
</head>
<body>
<div ng-app ng-init="employee = { empid: 101,

empname:'scott', salary:5000 }; student = { stuid: 201, stuname:
'allen', marks: 80 }">
<p>Emp ID: {{employee.empid}}</p>

<p>Emp Name: {{employee.empname}}</p>
<p>Salary: {{employee.salary}}</p>
<hr>
P a g e 27 | 101
(Web UI Expert)
<p>Student ID: {{student.stuid}}</p>

<p>Student Name: {{student.stuname}}</p>
<p>Marks: {{student.marks}}</p>
</div>
</body>
</html>
P a g e 28 | 101
(Web UI Expert)
P a g e 29 | 101
(Web UI Expert)
P a g e 30 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Modules</title>
body, input
{
font-size: 30px;
}
</style>

</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
//creating "run" function

P a g e 31 | 101
(Web UI Expert)
app.run(function($rootScope)
{
//$rootScope means "model".
$rootScope.empid = 101;
$rootScope.empname = "Scott";
$rootScope.salary = 4000;
});
</script>
</head>
<body>
<div ng-app="mymodule">
Emp ID: {{empid}}<br>
Emp Name: {{empname}}<br>
Salary: {{salary}}<br>
</div>
</body>
</html>
P a g e 32 | 101
(Web UI Expert)
P a g e 33 | 101
(Web UI Expert)
P a g e 34 | 101
(Web UI Expert)
P a g e 35 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Controllers</title>
body, input
{
font-size: 30px;
}
</style>

</script>
P a g e 36 | 101
(Web UI Expert)
//creating a controller called "mycontroller", in a

module called "mymodule"
app.controller("mycontroller", function($scope)
{
//$scope means "model".
$scope.empid = 101;
$scope.empname = "Scott";
$scope.salary = 4000;
});
</script>
</head>
<body>
<div ng-app="mymodule" ng-controller="mycontroller">
</div>
</body>
</html>
P a g e 37 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Scope</title>
body, input
{
font-size: 30px;
}
</style>
</script>
//creating a controller called "mycontroller1", in a

P a g e 38 | 101
(Web UI Expert)
app.controller("mycontroller1", function($scope,
$rootScope)
{
//$scope means "scope of mycontroller1".
$scope.empid = 101;
$scope.empname = "scott";
//$rootScope means "scope of entire ng-app"

$rootScope.message = "Hello";
});
//creating a controller called "mycontroller2", in a

app.controller("mycontroller2", function($scope)
{
//$scope means "scope of mycontroller2".
$scope.productid = 201;
$scope.productname = "mobile";
$scope.price = 45000;
});
</script>
</head>
<body>
P a g e 39 | 101
(Web UI Expert)
<div ng-app="mymodule">

<div ng-controller="mycontroller1">
<hr>
</div>



<div ng-controller="mycontroller2">
Product ID: {{productid}}<br>
Product Name: {{productname}}<br>
Price: {{price}}<br>
<hr>
{{message}}
</div>

<hr>
{{message}}
</div>
</body>
</html>
P a g e 40 | 101
(Web UI Expert)
function fun1() function fun2()

{ {
} fun1();
}
P a g e 41 | 101
(Web UI Expert)
P a g e 42 | 101
(Web UI Expert)
function(basecomponent1, basecomponent2, …)
Your code here
P a g e 43 | 101
(Web UI Expert)
[ “basecomponent1”, “basecomponent2”, …,
function(variable1, variable2, …)
Your code here
}]
function(variable1, variable2, …)
Your code here
functionname.$inject = [ “basecomponent1”, basecomponent2”];
P a g e 44 | 101
(Web UI Expert)
<html>
<head>
<title>AngularJS - Inline array</title>
body
{
font-family: Tahoma;
font-size: 30px;
}
.class1
{
margin: 10px;
padding: 10px;
border: 5px solid red;
}
</style>
<script src="angular.js" type="text/javascript">

</script>
P a g e 45 | 101
(Web UI Expert)
<script>
app.controller("controller1", [ "$scope",
"$rootScope", function(s, r) {
//$scope = sub model 1
//$rootScope = root model
s.submessage = "message from sub model";
r.rootmessage = "message from root model";
} ]);
</script>
</head>
<body>
<div ng-app="mymodule" class="class1">
<p>{{rootmessage}}</p>
<div ng-controller="controller1" class="class1">

<p>{{submessage}}</p>
</div>
</div>
</body>
</html>
P a g e 46 | 101
(Web UI Expert)
<html>
<head>
<title>AngularJS - $inject</title>
body
{
font-size: 30px;
}
.class1
{
margin: 10px;
padding: 10px;
}
</style>
<script src="angular.js" type="text/javascript">

</script>
P a g e 47 | 101
(Web UI Expert)
<script>
app.controller("controller1", fun1);
function fun1(s, r)
{
//$scope = sub model 1
//$rootScope = root model
s.submessage = "message from sub model";
r.rootmessage = "message from root model";
}
fun1.$inject = [ "$scope", "$rootScope" ];

</script>
</head>
<body>
<div ng-app="mymodule" class="class1">
<p>{{rootmessage}}</p>
<div ng-controller="controller1" class="class1">

<p>{{submessage}}</p>
</div>
P a g e 48 | 101
(Web UI Expert)
</div>
</body>
</html>
P a g e 49 | 101
(Web UI Expert)
P a g e 50 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - bootstrap</title>
body, input
{
font-size: 30px;
}
.class1
{
padding: 10px;
margin: 10px;
}
</style>

</script>
P a g e 51 | 101
(Web UI Expert)
//creating two modules called "mymodule1" and
"mymodule2"
var app1 = angular.module("mymodule1", [ ] );
var app2 = angular.module("mymodule2", [ ] );
//mycontroller1
app1.controller("mycontroller1", ["$scope",
function($scope)
{
$scope.empid = 101;
$scope.empname = "scott";
}]);
//mycontroller2
app2.controller("mycontroller2", ["$scope",
function($scope)
{
$scope.productid = 201;
$scope.productname = "mobile";
$scope.price = 45000;
}]);
P a g e 52 | 101
(Web UI Expert)
//bootstrap (connect) the "div2" to "mymodule2"

angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("div2"),
["mymodule2"]);
});
</script>
</head>
<body>

<div ng-app="mymodule1" ng-
controller="mycontroller1" class="class1">
</div>


<div id="div2" ng-controller="mycontroller2"
class="class1">
Product ID: {{productid}}<br>
Product Name: {{productname}}<br>
P a g e 53 | 101
(Web UI Expert)
Price: {{price}}<br>
</div>
</body>
</html>
P a g e 54 | 101
(Web UI Expert)
<html>
<head>
<title>AngularJS - data bindings</title>
body,input
{
font-size: 30px;
}
#div1
{
padding: 10px;
background-color: #00cccc;
margin: 10px;
}
</style>
<script src="angular.js"></script>
<script>
P a g e 55 | 101
(Web UI Expert)
var app = angular.module("mymodule", [ ]);
app.run(function($rootScope) {
$rootScope.username = "scott";
$rootScope.fun1 = function() {
$rootScope.username = "smith";
};
$rootScope.fun2 = function() {
alert($rootScope.username);
};
});
</script>
</head>
<body>
<div id="div1" ng-app="mymodule">

<input type="text" ng-model="username">
<input type="button" value="change value" ng-
click="fun1()">
P a g e 56 | 101
(Web UI Expert)
<input type="button" value="show value" ng-

click="fun2()">
</div>
</body>
</html>
P a g e 57 | 101
(Web UI Expert)
<html>
<head>
<title>AngularJS - data bindings 2</title>
body,input
{
font-size: 30px;
}
#div1
{
padding: 10px;
background-color: #00cccc;
margin: 10px;
}
</style>
<script src="angular.js"></script>
<script>
P a g e 58 | 101
(Web UI Expert)
var app = angular.module("mymodule", [ ]);
app.run(function($rootScope) {
$rootScope.username = "scott";
});
</script>
</head>
<body>
<div id="div1" ng-app="mymodule">

{{username}}
</div>
</body>
</html>
P a g e 59 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Math</title>
body, input
{
font-size: 30px;
}
</style>

</script>
P a g e 60 | 101
(Web UI Expert)

{
//$scope means "scope of mycontroller".
$scope.a = "10";
$scope.b = "3";
$scope.c = "";
$scope.add = function()
{
$scope.c = parseFloat($scope.a) +
parseFloat($scope.b);
};
$scope.subtract = function()
{
$scope.c = $scope.a - $scope.b;
};
$scope.multiply = function()
{
$scope.c = $scope.a * $scope.b;
};
P a g e 61 | 101
(Web UI Expert)
$scope.divide = function()
{
$scope.c = $scope.a / $scope.b;
};
});
</script>
</head>
<body>

<div ng-app="mymodule" ng-
controller="mycontroller">
First number: <input type="text" ng-

model="a"><br>
Second number: <input type="text" ng-
model="b"><br>
<input type="button" value="Add" ng-
click="add()">
<input type="button" value="Subtract" ng-
click="subtract()">
<input type="button" value="Multiply" ng-
click="multiply()">
P a g e 62 | 101
(Web UI Expert)
<input type="button" value="Divide" ng-

click="divide()">
<br>
Result: <span ng-bind="c"></span>
</div>

</body>
</html>
P a g e 63 | 101
(Web UI Expert)
P a g e 64 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - $watch</title>
body, input
{
font-size: 30px;
}
</style>

</script>
P a g e 65 | 101
(Web UI Expert)

{
$scope.username = "scott";
$scope.$watch(
function(scope) { return scope.username
},
function(newvalue, oldvalue) {
console.log("Old value: " + oldvalue
+ ", " + "New value:" + newvalue);
});
});
</script>
</head>
<body>
Username <input type="text" ng-

model="username"><br>
Hello to {{username}}
P a g e 66 | 101
(Web UI Expert)
</div>
</body>
</html>
P a g e 67 | 101
(Web UI Expert)
P a g e 68 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - filters</title>
body, input
{
font-size: 30px;
}
</style>

</script>
P a g e 69 | 101
(Web UI Expert)

{
$scope.emp = { "empid": 101, "firstname":
"adam", "lastname": "smith", "salary": 4500 };
});
</script>
</head>
<body>
Emp ID: {{emp.empid}}<br>
First Name: {{emp.firstname | uppercase}}<br>
Last Name: {{emp.lastname | lowercase}}<br>
Salary: {{emp.salary | number}}<br>
Salary: {{emp.salary | currency:'₹'}}<br>
</div>
</body>
</html>
P a g e 70 | 101
(Web UI Expert)
P a g e 71 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-repeat</title>
body, input
{
font-size: 30px;
}
</style>

</script>
P a g e 72 | 101
(Web UI Expert)

{
$scope.emps =
[
{ "empid": 101, "empname": "Scott", "salary": 3000 },
{ "empid": 102, "empname": "Allen", "salary": 6500 },
{ "empid": 103, "empname": "Jones", "salary": 7500 },
{ "empid": 104, "empname": "Smith", "salary": 2400 },
{ "empid": 105, "empname": "James", "salary": 9500 }
];
});
</script>
</head>
<body>

Seach: <input type="text" ng-
model="search.empname">
<table border="1" cellpadding="5px">
P a g e 73 | 101
(Web UI Expert)
<tr>
<th>Emp ID</th>
<th>Emp Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in emps | filter:search |

orderBy:'salary' ">
<td>{{emp.empid}}</td>
<td>{{emp.empname}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>
</body>
</html>
P a g e 74 | 101
(Web UI Expert)
P a g e 75 | 101
(Web UI Expert)
P a g e 76 | 101
(Web UI Expert)
P a g e 77 | 101
(Web UI Expert)
P a g e 78 | 101
(Web UI Expert)
P a g e 79 | 101
(Web UI Expert)
P a g e 80 | 101
(Web UI Expert)
P a g e 81 | 101
(Web UI Expert)
P a g e 82 | 101
(Web UI Expert)
P a g e 83 | 101
(Web UI Expert)
P a g e 84 | 101
(Web UI Expert)
P a g e 85 | 101
(Web UI Expert)
P a g e 86 | 101
(Web UI Expert)
P a g e 87 | 101
(Web UI Expert)
P a g e 88 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - add, remove</title>
body, input
{
font-size: 30px;
}
</style>

</script>
P a g e 89 | 101
(Web UI Expert)

{
//create a json array in the model
$scope.emps =
[
];
//create an object called "newemp"

$scope.newemp = { "empid": "", "empname": "", "salary": "" };
//create a function called "save()" to insert

new employee to existing "emps" array
$scope.save = function() {
$scope.emps.push({ "empid":
$scope.newemp.empid, "empname": $scope.newemp.empname,
"salary": $scope.newemp.salary });
$scope.newemp.empid = "";
P a g e 90 | 101
(Web UI Expert)
$scope.newemp.empname = "";
$scope.newemp.salary = "";
document.querySelectorAll("#newempid")[0].focus();
$scope.remove = function(currentindex) {
if (confirm("Are you sure to delete this employee") == true)
{
$scope.emps.splice(currentindex, 1);
}
}
});
</script>
</head>
<body>
<tr>
<th>Emp ID</th>
P a g e 91 | 101
(Web UI Expert)
<th>Emp Name</th>
<th>Salary</th>
<th></th>
</tr>
<tr ng-repeat="emp in emps">

<td><a href="#" ng-
click="remove($index)">Delete</a></td>
</tr>
<tr>
<td><input type="text" id="newempid"
ng-model="newemp.empid" autofocus="autofocus"></td>
<td><input type="text" ng-
model="newemp.empname"></td>
model="newemp.salary"></td>
<td><input type="button" value="Save"
ng-click="save()" ng-disabled="newemp.empid == '' ||
newemp.empname == '' || newemp.salary == '' "></td>
</tr>
P a g e 92 | 101
(Web UI Expert)
</table>
</div>
</body>
</html>
P a g e 93 | 101
(Web UI Expert)
P a g e 94 | 101
(Web UI Expert)
P a g e 95 | 101
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - animations</title>
body, input
{
font-size: 30px;
}
.ng-enter
{
transition: 1.75s;
opacity: 0;
}
.ng-enter-active
{
opacity: 1;
P a g e 96 | 101
(Web UI Expert)
background-color: green;
}
.ng-leave
{
transition: 0.75s;
opacity: 1;
}
.ng-leave-active
{
opacity: 0;
background-color: red;
}
</style>

</script>


<script type="text/javascript" src="angular-animate.js">
</script>
P a g e 97 | 101
(Web UI Expert)
var app = angular.module("mymodule", [
"ngAnimate" ] );

{
//create a json array in the model
$scope.emps =
[
];
//create an object called "newemp"

$scope.newemp = { "empid": "", "empname": "", "salary": "" };
//create a function called "save()" to insert new

employee to existing "emps" array
P a g e 98 | 101
(Web UI Expert)
$scope.save = function() {
$scope.emps.push({ "empid":
$scope.newemp.empid, "empname": $scope.newemp.empname,
"salary": $scope.newemp.salary });
$scope.newemp.empid = "";
$scope.newemp.empname = "";
$scope.newemp.salary = "";
}
$scope.remove = function(currentempid) {
if (confirm("Are you sure to delete this employee") == true)
{
$scope.emps.splice(currentempid, 1);
}
}
});
</script>
</head>
<body>
Seach: <input type="text" ng-model="search">
P a g e 99 | 101
(Web UI Expert)
<tr>
<th>Emp ID</th>
<th>Emp Name</th>
<th>Salary</th>
<th></th>
</tr>
<tr ng-repeat="emp in emps | filter: search ">

<td><a href="#" ng-
click="remove($index)">Delete</a></td>
</tr>
<tr>
<td><input type="text" id="newempid"
ng-model="newemp.empid" autofocus="autofocus"></td>
model="newemp.empname"></td>
model="newemp.salary"></td>
P a g e 100 | 101
(Web UI Expert)
<td><input type="button" value="Save"

ng-click="save()" ng-disabled="newemp.empid == '' ||
newemp.empname == '' || newemp.salary == '' "></td>
</tr>
</table>
</div>
</body>
</html>
P a g e 101 | 101

Harsha AngularJS Material

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Harsha AngularJS Material

Uploaded by

Copyright:

Available Formats

Harsha Vardhan

Page 2 of 101 Harsha Vardhan

Emp Name: <input type="text" ng-

<script type="text/javascript" src="angular.js">

Salary: <span ng-bind="salary"></span><br>

<script type="text/javascript" src="angular.js">

<div ng-app ng-init="employee = { empid: 101,

<p>Emp ID: {{employee.empid}}</p>

<p>Student ID: {{student.stuid}}</p>

//creating "run" function

//creating a controller called "mycontroller", in a

//creating a controller called "mycontroller1", in a

//$rootScope means "scope of entire ng-app"

//creating a controller called "mycontroller2", in a

function fun1() function fun2()

Your code here

Your code here

Your code here

functionname.$inject = [ “basecomponent1”, basecomponent2”];

<script src="angular.js" type="text/javascript">

<div ng-controller="controller1" class="class1">

<script src="angular.js" type="text/javascript">

fun1.$inject = [ "$scope", "$rootScope" ];

<div ng-controller="controller1" class="class1">

//bootstrap (connect) the "div2" to "mymodule2"

var app = angular.module("mymodule", [ ]);

<div id="div1" ng-app="mymodule">

<input type="button" value="show value" ng-

var app = angular.module("mymodule", [ ]);

<div id="div1" ng-app="mymodule">

//creating a controller called "mycontroller", in a

First number: <input type="text" ng-

<input type="button" value="Divide" ng-

//creating a controller called "mycontroller", in a

Username <input type="text" ng-

//creating a controller called "mycontroller", in a

//creating a controller called "mycontroller", in a

<div ng-app="mymodule" ng-

<table border="1" cellpadding="5px">

<tr ng-repeat="emp in emps | filter:search |

//creating a controller called "mycontroller", in a

//create an object called "newemp"

//create a function called "save()" to insert

<table border="1" cellpadding="5px">

<tr ng-repeat="emp in emps">

//creating a controller called "mycontroller", in a

//create an object called "newemp"

//create a function called "save()" to insert new

Seach: <input type="text" ng-model="search">

<table border="1" cellpadding="5px">