Angular Dynamic Routing and Templating View

Angular Dynamic Routing and Templating View

Today, We want to share with you Angular Dynamic Routing and Templating View.
In this post we will show you AngularJS Routing and Templating example, hear for Dynamic Routing Using Angular JS we will give you demo and example for implement.
In this post, we will learn about Dynamic Routing in Angular with an example.

AngularJS Routing and Templating

Future and Goal of Routing in AngularJS

1. With Single page application
2. with No page(reloading) refresh on page change
3. fetch Different data on each page

What is routing?

Routing Means navigate to All different pages in (App)your application.as well as It’s know Single Page Application.
AngularJS routes(navigate) enable us to create different URLs for different content in our (spa)application.
A route/navigat is specified in the URL after the # sign in angularjs.
Therefore , all the Pakainfo.com point to the same (spa)AngularJS application, but each points to a different route:

https://infinityknow.com/index.html#View1
https://infinityknow.com/index.html#View2
https://infinityknow.com/index.html#View3
https://infinityknow.com/index.html#View4

<a href="http://yourprojectname/angularjs/1.4.8/angular-route.js">http://yourprojectname/angularjs/1.4.8/angular-route.js</a>

app.js

AngularJS Routing Syntax

//It's Define an angular module for our app_var
var app_var = angular.module("applicationName", ['ngRoute']);

//Config function
app_var.config(function($routeProvider) {
$routeProvider
.when('/page_view1', {
templateUrl: 'page_view1.html',
controller: 'page_FirstController'
})
.when('/page_view2', {
templateUrl: 'page_view2.html',
controller: 'page_SecondController'
})
.when('/page_view3', {
templateUrl: 'page_view3.html',
controller: 'page_ThirdController'
})
.otherwise({
redirectTo: '/page_view1'
});
});

Simple Example to Navigate to “index.html”, “about-us.html”,”portfolio.html”, and “services.html”:

AngularJS Routing Example

//HTML Navigate menu in angularjs
<div id="custom-collapse" class="collapse navbar-collapse well">//ordering Menu type flow
<ul class="center nav navbar-nav navbar-right">
<ul class="center nav navbar-nav navbar-right">//Linking page index.html
 	<li class="dropdown active right"><a href="#/">HOME Page_display</a></li>
</ul>
</ul>
//Linking page about-us.html
<ul class="center nav navbar-nav navbar-right">
<ul class="center nav navbar-nav navbar-right">
 	<li><a href="#/about-us">ABOUT US</a></li>
</ul>
</ul>
//Linking page services.html
<ul class="center nav navbar-nav navbar-right">
<ul class="center nav navbar-nav navbar-right">
 	<li><a href="#/services">SERVICES</a></li>
</ul>
</ul>
//Linking page portfolio.html
<ul class="center nav navbar-nav navbar-right">
<ul class="center nav navbar-nav navbar-right">
 	<li><a href="#/portfolio">PORTFOLIO</a></li>
</ul>
</ul>
//Linking page products.html
<ul class="center nav navbar-nav navbar-right">
<ul class="center nav navbar-nav navbar-right">
 	<li><a href="#/products">PRODUCTS</a></li>
</ul>
</ul>
//Linking page career.html
<ul class="center nav navbar-nav navbar-right">
<ul class="center nav navbar-nav navbar-right">
 	<li><a href="#/career">CAREER</a></li>
</ul>
</ul>
//Linking page contact_us.html
<ul id="tab_nav" class="center nav navbar-nav navbar-right">
 	<li><a href="#/contact_us">CONTACT US</a></li>
</ul>
</div>
var app_var = angular.module('myAppName', ['ngRoute']);

//Config function
app_var.config(['$routeProvider',
function($routeProvider) {
//$routeProvider service is a singleton object created by a service factory.
$routeProvider.
when('/', {
title: 'Home Page | Main page',
templateUrl: 'partials/index.html',
controller: 'HomepageCtrl'
})
.when('/about-us', {
title: 'about-us',
templateUrl: 'partials/about-us.html',
controller: 'about-uspageCtrl'
})
.when('/services', {
title: 'services',
templateUrl: 'partials/services.html',
controller: 'servicesCtrl'
})
.when('/portfolio', {
title: 'portfolio',
templateUrl: 'partials/portfolio.html',
controller: 'portfolioCtrl'
})
.when('/products', {
title: 'products',
templateUrl: 'partials/products.html',
controller: 'productsCtrl'
})
.when('/career', {
title: 'career',
templateUrl: 'partials/career.html',
controller: 'careerCtrl'
})
.when('/contact_us', {
title: 'contact_us',
templateUrl: 'partials/contact_us.html',
controller: 'contact_usCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);

Now this content detch ng-view?

Now Your application needs a div to put the all data content provided by the routing.This div is the ng-view directive.

//include header.html script
<div></div>
//Directive to fetch data
<div id="ng-view"></div>
<div></div>

How to pass Parameters in Route Urls?

#products/124858------------------>Show product View / show product controller
#order/124858------------------>Show order View / show order controller