Call Us Now!
Velachery: +91 9884412301 | OMR: +91 9600112302
info@credosystemz.com
AngularJS Training in ChennaiAngularJS Training in Chennai
  • Home
  • Course Content
  • Realtime Projects
  • Interview Q&A
  • Contact Us
  • Home
  • Course Content
  • Realtime Projects
  • Interview Q&A
  • Contact Us

Blog

  • Home
  • Blog
  • Routing in AngularJS

Routing in AngularJS

  • Posted by admin
  • Categories Blog
  • Date March 20, 2019
  • Comments 0 comment

What is Routing ?

Routing in AngularJS allows your application becomes a Single Page Application (SPA). In your application, you have to navigate to different pages, at the same time your application should be act as SPA without page reload. This is called as Routing.

For the Routing, here we use ngRoute Module. This module routes our applications to different pages without page refreshment.

How to Implement Routing in your Application ?

  1. At first you need to include the routing library file.

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js”></script>

  1. Next include ngRoute dependency in your application module.

var app = angular.module(“myApp”, [“ngRoute”]);

Now your application ready to access Routing.

 

How to configure Routing in your Application ?

Once you done dependency injection, You can use $routeProvider service. We know that $routeProvider is a default Provider and we can inject that into configuration phase.

app.config(function($routeProvider) {

$routeProvider

.when(“/”, {

templateUrl : “index.html”,

controller: “indexCtrl”

})

.when(“/about”, {

templateUrl : “aboutus.html”,

controller: “aboutusCtrl”

})

.when(“/service”, {

templateUrl : “service.html”,

controller: “serviceCtrl”

})

.when(“/contact”, {

templateUrl : “contactus.html”,

controller: “contactCtrl”

})

.otherwise({redirectTo: ‘/’});

});

 

Explanation:

Once you inject $routeProvider in config phase, you are ready to use routing. Then inbuilt method when has 2 properties

  1. The url query string and
  2. Object which has properties of
  • template – You can do your html designs here. Its not a new page.
  • templateUrl – This is a new page which you going to call when your query string meets the right value.
  • controller – This controller will be attached on the template and you don’t need to attach the controller manually again.
  1. the otherwise method call the template while the query string matches none of the value you mentioned in the config phase.

 

Where the templates goes to load ?

We need a container to receive the templates which is provide by Routing.

We can set the container in three different ways.

  1. As an Element – <ng-view></ng-view>
  2. As an Attribute – <div ng-view></div>
  3. As a Class – <div class=”ng-view”>

 

For a standard we use as an Element.

So the templates dynamically loads on the <ng-view> </ng-view> directive based on the query string.

To know more about the complete topics of AngularJS, please visit AngularJS Training in Chennai.

  • Share:
admin

Previous post

$http Request in Angularjs
March 20, 2019

Next post

Understanding Providers in AngularJS
March 20, 2019

You may also like

What is New in Angular 15? How to Upgrade to Angular 15?
9 May, 2023

Angular 15 Angular 15 is the latest version with numerous features and updates to improve the performance. It is important to know how to upgrade to Angular 15. The updates are made in the latest version to deliver a better …

A Guide to Angular 14 Features and New Updates
8 May, 2023

Introduction The Angular community released Angular 14 in 2022 with several improvements. Angular 14 has stand-alone components to reduce the need for Angular modules. It is the systematic pre-planned upgrade.Angular 14 is the most advanced,pre planned updates version to develop …

What is the latest technology of Angular?
3 May, 2023

Introduction To begin,Angular is one of the top front-end frameworks for web development. It is an open source, typescript based JavaScript framework to create dynamic, efficient web applications. Angular is worth learning with a lot of job opportunities. Typescript 4.7 …

Leave A Reply Cancel reply

Your email address will not be published. Required fields are marked *

CREDO SYSTEMZ – VELACHERY

New # 30, Old # 16A, Third Main Road,
Rajalakshmi Nagar, Velachery,
(Opp. to Murugan Kalyana Mandapam),
Chennai - 600 042.
Mobile: +91 9884412301
Email: info@credosystemz.com
Web: www.credosystemz.com

CREDO SYSTEMZ – OMR

Plot No.8, Vinayaga Avenue,
Rajiv Gandhi Salai, (OMR),
Okkiampettai,
Landmark - Okkiyampet Bus Stop,
Next to Buhari Hotel,
Chennai – 600 097.
Mobile: +91 9600112302

TRENDING COURSES

  • Python Training in Chennai
  • Data Science Training in Chennai
  • AWS Training in Chennai
  • Big Data Hadoop Training in Chennai
  • Machine Learning Training in Chennai
  • Angular Training in Chennai
  • Mean Stack Training in Chennai
  • RPA Training in Chennai
  • DevOps Training in Chennai
  • R Programming Training in Chennai
  • Microsoft Azure Training

Copyright 2022 Angularjstraininginchennai.in | All Rights Reserved