How to Angular JS- Route configuration in Angular-seed

AngularJS routes used to set up different URLs for different content in your application. If you need to go different pages in your application, but you also need the application to be a Single Page Application with no page reloading, you can use the ngRoute module. In this guide, we will discuss route configuration routes and create required controllers in Angular JS.

Angular-seed Route Configuration

AngularJS routes allow you to render different content depending on what route is chosen. A route is specified in the URL after the # hashtag.

1

2

3

4

5

6

http://example.com/index.html#about

http://example.com/index.html#contact

When the browser loads these URLs, the same page will be loaded but AngularJS will look at the route and decide what HTML template to show. let’s look at the working AngularJS route on “view1.js” from view1 folder.

view1.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

'use strict';

angular.module('myApp.view1',['ngRoute'])

.config(['$routeProvider',function($routeProvider){

$routeProvider.when('/view1',{

templateUrl:'view1/view1.html',

controller:'View1Ctrl'

});

}])

.controller('View1Ctrl',[function(){

}]);

We will learn each part of the above route in the Angular-seed application in the following sections.

The "use strict"; defines that JavaScript code should be executed in “strict mode”. Next, we have to use the ngRoute as a dependency in the application module.

1

2

3

4

5

angular.module('myApp.view1',['ngRoute'])

The second thing to notice is the applications AngularJS module myApp.view1 which declares a dependency on the AngularJS route module.

Now our Angular application has access to the route module, which provides the $routeProvider. The $routeProvider is used for configuring routes.

1

2

3

4

5

6

7

8

9

10

.config(['$routeProvider',function($routeProvider){

$routeProvider.when('/view1',{

templateUrl:'view1/view1.html',

controller:'View1Ctrl'

});

}])

Using $routeProvider , you can control what page to render when a user clicks a URL link. The $routeProvider is what creates the $route service.

The when() method gets hold of a route path and a JavaScript object as parameters. Here, /view1 is the route path.

The JavaScript object contains two elements named templateUrl and controller. The templateUrl decide to which HTML template is to load and render. The controller element tells which of your controller functions that should be used with the HTML template. Here, we use View1ctrl1 controller.

1

2

3

4

5

6

7

.controller('View1Ctrl',[function(){

}]);

We add the controller’s constructor function to the module using the .controller() method which takes controller name and a function. This will make controller’s constructor function out of the global scope. The controller functions can get access to route parameters via the AngularJS using parameters.

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.