AngularJS Routes

AngularJS routing tutorial

Posted on November 10, 2013

Over the last few weeks I’ve been building my first AngularJs app. My Foray into JS MV* frameworks has been quite a steep learning curve but everything’s now starting to come together. Over the next few weeks I’m going to post what I’ve learnt so far starting with initial setup and routing.

Setting up your file structure

index.html
  - css
    -styles.css
  - js
    - app
      app.js
      controllers.js
      directives.js
      filters.js
      services.js
  - templates
    - home.html
    - articles.html

Setting up your base page

The first thing to do is setup your base page and include Angular JS. I also split directives, controllers, services, filters and the main app.js into separate files – In larger app’s this will make your code much easier to manage.

<!doctype html>
<html ng-app="myApp">
<head>
     <meta charset="utf-8" />    
     <title>
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>

<div ng-view></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/directives.js"></script>
<script src="js/app/controllers.js"></script>
<script src="js/app/services.js"></script>
<script src="js/app/filters.js"></script>
     
</body>
</html>

The ng-app=”myApp” directive on the HTML tag declares your app’s namespace.

The ng-view directive will render the template of the current route.

Define your app

Next, you need to open your app.js and define your app:

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

Setup your route templates

We’re going to set up two routes to begin with. One for your index page and one for an articles page.
Create two files within your templates directory call home.html and project.html and add some placeholder text so that we can check the routes are working e.g.

home.html

<section>
    <article>
        My home content
    <article>
<section>

articles.html

<section>
    <article>
        My articles content
    </article>
<section>

From here we need to setup the routes

Defining your routes

Open your app.js file and add the folllowing

myApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/', {
                templateUrl: 'templates/home.html',
            }).
            when('/articles', {
                templateUrl: 'templates/articles.html',
            }).
            otherwise({
                redirectTo: '/'
            });
}]);

This basically says that when the url matches / or /articles, load the relevant home or articles template into the ng-view element.
Otherwise() with redirect all other URLs back to the homepage.

The last thing to do is add a couple of links to your index page so you can navigate to these routes

<!doctype html>
<html ng-app="myApp">
<head>
     <meta charset="utf-8" />    
     <title></title>
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>

<nav>
    <a href="#/home">Home</a>
    <a href="#/articles">Articles</a>
</nav>

<div ng-view></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/directives.js"></script>
<script src="js/app/controllers.js"></script>
<script src="js/app/services.js"></script>
<script src="js/app/filters.js"></script>
     
</body>
</html>

And there we have the basis of your AngularJS app with two routes setup.
Download from GitHub