Angularjs ngRoute example

Angularjs ngRoute example, angularjs tutorial, angularjs

What is an Angularjs Routing?
If you want to move a different pages in your web-application, but you want to a your application to be a Single page application, here the pages are not loaded. Here we can use a ngRoute module.

The ngRoute module can routes the different pages in your application without any reloading

Simple example :

you can includes below two scripts in header tag

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js” ></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js” ></script>

Know you can Create html page

<!DOCTYPE html>
<html>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js”></script>

<body ng-app=”yourApp”>

<p><a href=”#/”>Main</a></p>

<a href=”#first”>FirstPgae</a>
<a href=”#secound”>SecoundPage</a>
<a href=”#third”>ThirdPage</a>

<div ng-view></div>

<script>
var app = angular.module(“yourApp”, [“ngRoute”]);
app.config(function($routeProvider) {
$routeProvider
.when(“/”, {
templateUrl : “.htm”
})
.when(“/first”, {
templateUrl : “firstpage.htm”
})
.when(“/secound”, {
templateUrl : “secoundpage.htm”
})
.when(“/third”, {
templateUrl : “thirdpage.htm”
});
});
</script>

<p>Click on the links to navigate to “firstpage.htm”, “secoundpage.htm”, “thirdpage.htm”, or back to “main.htm”</p>
</body>
</html>

simple Example 2:
<html>
<head>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js” ></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js” ></script>
<script type=”text/javascript” src=”yourapp.js”></script>
<style type=”text/css”>
.well{
margin-bottom:0px;
}
</style>
</head>
<body ng-app=”yourapp”>
<div class=”row”>
<div class=”col-sm-14 well”>
header
</div>
</div>
<div class=”row”>
<div class=”col-sm-4 well” style=”height:100%”>
<ul>
<li><a href=’#/first-page’>Firstpage</a></li>
<li><a href=’#/second-page’>Secondpage</a></li>
<li><a href=’#/third-page’>Thirdpage</a></li>
</ul>
</div>
<div class=”col-sm-10 well” style=”height:100%”>
<div ng-view></div>
</div>
</div>
</body>
</html>

yourapp.js

var app = angular.module(‘yourapp’, [‘ngRoute’]);

app.config([‘$routeProvider’, function($routeProvider){
$routeProvider
.when(‘/first-page’, {
templateUrl: ‘page.htm’,
controller: ‘page1’,
caseInsensitiveMatch: true //case insensitive route
})
.when(‘/second-page’, {
templateUrl: ‘page2.htm’,
controller: ‘page2’
})
.when(‘/third-page’, {
template: ‘<strong>this is third page (with no template)</strong>’,
//redirectTo: ‘/first-page’ //redirects to this route (no template shown) – optional
redirectTo: function(params, path, search){ //just another way of redirection
// console.log(path);
// console.log(search);
// console.log(params);

alert(‘Sorry! not implemented yet…will take you to first message now’);
return ‘/first-page’;
}
})
.when(‘/’,{
template: ‘<strong>click one of the links from left panel </strong>’
})
.otherwise({
template: ‘<strong>No content available here..click one of the links from left panel</strong>’
});
//.otherwise(‘/’) //or redirect to root
}]);

app.controller(‘page1’, [‘$scope’, function($scope){
$scope.aa = 90;
$scope.bb = 200;
}]);

app.controller(‘page2’, [‘$scope’, function($scope){
$scope.cc = 100;
$scope.dd = 200;
}]);
page1.htm

<div>
this is from msg1 template
a = {{aa}}, b = {{bb}}
</div>
page2.htm

<div>
this is from msg2 template
c = {{cc}}, d = {{dd}}
</div>

Leave a Reply

Your email address will not be published.