Simple Routing via $location

by Josh Carroll

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<!--  Ugly Hack to make AngularJS routing work inside of jsFiddle -->
<base href="/" />
<ul class="nav nav-pills" ng-controller="navController as navCtrl">
    <li><a href ng-click="navCtrl.goTo('/view1')">View 1</a></li>
    <li><a href ng-click="navCtrl.goTo('/good')">Good</a></li>
    <li><a href ng-click="navCtrl.goTo('/error')">Error</a></li>
</ul>
<div class="container">
    <div data-ng-view></div>
</div>

JavaScript

(function () {
    angular.element(document).ready(function () {
        var module = angular.module('demo', ['ngRoute']);

        module.controller('navController', ['$location', function($location){
            
            this.goTo = function(viewPath){
                $location.path(viewPath);
            };
        }]);
        
        module.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            $routeProvider
            .when('/view1', {
                template: '<div class="alert alert-default">I\'m a plain ole route</div>'
            })
            .when('/good', {
                template: '<div class="alert alert-success">I\'m a happy route!</div>'
            }).when('/error', {
                template: '<div class="alert alert-danger">I\'m a very bad route!</div>'
            }).otherwise({
                template: '<div class="alert alert-info">I\'m the default view</div>'
            });

            $locationProvider.html5Mode(true);
        }]);

        angular.bootstrap(document, ['demo']);
    });


}());