3. ng-init
Initializes an AngularJS Application data.
It is used to put values to the variables to be used in the application
ng-app
Defines the root element.
Automatically initializes or bootstraps the application when web page containing
AngularJS Application is loaded.
Also used to load various AngularJS modules in AngularJS Application.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
... </div>
4. ng-model
This directive binds the values of AngularJS application data to HTML input
controls.
ng-repeat
ng-repeat directive repeats html elements for each item in a collection.
<div ng-app = ""> ... <p>Enter your Name: <input type = "text" ng-model = "name"></p> </div>
<div ng-app = ""> ... <p>List of Countries with locale:</p> <ol> <li ng-repeat = "country in
countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li> </ol> </div>
6. ng-hide : hides element when checkbox is clicked
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Hide HTML: <input type="checkbox" ng-model="myVar">
<div ng-hide="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
</body>
</html>
7. ng-show : shows certain element when checkbox is clicked
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Show HTML: <input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
</body>
</html>
8. ng-include ....to include template
Html doesn’t support embedding html page into html page
But angularjs provides functionality of embedding html into another html page
using ng-include
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>
Index.html
9. Filters
They format the value of an expression for displaying to the end user
They are added to expressions by using the pipe character | , followed by a
filter
It can be used in view templates as well as in controller.
More than one filters can be used.
Some built-in filters are
Currency
Uppercase
Date
Lowercase
search
10. uppercase and lowercase
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
<p>The name is {{ lastName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>
</body>
</html>
12. Date filter
By default, the format is "MMM d, y" (Jan 5, 2016).
Date format can be changed as
"short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM)
"medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05 AM)
"shortDate" same as "M/d/yy" (1/5/16)
"mediumDate" same as "MMM d, y" (Jan 5, 2016)
"longDate" same as "MMMM d, y" (January 5, 2016)
"fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016)
"shortTime" same as "h:mm a" (9:05 AM)
"mediumTime" same as "h:mm:ss a" (9:05:05 AM)
13. <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date }}</p>
<p>Date = {{ today | date : "dd.MM.y"}}</p>
<p>Date with time = {{ today | date :" M/d/yy h:mm a"}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>
14. Filter : filter
The filter filter selects a subset of an array.
The filter filter can only be used on arrays, and it returns an array containing
only the matching items.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani', 'Gusto','Ford','BMW','Santro'
];
});
</script>
<p>This example displays only the names containing the letter "i".</p>
</body>
</html>
16. var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [ 'Jani','Carl', 'Hege', 'Joe', 'Birgit','Mary', 'Kai' ];
});
</script>
<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>
17. Routing
To navigate between multiple pages but make application work as single page
application routing is used.
Since html page can not embed another html page in it routing in ANGULARJS
provides such functionality.
To make routing work the angular app must run on server
So to run angular app in server
Install xampp
Create angular app
Add angular-route.js file to your application to enable routing.
Add your app inside xampp/htdocs
Run the application
18. Routing example :
create index.html
Add angular-route.js in the script
Main, City 1, City 2 to navigate between all three pages called by them
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>
19. <script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm“ redirects to main.htm when nothing is
clicked
})
.when("/london", {
templateUrl : "london.htm“ redirects to london.htm when City 1 is
clicked
})
.when("/paris", {
templateUrl : "paris.htm“ redirects to paris.htm when City 2 is
clicked
});
});
</script>