Skip to main content

Routing with UI-Router and Angular.js

In Today's world, Angular.js is one of best JavaScript framework available to create Single page applications. It's provides some great features and with the help of this features we can built great interactive apps. In any single page application routing is very important as in most of the time single page application will not have full post backs. So routing will be very important to give feel like normal page application and sometimes proper routing will increase search engine ranking also.

So in this blog post we are going to learn how we can create routes in Angular.js application with help of UI-Router.

What is UI-Router:


UI-Router is a routing frame work created Angular.js team and its not a part of Angular.js But it built on top of Angular.js. You can say it's a 3rd-Party module and is very powerful. It support most of things that we can do with ng-route and also do many other stuff that is not possible with ng-route.
You can find more information about UI-Router at following link.

https://github.com/angular-ui/ui-router
http://angular-ui.github.io/ui-router/site/#/api/ui.router

Here are few features that is provided by UI-Router.
  1. UI-Router allows nested views and multiple views
  2. It allows you to strong type linking between state based on state names.
  3. State allows you to map and access different information about different states and you can easily pass information between states via $Stateparams parameter.
  4. With states approach your views are not tied to the URL and it is tied to states. Which can be very useful in large applications as you can change UI part without changing URLs.
  5. You can also change Partial UI of application which is not possible with ng-route.

So what are we waiting for let's create a sample application with UI-Router and Angular.js.

Sample application with UI-Router:


I'm going to use visual studio for creating this sample application. So that we can use IIS local express to host this application. I'm going to create asp.net web application.

angular-Ui-route-demo-project

We are going to use empty asp.net web forms application as we are not going to use asp.net code here it's a simple HTML page application to demonstrate the power of UI-Router.

empty-web-application-angular-ui-route-demo
We are going to create sample application with 3 pages.
  1. Home
  2. About Us
  3. Contact Us

So for that we need three html pages which will acts as partial views just like ASP.NET MVC partial views or user control in ASP.NET Web Forms.
I'm going to create a very basic HTML pages with following code.
home.html page code:
<h1>Home</h1>
About Us HTML page code:
<h1>About us page</h1>
Contact Us HTML page code:
<h1>contact us </h1>
And now we are going create index.html and following is a code for that.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Angular UI Router Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="routerDemoApp">
    <ul >
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="aboutus">About us</a></li>
        <li><a ui-sref="contactus">Contact us</a></li>
    </ul>
<div>
    Angualr UI Router Demo
</div>
<div>
    <div ui-view></div>
</div>
</body>
</html>
If you see above code you can see I have added angular.js and angular-ui-router-min.js JavaScript files from the cloud flare CDN and then I have created a ng-app "routerDemoApp" with body tag of html page. I have used UL and Li ta and UI-Sref to create link for our routes. Here also notice ui-view tag in one of div where html pages will be rendered in this div.

So now basic infrastructure is ready now its time to create JavaScript code for our application. So lets create app.js file and write code like following.
// JavaScript source code
var routerDemoApp = angular.module('routerDemoApp', ['ui.router']);

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

    $urlRouterProvider.otherwise("/home");

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })
        .state('aboutus', {
            url: '/aboutus',
            templateUrl: 'aboutus.html'
        })
        .state('contactus', {
            url: '/contactus',
            templateUrl: 'contactus.html'
        });

});
So if you see above code carefully, Here I have created a angular app module called routerDemoApp and I have injected dependency of UI-Router. Then in config function we have created different states for Home, About Us and Contact Us. You can see I have passed two parameter url and template url for each state with respective html pages. Also I have written otherwise function which will return home state by default.

Now let's run this application in browser.

demo-application-browser-ui-router-angularjs

So by default Home page is loaded as you can see and in URL also you have /home now when you click on About us it will load about us page like following.

about-us-demo-page-in-browser-ui-angular-js

So it's very easy to create routing with Angular UI-Router in future post we will see how we can use nested view and multiple view.
You can find complete source code of this application at github on- https://github.com/dotnetjalps/AngularUIRouter
Hope you like it. Stay tuned for more!.

Comments

Popular posts from this blog

How to create Rest API(Web API) with ASP.NET Core 1.0

Recently Microsoft has released ASP.NET Core 1.0 RC2, I am getting lots of request from readers that about creating Web API. So I thought it will be a good idea to write a blog post about how to create Rest API(Web API) with ASP.NET Core 1.0.

So let’s get started via creating an ASP.NET Core 1.0 Web Application like following.



Once you click on ASP.NET Web Application, It will ask whether you need to create Web Application or Web API application. We are going to Web API so I am going to select Web API Application like following. Please note that in ASP.NET Core 1.0 there is no separate libraries or DLLs required for creating web APIs. This is just a project template.



Now once you click on OK It will create a Web API application with default values controller and program.cs.  As you know Program.cs is now starting point for the ASP.NET Core 1.0 application so It contains all the required configuration and startup items. Following is a code for that.
using System.IO; using Microsoft.Asp…

How to use migration with Entity Framework Core

Entity framework core is  the lightweight, extensible and cross-platform version of Entity Framework. Before some time, Microsoft has Released a new version of Entity Framework RC2. I have written a couple of blog post about Entity framework code first migration earlier for Entity framework 6.0. So there was a couple of request coming for writing a blog post about Entity Framework Core RC2 migration. So I thought it will be a good idea to give an overview how database migration works in Entity Framework Core RC2. This post will cover a basic scenario where we are going to create the database with existing ASP.NET Identity migration and then we are going to create a new model and have that migration applied in the database.

How to use Entity Framework Migrations: Let’s get started, To demonstrate entity framework core migrations, I am going to create a sample asp.net core web application like following.



Once we select asp.net core application it will appear the following dialog.



Now w…

Solution: gulp is not recognized as internal or external command- Visual Studio

Recently, After Upgrading to the newer version of Gulp, I was getting this error.  After doing lots of  finding online and in my system I was able to figure out that Modules like Gulp does not installed to the path. So when you try to run it from the command line it was showing below error.
gulp is not recognized as internal or external command How to solve : gulp is not recognized as internal or external command To solve this error we just need to create a new environment variable and set the NPM modules path there.

To create an environment variable,  Right click My Computer/ This Pc and click on properties.  It will open following windows.



Go to Advance System Settings and it will open system properties windows like below.



Click on Environment Variables it will open an environment and system variables windows like below.



Click on new System variable and put NODE_PATH in system variable name and %AppData%\npm\node_modules into the variable value like below.



Click on Ok. That’s it. N…