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:
[php]
https://infinityknow.com/index.html#View1
https://infinityknow.com/index.html#View2
https://infinityknow.com/index.html#View3
https://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.
[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]