Angular Dynamic Routing and Templating View

Rate this post

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:

READ :  Angular routeprovider pass multiple parameters

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

READ :  Codeigniter config set and get variable

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

Leave a Reply

Your email address will not be published.