April 13, 2016

Routing in AngularJS using UI-Router

Routing in AngularJS using UI-Router

AngularJS provides a great way to make single page applications. When creating single page applications, routing will be very important. We want our navigation to feel like a normal site and still not have our site refresh.

We’ve already gone through Angular routing using the normal ngRoute method.

Today we'll be looking at routing using UI-Router. Nesting route is possible in UI-Router that is a big advantage in it.

The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.

With this approach, your views and routes aren’t tied down to the site URL. This way, you can change the parts of your site using your routing even if the URL does not change.

I have explained writing controllers, views in my ngRoute post. It is same, only the routing and index page changes are there which i will explain you here.


<html ng-app="app">
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="style/main.css">
   <div class="container">
      <nav class="navbar navbar-inverse">
         <div class="container-fluid">
            <div class="navbar-header">
               <ul class="nav navbar-nav">
                  <li><a ui-sref="home">Home</a></li>
                  <li><a ui-sref="page1">Page 1</a></li>
                  <li><a ui-sref="page2">Page 2</a></li>

      <div ui-view></div>

   <script src="libs/angular/angular.min.js"></script>
   <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
   <script src="app.js"></script>
   <script src="controller/controller.js"></script>

There’s our HTML file. We will use Bootstrap to help with our styling. Notice that we also load up ui-router in addition to loading Angular. UI Router is separate from the Angular core, just like ngRoute is separate.

When creating a link with UI-Router, you will use ui-sref. The href will be generated from this and you want this to point to a certain state of your application. These are created in your app.js.

We also use <div ui-view></div> instead of ngRoute's <div ng-view></div>

Let’s start up our Angular application now in app.js.


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

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

      .state('home', {
         url: "/",
         templateUrl: "partials/home.html",
         controller: "HomeCtrl"
      .state('page1', {
         url: "/page1",
         templateUrl: "partials/page1.html",
         controller: "Page1Ctrl"
      .state('page2', {
         url: "/page2",
         templateUrl: "partials/page2.html",
         controller: "Page2Ctrl"

That's it your done.


No comments:

Post a Comment

Popular Posts