Mavengers

AngularJs Application Module

Here is a file named mainApp.js that contains the following code:

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

Here, we declare an application mainApp module using angular.module function and pass an empty array to it. This array generally contains dependent modules.

AngularJs Modules

AngularJS supports modular approach. Modules are used to separate logic such as services, controllers, application etc. from the code and maintain the code clean. We define modules in separate js files and name them as per the module.js file. In the following example, we are going to create two modules:

 Application Module - used to initialize an application with controller(s).

 Controller Module - used to define the controller.

AngularJs show hide toggle on checkbox click

AngularJs ng-disabled Directive

Add ng-disabled attribute to an HTML button and pass it a model. Bind the model to a checkbox and see the variation.

<html>
<title> AngularJs Directives </title>
<head>
<title>Angular JS Table</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="" ng-controller="firstController">

<table>
<tr>

<td>
<input type="checkbox" ng-model="enableDisableButton">Disable Button
</td>

<td>
<button ng-disabled="enableDisableButton">Click Me</button>
</td>

</tr>

</table>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

AngularJs tables with ne-repeat

<html>
<title> AngularJs Directives </title>
<head>
<title>Angular JS Table</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="" ng-controller="firstController">

<table>
<tr>
<th>
Name
</th>
<th>
Marks
</th>
</tr>
<tr ng-repeat="item in data.subject">

<td>
{{ item.name}}
</td>

<td>
{{ item.marks }}
</td>

</tr>

</table>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data={
firstname:'Shekhar',
lastname:'Nawale',
subject:[{name:'Physics',marks:'40' },{name:'Chemistry',marks:'50' },{name:'Math',marks:'60' },{name:'Biology',marks:'70' }],
fees:'100',
fullname: function()
{
var name=$scope.data;
return name.firstname + ' ' + name.lastname;
}
};
}

</script>

</body>
</html>

AngularJs Orderby Filter

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

Enter subject: <input type="text" ng-model="Subject">

<ol>
<li ng-repeat="item in data | orderBy : 'marks'">

{{ item.Subject + ' marks:' + item.marks }}

</li>
</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data=[
{
Subject:'English',marks:'40'
},
{
Subject:'Math',marks:'50'
},
{
Subject:'History',marks:'60'
},
{
Subject:'chemistry',marks:'70'
},
{
Subject:'Biology',marks:'45'
}
];
}

</script>

</body>
</html>

AngularJs filter data by user input

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

Enter subject: <input type="text" ng-model="Subject">

<ol>
<li ng-repeat="item in data | filter : Subject">

{{ item.Subject + ' ' + item.marks }}

</li>
</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data=[
{
Subject:'English',marks:'40'
},
{
Subject:'Math',marks:'50'
},
{
Subject:'History',marks:'60'
},
{
Subject:'chemistry',marks:'70'
},
{
Subject:'Biology',marks:'45'
}
];
}

</script>

</body>
</html>