Angular Dynamic Routing and Templating View

Table of Contents

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

READ : simple file upload component using VueJs

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:

[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]

READ : Multi Select Drop Down List with Bootstrap & Angularjs

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]