angularjs路由更改控制器

Question

我想使用Angular-route來更改頁面中使用的控制器
這是我的角度代碼的一部分

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
});

這是我的HTML的一部分

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

但是當我嘗試訪問http://localhost/project/category/upcoming或http://localhost/project/category/popular ，路由不起作用（未選擇或選擇控制器）

我錯過了什么？

Answer 1

嘗試這個

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

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

等等等

您能否同時解釋一下為什么要在同一頁面上使用不同的控制器？ 您為什么不使用兩個不同的部分來為即將到來的流行頁面創建兩個單獨的頁面？

或者，另一種方法是只使用相同的控制器，並使用適當的指令過濾結果，而不更改每次加載的內容。

Answer 2

必須提及ng-view，以便該指令是占位符，用於替換url更改時的視圖部分。

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