Angular Using RouteProvider

Testing whether multiple modules can define routes for an angularJS application

by Yashwanth M

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/flatly/bootstrap.min.css">
<script src="//code.angularjs.org/1.2.1/angular-route.js"></script>
<div class="container" ng-app="myApp">   
    <div class="page-header">
        <h3>AngularJS Using Route Provider</h3>
    </div>
    <div ng-view></div>
    <!-- Templates -->
    <script type="text/ng-template" id="/views/hello.html">
        <div class="jumbotron">
            <h2>{{message}}<small ng-show="subMessage"> {{subMessage}}</small></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis          
                <a ng-click="setTaunt()">vestibulum</a>. Donec ullamcorper nulla non
                metus auctor fringilla.
            </p>
            <a href="#/secondary">Other stuff</a>
        </div>
    </script>
    <script type="text/ng-template" id="/views/secondary.html">
        <div>
            <h2>This is a second page</h2>
            <p ng-repeat="message in messages track by message.id">{{message.text}}</p>
            
            <button class="btn btn-inverse" ng-click="addMessage()">Don't Click</button>
        </div>
    </script>
</div>

JavaScript

angular.module('myApp', ['ngRoute', 'subPage'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/hello', {
        templateUrl: '/views/hello.html',
        controller: 'HelloController'
    })
    .otherwise({
        redirectTo: '/hello'
    })
}])
.controller('HelloController', ['$scope', function($scope){
    $scope.message = 'Hello there';

    $scope.setTaunt = function() {
        $scope.subMessage = 'You poop head.'
    }         
}]);
         
angular.module('subPage', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/secondary', {
        templateUrl: '/views/secondary.html',
        controller: 'SecondaryController'
    })
}])
.controller('SecondaryController', ['$scope', function($scope) {
    $scope.messages = [];

    var counter = 0,
        messageList = ['why u do dis', 'seriously?'],
        nextMessage = function(){
            if (counter == messageList.length) {
                counter = 0;
            }
            return messageList[counter++];   
        };

    $scope.addMessage = function(){
        $scope.messages.push({
            id: $scope.messages.length, 
            text: nextMessage()
        });
    };
}]);