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.
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.
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>
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.
When you click on the link "Page 2" it takes to the second page...
Points of Interest
NA
History
NA
