Click here to Skip to main content
14,328,819 members

AngularJS ui-router

Rate this:
4.78 (14 votes)
Please Sign up or sign in to vote.
4.78 (14 votes)
12 Nov 2014CPOL
Create simple ui-router using AngularJS

Introduction

I am a newbie to AngularJS world, and working with it for couple of months and still learning the new things and the power of the AngularJS Framework. It is really amazing and the good stuff is that you can do quickly, what you feel like doing in UI side, it is very easy to do with couple of lines of code.

One of the thing in AngularJS is impressed me is the routing Framework. Hope this would help those who would like to start with it (AngularJS Ui-router).

We will see the Simple example about what is Routing and how to configure and work with it.

If you want to have quick view and to jump to action, please see here 

Background

Those who are having the background working with Microsoft .NET MVC they are more familiar with the Architectural Pattern MVC (Model-View-Controller). In this the server side code will be handled by the Controller and Model can be your Domain Entity which serves its purpose of binding the data in View.

The same Concept of MVC pattern is been used with the UI layer side, No server code as such. Just assume that you have couple of Javascipt file where it serves the purpose of MVC with the power of AngularJS.

One of the greatest feature in Microsoft MVC is that the way to navigate from one page to another page, which is been controlled by the routing engine. The same concept is availble in AngularJS we call it as Routing Framework / Routing Service.

Note: We are not going to see Angular Architecture and MVC in this article. The focus is on AngularJS ui-router module.

Ok, We will see Routing Engine (ui-router) in AngularjS. We have two version of Routing Framework, i am not going to talk about the both, let us focus on the UI-ROUTER.

Page Navigation

Usually we will have the navigation of pages as shown below in high-level.

Image 1

Let us assume the basic flow of pages from one HTML Page to another HTML Page. In AngularJS world we call it as PartialViews. For all the pages we have an starting location/ starting page. Let us have it as Main.HTML.

Now the flow would look like as shown below.  What does it mean is, we are going to have the container page where the other pages are hosted into it, here the container page is Main.html.

Image 2

Hence, using the AngularJS Routing Framework we are going to navigate from one page to another page.  Ok. Let us stop with this "text" explanation. Get into "action" now. :)

Using the code

Ok, To start with what we do is, using Visual Studio, we create Empty web application, and then in that we will create totally 4 HTML files as shown below.

Note: We will be using the 1.2 version of AngularJS, while i write this article, AngularJS 1.3 was already released.

1. Main.html,

2. Page-1.html

3. Page-2.html

4. Page-3.html

 

Main.html

The content of the Main.html file will look like as shown below

<!-- Main.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui-router.js"></script>
    <script src="App.js"></script>

</head>
<body data-ng-app="myApp">
    <h1>AngularJS Ui router - Demonstration</h1>
    <h4>This is the Home Page</h4>    
    <div data-ui-view=""></div>
</body>
<html>

Ok we see one by one what the main.html page does.

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.js"></script>

Hope you would have noticed from the above scripts section, we have to add / use NuGet to install the angular ui-router into your project, and then reference the path in your scripts section.

Yes, the ui-router in AngularJS is separate module, we need to add separately.

<script src="App.js"></script>

Now, the first two scripts file you aware, the next App.js file i will talk about later.

<h1>AngularJS Ui router - Demonstration</h1>

In the body section, we have the <h1> tag where it will be like Master page in that it will show the heading as "AngularJS Ui-router Demonstration" for each page, as we navigate.

Another important thing you can see the next line of <h1> tag is

<div data-ui-view=""></div>

This is the placeholder for the ui-router engine, to inject all the partial views which we are going to declare into the route configuration. We see that after creating rest of the HTML partial views.

Page-1.html

To make things very simple i am going to create some sort of static content into the Page-1 to Page-3 HTML Pages. Now the Page-1.html content will look like this.

<div>
    <div style="height: 400px">
       <h2>Partial view-1</h2>
       <p>The partial view of the content goes here... 
    </div>
    <div ui-sref="page2"><a href="">Page 2</a></div>
</div>

Note that the content of the Page-1 is not having any HTML and BODY tags, this is because as i said earlier this is partial view which is going to get rendered into the placeholder what we declared in the main.html page.

<div ui-sref="page2"><a href="">Page 2</a></div>

The above line is navigation Link from Page-1 to Page-2. So when you click on the link "Page 2" you will be directed to the Next page. This done by the <ui-sref> tag.

Lets move on. The other page contents will look similar except some minor changes. Lets see what those are.

Page-2.html

Now the Page-2.html content will look like this.

<div>
    <div style="height: 400px">
       <h2>Partial view-2</h2>
       <p>The partial view of the content goes here... 
    </div>
    <div ui-sref="page3"><a href="">Page 3</a></div>
</div>

Note from the above code compared to Page-1.html is we have just changed the ui-sref state name and the <a> tag text.

Page-3.html

Now the Page-2.html content will look like this.

<div>
    <div style="height: 400px">
       <h2>Partial view-3</h2>
       <p>The partial view of the content goes here... 
    </div>
    <div ui-sref="page1"><a href="">Back to Page 1</a></div>
</div>

Note from the above code compared to Page-2.html is we have just changed the ui-sref state name and the <a> tag text. Note from this page we are navigating back to the first page Page-1.html

Ok, we are almost done with declaring the HTML pages and with its content. Now lets dive into the angularjs portion of state engine.

Now, in the root of the Visual Studio empty project, create a JavaScript file, and name it as App.js.

App.js

This is the file which is going to have the AngularJS application module declared in it. Also the state navigation declared.

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.when("", "/page1");

     $stateProvider
        .state("page1", {
            url: "/page1",
            templateUrl: "Page-1.html"
        })
        .state("page2", {
            url:"/page2",
            templateUrl: "Page-2.html"
        })
        .state("page3", {
            url:"/page3",
            templateUrl: "Page-3.html"
        });
});

Ok, let us see the configurations one by one.

var myApp = angular.module("myApp", ['ui.router']);

This line delcares the AngularJS module and the 'ui-router' module injected into it.

myApp.config(function ($stateProvider, $urlRouterProvider) {

The above line is the state routing configuration which will be declared using the .config function. the $stateProvider and $urlRouterProvider are the services which are available to handle the state navigation. The state navigation declaration has the following parameters,

stateName, UrlName, Template or TemplateURL and the Controller.  (We are not using controller for this example)

 $stateProvider
        .state("page1", {
            url: "/page1",
            templateUrl: "Page-1.html"
        })

So as per our declaration, the "page1" is the state name and the "/page1" is the URL which you see during the navigation in the address bar. The templateUrl is the partial view which is going to be displayed when we do the navigation.

$urlRouterProvider.when("", "/page1");

Also note that the above lines gives you the default view displayed during the load, which is nothing but the first partial view which the placeholder will have in the main.html

Like this we have delcared the routes for all the pages, now that we are telling the route/state configuration when we do the navigation. Now, AngularJS knows what are the partial views available to navigate and which one to start at the beginning, but how to navigate from one page to another page.

Yes, you are right, this what we have already declared in the page-1.html to navigate to other pages. (Note: We have different ways of navigations, ui-sref is one of the way). As i said earlier, the page-1 has the content to navigate. Note that we are using the state names to navigate from one view to another view.

<div ui-sref="page2"><a href="">Page 2</a></div>

Now, we see the entire content of the files what we created so far.

<!-- Main.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui-router.js"></script>
    <script src="App.js"></script>
</head>
<body data-ng-app="myApp">
    <h1>AngularJS Ui router - Demonstration</h1>
    <h4>This is the Home Page</h4>
    <div data-ui-view=""></div>
</body>
<html>
<!-- Page-1.html -->
<div>
    <div style="height: 400px">
       <h2>Partial view-1</h2>
       <p>The partial view of the content goes here...</p> 
    </div>
    <div ui-sref="page2"><a href="">Page 2</a></div>
</div>
<!-- Page-2.html -->
<div>
    <div style="height: 400px">
       <h2>Partial view-2</h2>
       <p>The partial view of the content goes here...</p>
    </div>
    <div ui-sref="page3"><a href="">Page 3</a></div>
</div>
<!-- Page-3.html -->
<div>
    <div style="height: 400px">
       <h2>Partial view-3</h2>
       <p>The partial view of the content goes here...</p> 
    </div>
    <div ui-sref="page1"><a href="">Back to Page 1</a></div>
</div>
// App.js 

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.when("", "/page1");

     $stateProvider
        .state("page1", {
            url: "/page1",
            templateUrl: "Page-1.html"
        })
        .state("page2", {
            url:"/page2",
            templateUrl: "Page-2.html"
        })
        .state("page3", {
            url:"/page3",
            templateUrl: "Page-3.html"
        });
});

Now, let us view the main.html page in the browser, we get to see the below output.

Image 3

When you click on the link "Page 2" it takes to the second page...

 

Image 4

 

Points of Interest

 

NA

History

NA

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

KameshKannan
Software Developer (Senior)
India India
No Biography provided

Comments and Discussions

 
QuestionCode is wrong man, I wasted 1 hour to identify the issue. Please test locally and then upload online. Pin
appalanaidu Aug201122-Mar-19 19:38
memberappalanaidu Aug201122-Mar-19 19:38 
QuestionGood Post. Very easy to understood Pin
Syed Shakeer Hussain25-Aug-16 22:56
memberSyed Shakeer Hussain25-Aug-16 22:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 12 Nov 2014

Tagged as

Stats

69.6K views
14 bookmarked