Introduction

Hello Everyone!

Today I am here to tell you about another interesting service which is AngularJS routing. We use AngularJS routing service mostly on single web page applications. It helps to create multiple views on a single page and load them when selected.

$routeProvider it will helps to create and configure or route. So for handling this service we need some important files in our project. As you all know we used to add the library source of attaches our library file, But this time we need another file for AngularJS routing service which is “angular-route.js”. You need to download this particular file from AngularJS website. How to download it? It is so simple click on this link “AngularJS” , select the download option and then click on “browse additional modules”. There will come a list of files. select this file and download it.

Now let’s do the implementation on AngularJS routing service.

Outlines

  • Important Points
  • Library Source
  • JavaScript
  • HTML Pages
  • AngularJS routing controller file
  • AngularJS routing module file
  • AngularJS routing
  • Precautions
  • Conclusion

Description

These are the main outlines on the basis of which we will perform AngularJS routing service implementation. There is an important thing to discuss that in this project I shall make two new folders. One will contains javascript files while the other will contain my HTML pages. If you don’t know how to make a new project then visit my previous lecture “AngularJS Development – Hello Word“. Because for AngularJS routing service we shall make two files of javascript, one will contain the module while the other will contain the controller. There will be two library files, one file is the same that we used in our previous lectures while the other is the one which I asked you to download.

We will make three HTML pages for this. While the fourth HTML page is our index page. Below is the view of the pages.

AngularJS routing

Take a closer look on this image. You can see two folders with the names “js” and “templates”. There is also an index file with them. As you can see there are four files inside the js while three files inside the templates.

Important Points

  • ng-repeat

This directive gives the list of values stored. It repeats the items. This instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item. I deals like a collection and runs like a for each loop. I shall use it to generate a multiple set of label at run time.

  • ng-model

This ng-model directive is also used many times and I explained it earlier. Those who don’t know, then visit my previous lecture “AngularJS Development – Hello Word“.

  • ng-view

When we want to load a particular content page inside this particular application. This directive will help us to perform this function.

  • javascript

As you know AngularJS is the library of javascript. So It requires so script to handle it’s code. It contains a module and a controller function for controlling this module. Inside the controller function a new function containing the logic. $scope will be passed in this function for writing the logic.

  • ng-change

This is a directive of AngularJS and I defined it in my previous lecture “AngularJS ng-change directive use with simple script

  • ng-app

It is the main directive required for every app of AngularJS. I described it in previous lecture “AngularJS Development – Hello Word“.

  • $scope

It is a predefined object of AngularJS as I explained it in my previous lecture “Controller directive in AngularJS with scope inheritance“.

  • $routeProvider

This service off AngularJS will help to create and configure or route. This is the today’s topic, we will be performing this service.

 

Library Source

As you all know that we need the library source of AngularJS to make our code work properly. Below are the scripts containing the library sources to make AngularJS routing service work.

Description

The above code shows the library source which we need for AngularJS routing service. There are four files, one contains my controller function while one contains my module. While the other two are library files.

HTML Pages

There are four HTML pages needed for AngularJS routing service.

The below code is showing the index page of My project. Take a closer look and make yourself clear.

Description

As you can see I just added three links inside my list tag. these are the pages defined below. On adding the directives of AngularJS the code will be as below. Take a closer look.

Description

As you can see I just added two directives of AngularJS ng-app and ng-view. As you know ng-app directive make the owner while ng-view directive will help to view.

Page 1

This is my first page of AngularJS routing service. Take a closer look.

Description

It contains a simple form which contains a heading tag, a label tag and a div tag.  My label tag contains an expression. Now I shall add the properties and directives of AngularJS inside this file. See the below code.

Description

As you can see I applied ng-repeat which will do a loop type of thing on the basis of the expression inside it. The ng-model will do binding. I passed my favorite languages inside it. The ng-value will take the value from the list on the selection.

Page 2

The second page of AngularJS routing service is also so simple as you can see. This is one of my previous lecture. I just copied and pasted from that. Now just add the required directives.

The below code shows the required properties and directives needed for this page. Take a closer look.

Description

I added ng-model and ng-change directives only and added some expressions for displaying. Actually on click the checkbox will show you the counter. I explained it in my previous lecture.

Page 3

This is the third page of AngularJS routing service it only contains a heading tag.

Description

As you noticed except my index page, all the other pages don’t have proper HTML tags. The only have div tags. This is because we don’t needed the other tags, these pages will appear inside the body tag of index page. We can say we are just changing the body view on the selection of our pages.

AngularJS routing module script

This is a simple module, the new thing is that I passed ngRoute inside it which will make $routeProvider to work. Take a closer look.

Description

As you all know the pattern of make module. I gave it a name as “myapp” an passed a predefined object ngRoute, this will perform injection function. After this I have configure my route for the application so I used a predefined method “config”. I passed $routeProvider in side this function which will help to configure our route.

Now with the help of $routeProvider I made 4 methods. The “when” method contains the name of my route and possesses two properties. One is the URL of the route while other is the association of this page with the controller.

Similarly the other methods will be same like this. But the last method I made is for default, which means when no page is selected the page I passed inside it will appears.

AngularJS routing controller script

The below script only contains the controller function needed for AngularJS routing service. Take a closer look below.

Description

As you noticed that the above script contains two controllers. Why is that so? This is because I needed to control two pages functionality “page 1” and “page 2”.

My first controller is dealing with the functionality of favorite languages while the other one is dealing with the checkCounter on every click.

The Images view of AngularJS routing

Below are the images which shows the detail description of our today’s app.

a) Main view

AngularJS routing

The above image shows the main view of our AngularJS routing service application. As you can see there are three routes shown in the picture above and it is displaying route 3 as default.

b) Page 1

AngularJS routing

The above picture is showing us the view of first page after clicking route 1.

AngularJS routing

As you can see this the the view of the same page but it is showing the value which is checked as favorite.

c) Page 2

AngularJS routing

The above picture is showing the page 2 when the route 2 is selected. You can see that it works in the below image.

AngularJS routing

As you can see the counter is showing 2 value which means that the checkbox is selected twice.

Description

These are the main images view of our today’s AngularJS routing service. Hope you all got that.

Summery

These are the required pages we needed for AngularJS routing service. I can’t show you the full code in one tag because the have to be on different pages and we need to combine these pages together. So just copy these and paste them into your pages.

Precautions

The most important thing is that place “angular-route.js” file after the main library file of AngularJS. Otherwise the code will not work. The names of functions or the directives are case sensitive. Use ; at the end of every statement in script.

Conclusion

So what do we learned today? We learned how to use AngularJS routing service to configure our page. We learned how to attach different pages and also learned how to divide script in different pages. We separated controller function from module and combined them inside the config function. Then we called all the pages on a single index page. If something is missing do inform us.