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

With Single page application
with No page(reloading) refresh on page change
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:

READ : Laravel Excel and csv Import Export Example

[php]
http://infinityknow.com/index.html#View1
http://infinityknow.com/index.html#View2
http://infinityknow.com/index.html#View3
http://infinityknow.com/index.html#View4
[/php]
Need Route libs.
[php]
http://yourprojectname/angularjs/1.4.8/angular-route.js
[/php]

app.js

AngularJS Routing Syntax

[php]
//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’
});
});
[/php]

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

AngularJS Routing Example

[php]
//HTML Navigate menu in angularjs

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: ‘/’
});
}]);
[/php]

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.

READ : Vuejs Creating vue instance inside vue instance

[php]
//include header.html script

//Directive to fetch data

[/php]

How to pass Parameters in Route Urls?

[php]
#products/124858——————>Show product View / show product controller
#order/124858——————>Show order View / show order controller
[/php]