AngularJS - Routes and Controllers

by derkoe

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myapp">
    <div ng-view></div>
    <a href="#" target="_blank">Open in Tab/Window</a>
    <script type="text/ng-template" id="/list.html">
        <h4>List</h4>
        <a href="#/detail/1" class="btn">One</a>
        <a href="#/detail/?id=2" class="btn">Two</a>
    </script>
</div>

JavaScript

var myapp = angular.module('myapp', []).config(function ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: '/list.html'
    }).when('/detail/', {
        redirectTo: function (params, path, query) {
            return '/detail/' + query.id;
        }
    }).when('/detail/:id/', {
        template: '<h4>Detail {{id}}</h4><a ng-click="back()" class="btn">Back</a>',
        controller: 'DetailCtrl'
    }).otherwise({
        redirectTo: '/list'
    });
});
myapp.controller('DetailCtrl', function($scope, $routeParams, $location) {
    $scope.id = $routeParams.id;
    $scope.back = function() { $location.path('/list') };
});