angularjs route change controller

Question

I want to use Angular-route to change the controller used in a page
This is some part of my angular code

var cat_list = angular.module('getCat', ['ngRoute']);

cat_list.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('category/upcoming', {
       controller: 'getUpcoming'
    })
    .when('category/popular', {
        controller: 'getPopular'
    });

    $locationProvider.html5Mode(true);
});

cat_list.controller('getUpcoming', ['$scope', function($scope, $routeParams) {
//controller code goes here
});
cat_list.controller('getPopular', ['$scope', function($scope, $routeParams) {
//controller code goes here
});

and this is some part of my html

<div class="row" ng-app="getCat">
    <div class="col-md-12">
        <!-- something happen in here -->           
    </div>
</div>

but when I tried to visit http://localhost/project/category/upcoming or http://localhost/project/category/popular the route is not working (no controller picked or selected)

did I miss something?

Answer 1

Try this

var cat_list = angular.module('getCat', ['ngRoute']);

cat_list.config(['$routeProvider', '$locationProvider', 

etc etc.

Could you also please explain why you want to use different controllers on the same page? Why dont you use two different partials to create two seperate pages for upcoming and popular?

Or, a different approach would be to just use the same controller, and filter your results using the appropriate directive, without changing the stuff that you load each time.

Answer 2

Have to mention ng-view, so that this directive is the placeholder to replace your view partials on url changes.

<div class="row" ng-app="getCat">
    <div class="col-md-12">
        <div ng-view></div> // ---- This is the thing you missed
    </div>
</div>