Single Page Apps with AngularJS Routing

Single Page Apps with AngularJS Routing
January 18, 2017 No Comments Uncategorized Minal Landge

AngularJS Routing


AngularJS Routing

AngularJS Routing

We can build Single Page Application (SPA) with AngularJS.

It is a web app that loads a single HTML page and dynamically updates that page as the user interacts with the web app.

AngularJS supports SPA using routing module ngRoute.

 

In this article we will go through the useful feature of AngularJS called Routing.

Routing helps you in dividing your application in logical views and bind different views to Controllers.

As we add more and more logic to an app, it grows and soon become difficult to manage.

Dividing it in Views and using Routing to load different part of app helps in logically dividing the app and making it more manageable.

To make your applications ready for routing, you must include the AngularJS Route module:

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

ngRoute:

The ngRoute module provides routing and deeplinking services and directives for angular apps.

You must add the ngRoute as a dependency in the application module as follows:

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

$routeProvider:

AngularJS $routeProvider is probably one of the most popular and widely used providers.

With $routeProvider we manage all our application routes and is responsible for updating our views and pairing these views with its controllers.

$routeProvider is used to configure the routes. We use the ngRoute config() to configure the $routeProvider.

$routeProvider has a simple API, accepting either the when() or otherwise() method.

Example:

app.config(function($routeProvider) {

$routeProvider

.when(“/”, {

templateUrl : “home.html”

})

.when(“/about”, {

templateUrl : “aboutUS.html”

})

.when(“/contact”, {

templateUrl : ” contactUs.html”

})

.when(“/career”, {

templateUrl : ” career.html”

});

});

ng-view:

Your application needs a container to put the content provided by the routing.This container is the ng-view directive.

We can add ng-view directives in 3 diiffernt ways in your application:

1. <divng-view></div>

2. <ng-view></ng-view>

3. <div class=”ng-view”></div>

Controllers:

You can also define controllers with $routeProvider for each view.

Example:

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

app.config(function($routeProvider) {

$routeProvider

.when(“/”, {

templateUrl : “home.html”

})

.when(“/about”, {

templateUrl : ” aboutUs.html”,

controller : ” aboutCtrl”

});

.when(“/contact”, {

templateUrl : ” contactUs.html”,

controller : ” contactCtrl”

})

});

app.controller(“aboutCtrl “, function ($scope) {

$scope.msg = “Welcome to about us page….!!!”;

});

app.controller(“contactCtrl “, function ($scope) {

$scope.msg = ” Welcome  to contact page…!!!”;

});

Tags
About The Author
Leave Comment
  1. 1

    Bablofil

    Thanks, great article.

    Reply

Leave a reply

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