Harsha AngularJS Material
Uploaded by
vrjs27 vHarsha AngularJS Material
Uploaded by
vrjs27 vHarsha Vardhan
Page 2 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 2 | 101
Page 3 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 3 | 101
Page 4 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 4 | 101
Page 5 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 5 | 101
Page 6 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 6 | 101
Page 7 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 7 | 101
Page 8 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 8 | 101
Page 9 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 9 | 101
Page 10 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 10 | 101
Page 11 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 11 | 101
Page 12 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 12 | 101
Page 13 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 13 | 101
Page 14 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 14 | 101
Page 15 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 15 | 101
Page 16 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 16 | 101
Page 17 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 17 | 101
Page 18 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 18 | 101
Page 19 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 19 | 101
Page 20 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 20 | 101
Page 21 of 101 Harsha Vardhan
(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>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
</head>
<body>
<div ng-app>
{{10+20}}
</div>
</body>
</html>
P a g e 21 | 101
Page 22 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-init</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 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
Page 23 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-model</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</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
Page 24 of 101 Harsha Vardhan
(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
Page 25 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-bind</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 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
Page 26 of 101 Harsha Vardhan
(Web UI Expert)
Salary: <span ng-bind="salary"></span><br>
</div>
</body>
</html>
P a g e 26 | 101
Page 27 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - JSON</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 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
Page 28 of 101 Harsha Vardhan
(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
Page 29 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 29 | 101
Page 30 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 30 | 101
Page 31 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Modules</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
//creating "run" function
P a g e 31 | 101
Page 32 of 101 Harsha Vardhan
(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
Page 33 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 33 | 101
Page 34 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 34 | 101
Page 35 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 35 | 101
Page 36 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Controllers</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
P a g e 36 | 101
Page 37 of 101 Harsha Vardhan
(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">
Emp ID: {{empid}}<br>
Emp Name: {{empname}}<br>
Salary: {{salary}}<br>
</div>
</body>
</html>
P a g e 37 | 101
Page 38 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Scope</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
//creating a controller called "mycontroller1", in a
module called "mymodule"
P a g e 38 | 101
Page 39 of 101 Harsha Vardhan
(Web UI Expert)
app.controller("mycontroller1", function($scope,
$rootScope)
{
//$scope means "scope of mycontroller1".
$scope.empid = 101;
$scope.empname = "scott";
$scope.salary = 4000;
//$rootScope means "scope of entire ng-app"
$rootScope.message = "Hello";
});
//creating a controller called "mycontroller2", in a
module called "mymodule"
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
Page 40 of 101 Harsha Vardhan
(Web UI Expert)
<div ng-app="mymodule">
<!-- scope of mycontroller1 starts -->
<div ng-controller="mycontroller1">
Emp ID: {{empid}}<br>
Emp Name: {{empname}}<br>
Salary: {{salary}}<br>
<hr>
</div>
<!-- scope of mycontroller1 ends -->
<!-- scope of mycontroller2 starts -->
<div ng-controller="mycontroller2">
Product ID: {{productid}}<br>
Product Name: {{productname}}<br>
Price: {{price}}<br>
<hr>
{{message}}
</div>
<!-- scope of mycontroller2 ends -->
<hr>
{{message}}
</div>
</body>
</html>
P a g e 40 | 101
Page 41 of 101 Harsha Vardhan
(Web UI Expert)
function fun1() function fun2()
{ {
} fun1();
}
P a g e 41 | 101
Page 42 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 42 | 101
Page 43 of 101 Harsha Vardhan
(Web UI Expert)
function(basecomponent1, basecomponent2, …)
Your code here
P a g e 43 | 101
Page 44 of 101 Harsha Vardhan
(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
Page 45 of 101 Harsha Vardhan
(Web UI Expert)
<html>
<head>
<title>AngularJS - Inline array</title>
<style type="text/css">
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
Page 46 of 101 Harsha Vardhan
(Web UI Expert)
<script>
var app = angular.module("mymodule", [ ] );
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
Page 47 of 101 Harsha Vardhan
(Web UI Expert)
<html>
<head>
<title>AngularJS - $inject</title>
<style type="text/css">
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 47 | 101
Page 48 of 101 Harsha Vardhan
(Web UI Expert)
<script>
var app = angular.module("mymodule", [ ] );
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
Page 49 of 101 Harsha Vardhan
(Web UI Expert)
</div>
</body>
</html>
P a g e 49 | 101
Page 50 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 50 | 101
Page 51 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - bootstrap</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
.class1
{
border: 5px solid red;
padding: 10px;
margin: 10px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
P a g e 51 | 101
Page 52 of 101 Harsha Vardhan
(Web UI Expert)
<script type="text/javascript">
//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";
$scope.salary = 4000;
}]);
//mycontroller2
app2.controller("mycontroller2", ["$scope",
function($scope)
{
$scope.productid = 201;
$scope.productname = "mobile";
$scope.price = 45000;
}]);
P a g e 52 | 101
Page 53 of 101 Harsha Vardhan
(Web UI Expert)
//bootstrap (connect) the "div2" to "mymodule2"
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("div2"),
["mymodule2"]);
});
</script>
</head>
<body>
<!-- root view for mymodule1 -->
<div ng-app="mymodule1" ng-
controller="mycontroller1" class="class1">
Emp ID: {{empid}}<br>
Emp Name: {{empname}}<br>
Salary: {{salary}}<br>
</div>
<!-- root view for mymodule2 -->
<div id="div2" ng-controller="mycontroller2"
class="class1">
Product ID: {{productid}}<br>
Product Name: {{productname}}<br>
P a g e 53 | 101
Page 54 of 101 Harsha Vardhan
(Web UI Expert)
Price: {{price}}<br>
</div>
</body>
</html>
P a g e 54 | 101
Page 55 of 101 Harsha Vardhan
(Web UI Expert)
<html>
<head>
<title>AngularJS - data bindings</title>
<style type="text/css">
body,input
{
font-family: Tahoma;
font-size: 30px;
}
#div1
{
padding: 10px;
background-color: #00cccc;
margin: 10px;
}
</style>
<script src="angular.js"></script>
<script>
P a g e 55 | 101
Page 56 of 101 Harsha Vardhan
(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
Page 57 of 101 Harsha Vardhan
(Web UI Expert)
<input type="button" value="show value" ng-
click="fun2()">
</div>
</body>
</html>
P a g e 57 | 101
Page 58 of 101 Harsha Vardhan
(Web UI Expert)
<html>
<head>
<title>AngularJS - data bindings 2</title>
<style type="text/css">
body,input
{
font-family: Tahoma;
font-size: 30px;
}
#div1
{
padding: 10px;
background-color: #00cccc;
margin: 10px;
}
</style>
<script src="angular.js"></script>
<script>
P a g e 58 | 101
Page 59 of 101 Harsha Vardhan
(Web UI Expert)
var app = angular.module("mymodule", [ ]);
app.run(function($rootScope) {
$rootScope.username = "scott";
});
</script>
</head>
<body>
<div id="div1" ng-app="mymodule">
<input type="text" ng-model="username">
<input type="text" ng-model="username">
{{username}}
</div>
</body>
</html>
P a g e 59 | 101
Page 60 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Math</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
P a g e 60 | 101
Page 61 of 101 Harsha Vardhan
(Web UI Expert)
//creating a controller called "mycontroller", in a
module called "mymodule"
app.controller("mycontroller", function($scope)
{
//$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
Page 62 of 101 Harsha Vardhan
(Web UI Expert)
$scope.divide = function()
{
$scope.c = $scope.a / $scope.b;
};
});
</script>
</head>
<body>
<!-- angularjs view starts -->
<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
Page 63 of 101 Harsha Vardhan
(Web UI Expert)
<input type="button" value="Divide" ng-
click="divide()">
<br>
Result: <span ng-bind="c"></span>
</div>
<!-- angularjs view ends -->
</body>
</html>
P a g e 63 | 101
Page 64 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 64 | 101
Page 65 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - $watch</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
P a g e 65 | 101
Page 66 of 101 Harsha Vardhan
(Web UI Expert)
//creating a controller called "mycontroller", in a
module called "mymodule"
app.controller("mycontroller", function($scope)
{
$scope.username = "scott";
$scope.$watch(
function(scope) { return scope.username
},
function(newvalue, oldvalue) {
console.log("Old value: " + oldvalue
+ ", " + "New value:" + newvalue);
});
});
</script>
</head>
<body>
<!-- angularjs view starts -->
<div ng-app="mymodule" ng-
controller="mycontroller">
Username <input type="text" ng-
model="username"><br>
Hello to {{username}}
P a g e 66 | 101
Page 67 of 101 Harsha Vardhan
(Web UI Expert)
</div>
<!-- angularjs view ends -->
</body>
</html>
P a g e 67 | 101
Page 68 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 68 | 101
Page 69 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - filters</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
P a g e 69 | 101
Page 70 of 101 Harsha Vardhan
(Web UI Expert)
//creating a controller called "mycontroller", in a
module called "mymodule"
app.controller("mycontroller", function($scope)
{
$scope.emp = { "empid": 101, "firstname":
"adam", "lastname": "smith", "salary": 4500 };
});
</script>
</head>
<body>
<!-- angularjs view starts -->
<div ng-app="mymodule" ng-
controller="mycontroller">
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>
<!-- angularjs view ends -->
</body>
</html>
P a g e 70 | 101
Page 71 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 71 | 101
Page 72 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - ng-repeat</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
P a g e 72 | 101
Page 73 of 101 Harsha Vardhan
(Web UI Expert)
//creating a controller called "mycontroller", in a
module called "mymodule"
app.controller("mycontroller", function($scope)
{
$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>
<div ng-app="mymodule" ng-
controller="mycontroller">
Seach: <input type="text" ng-
model="search.empname">
<table border="1" cellpadding="5px">
P a g e 73 | 101
Page 74 of 101 Harsha Vardhan
(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
Page 75 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 75 | 101
Page 76 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 76 | 101
Page 77 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 77 | 101
Page 78 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 78 | 101
Page 79 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 79 | 101
Page 80 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 80 | 101
Page 81 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 81 | 101
Page 82 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 82 | 101
Page 83 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 83 | 101
Page 84 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 84 | 101
Page 85 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 85 | 101
Page 86 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 86 | 101
Page 87 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 87 | 101
Page 88 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 88 | 101
Page 89 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - add, remove</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [ ] );
P a g e 89 | 101
Page 90 of 101 Harsha Vardhan
(Web UI Expert)
//creating a controller called "mycontroller", in a
module called "mymodule"
app.controller("mycontroller", function($scope)
{
//create a json array in the model
$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 }
];
//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
Page 91 of 101 Harsha Vardhan
(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>
<div ng-app="mymodule" ng-controller="mycontroller">
<table border="1" cellpadding="5px">
<tr>
<th>Emp ID</th>
P a g e 91 | 101
Page 92 of 101 Harsha Vardhan
(Web UI Expert)
<th>Emp Name</th>
<th>Salary</th>
<th></th>
</tr>
<tr ng-repeat="emp in emps">
<td>{{emp.empid}}</td>
<td>{{emp.empname}}</td>
<td>{{emp.salary}}</td>
<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>
<td><input type="text" ng-
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
Page 93 of 101 Harsha Vardhan
(Web UI Expert)
</table>
</div>
</body>
</html>
P a g e 93 | 101
Page 94 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 94 | 101
Page 95 of 101 Harsha Vardhan
(Web UI Expert)
P a g e 95 | 101
Page 96 of 101 Harsha Vardhan
(Web UI Expert)
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - animations</title>
<style type="text/css">
body, input
{
font-family: 'Tahoma';
font-size: 30px;
}
.ng-enter
{
transition: 1.75s;
opacity: 0;
}
.ng-enter-active
{
opacity: 1;
P a g e 96 | 101
Page 97 of 101 Harsha Vardhan
(Web UI Expert)
background-color: green;
}
.ng-leave
{
transition: 0.75s;
opacity: 1;
}
.ng-leave-active
{
opacity: 0;
background-color: red;
}
</style>
<!-- import angular-js script file -->
<script type="text/javascript" src="angular.js">
</script>
<!-- import angular-js animations script file -->
<script type="text/javascript" src="angular-animate.js">
</script>
P a g e 97 | 101
Page 98 of 101 Harsha Vardhan
(Web UI Expert)
<script type="text/javascript">
//creating a module called "mymodule"
var app = angular.module("mymodule", [
"ngAnimate" ] );
//creating a controller called "mycontroller", in a
module called "mymodule"
app.controller("mycontroller", function($scope)
{
//create a json array in the model
$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 }
];
//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
Page 99 of 101 Harsha Vardhan
(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>
<div ng-app="mymodule" ng-controller="mycontroller">
Seach: <input type="text" ng-model="search">
<table border="1" cellpadding="5px">
P a g e 99 | 101
Page 100 of 101 Harsha Vardhan
(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>{{emp.empid}}</td>
<td>{{emp.empname}}</td>
<td>{{emp.salary}}</td>
<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>
<td><input type="text" ng-
model="newemp.salary"></td>
P a g e 100 | 101
Page 101 of 101 Harsha Vardhan
(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
You might also like
- Snowflake Scenario Based Interview Questions100% (2)Snowflake Scenario Based Interview Questions20 pages
- GET - Hands-On RESTful Web Services With Go - Second Edition PDFNo ratings yetGET - Hands-On RESTful Web Services With Go - Second Edition PDF1 page
- BEIT 6 Introduction to AngularJS ClassNotes Unit 2 BharatVainsh IT GECBVNNo ratings yetBEIT 6 Introduction to AngularJS ClassNotes Unit 2 BharatVainsh IT GECBVN25 pages
- Angularjs Ui Development: Chapter No. 9 "Customizing Angularui Bootstrap"No ratings yetAngularjs Ui Development: Chapter No. 9 "Customizing Angularui Bootstrap"23 pages
- Unit 4 - Building Single Page App With Angular JsNo ratings yetUnit 4 - Building Single Page App With Angular Js25 pages
- Angularjs Is A Very Powerful Javascript Library. It Is Used in Single Page Application (Spa) Projects. It ExtendsNo ratings yetAngularjs Is A Very Powerful Javascript Library. It Is Used in Single Page Application (Spa) Projects. It Extends6 pages
- Angularjs: MADE BY:HARSH PRAJAPATI (160110116040) JAYVARDHANSINGH RATHOD (160110116041) HARDIK SAPARIYA (160110116044)No ratings yetAngularjs: MADE BY:HARSH PRAJAPATI (160110116040) JAYVARDHANSINGH RATHOD (160110116041) HARDIK SAPARIYA (160110116044)14 pages
- Rick L. - AngularJS Handbook - Easy Web App Development (2016)No ratings yetRick L. - AngularJS Handbook - Easy Web App Development (2016)111 pages
- AngularJS A comprehensive beginner s guide to angular js 3nd Edition Rufus Stewart - The ebook is available for quick download, easy access to contentNo ratings yetAngularJS A comprehensive beginner s guide to angular js 3nd Edition Rufus Stewart - The ebook is available for quick download, easy access to content70 pages
- AngularJS Mastery Code Like A Pro GuideNo ratings yetAngularJS Mastery Code Like A Pro Guide56 pages
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
- Angular Portfolio App Development: Create your personal brandFrom EverandAngular Portfolio App Development: Create your personal brandNo ratings yet
- Naskah Ujian (Assessment) : I. Identitas Mata KuliahNo ratings yetNaskah Ujian (Assessment) : I. Identitas Mata Kuliah7 pages
- Computer Programming Module 4 (.Net Technology) 2No ratings yetComputer Programming Module 4 (.Net Technology) 25 pages
- How To Setup A Web Server On Your Raspberry PiNo ratings yetHow To Setup A Web Server On Your Raspberry Pi8 pages
- Oracle Fusion Middleware Administration: Atul KumarNo ratings yetOracle Fusion Middleware Administration: Atul Kumar26 pages