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>