Off the Ridge code

Off the Ridge Code Newsletter

Search

How to Angular – Part 6 – Routing in AngularJS

Published May 18, 2015 in AngularJS - 1Comments

Routing in AngularJS

In this post, I’m going to talk a little bit about routing in AngularJS and add a new route to our existing application. As a reminder: This is a sample application that we’ve been creating since Part 1 of How to Angular. The current version runs inside WebStorm. If you don’t own a copy of WebStorm, I highly encourage you to download a 30 day trial.

Why do we need Routing in AngularJS?:

As the application grows, we may to need to provide multiple views and send the user to a different page with details. AngularJS is a SPA (Single Page Application) centric framework and such all the calls to the server should be done for the purpose of retrieving data or messaging. Therefore, we need to map each http request or route to a particular view. This will logically divide our SPA into parts and keep it maintainable. Notice that each ‘view’ is actually a partial view a not a full html page.

Steps to add routing to the existing application:

Step 1.

Open app.js file and modify as follows:

var app = angular.module('myfirstangularapp', ['ngRoute']).
    config(function($routeProvider){
      console.log("here");
      $routeProvider.when('/view',
          {
            templateUrl:'app/templates/view.html',
            controller:'MyFirstController'
          });

      $routeProvider.otherwise({redirectTo: '/view'});
    });
We injected a dependency on the ngRoute module which includes the $route service and will provide routing services for our application.
In turn, the $route service includes the $routeProvider that is used to configure the routes.

There are two methods on the $routeProvider:

1. when(path, route) – takes the path that is matched against $location.path and route that will be assigned to $route.current.

2. otherwise(params) – executes if no route definition is matched.

Step 2.

1. Create a ‘templates’ directory under the ‘app’ directory.
2. Create the view.html file under the ‘templates’ directory.

Routing-in-AngularJS

Step 3.

Cut out the entire code fragment between

<div class="container"></div> 
out of index.html and paste it inside the view.html file under the templates directory.

Step 4.

Remove the ‘ng-controller=”MyFirstController”‘ directive from the div inside the index.html page.

Step 5.

Add ng-view directive to index.html. It basically replaces the fragment of that html that you’ve removed in step 3 as follows:

  <div class="container">
    <ng-view></ng-view>
  </div>

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file.

After you perform Steps 3 and 5. This is what your View.html partial page should look like:

<div>
    <p class="text-muted">
        1. Lower case filter:</p>
    <p class="text-info">First Name : {{data.firstName | lowercase}}</p>
    <hr />
    <p class="text-muted">
        2. Upper case filter</p>
    <p class="text-info">First Name : {{data.firstName | uppercase }}</p>
    <hr />
    <p class="text-muted">
        3. Date filter: (mm)</p>
    <p class="text-info">Start Month : {{data.startDate | date:'MM'}}
    </p>
    <hr />
    <p class="text-muted">
        4. Custom filter to remove all spaces:
    </p>
    <p class="text-info">{{data.dashes | removeAllSpaces}}</p>
    <p></p>
    <hr />
    <div>
        <img ng-src="{{getGravatar(data.email)}}" />
    </div>
    <hr/>
    <div>
        <my-input/>
        <label>Github return code:
            <h4 ng-bind="status"></h4>
        </label>
    </div>
    <div>
        <pre>{{user | json}}
        {{error}}
    </div>
</div>

This is what your index.html partial page should look like:

<!DOCTYPE html>
<html ng-app="myfirstangularapp">

<head>
    <meta charset="utf-8"/>
    <title>AngularJS - Sebastian Brukalo</title>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet"
          href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
    <script data-require="bootstrap@*" data-semver="3.3.2"
            src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<div class="container">
 <ng-view></ng-view>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/controllers.js"></script>
<script src="app/filters/filters.js"></script>
<script src="app/services/services.js"></script>
<script src="app/directives/directives.js"></script>
</body>

Step 6.

Notice that I’ve added an angular-route.min.js library reference to the index.html page. The reason is that ngRoute is not included inside the angular.min.js library.

If we’ve done everything correctly, then, the application should still work and function as before with the difference that now the main view is encapsulated into its own partial view.

Full code example in WebStorm.

Happy coding!
-Sebastian

  • Kevin O’Shaughnessy

    Hi Sebastian,

    Thanks for sharing this. I mostly work with Visual Studio, but I think Web Storm is another great IDE. You can be very productive with it, especially when using Angular JS.