在 Angular JS 中使用一个控制器进行路由

Question

下面是使用 Angular JS 创建路由的简单示例：

var EmpApp = angular.module('EmpApp', [
    'ngRoute',
    'EmpControllers'
]);

EmpApp.config(['$routeProvider', function ($routeProvider) {

    $routeProvider.when('/list', {
        templateUrl: 'Employee/list.html',
        controller: 'ListController'
    }).
    when('/create', {
        templateUrl: 'Employee/edit.html',
        controller: 'EditController'
    }).
    when('/edit/:id', {
        templateUrl: 'Employee/edit.html',
        controller: 'EditController'
    }).
    when('/delete/:id', {
        templateUrl: 'Employee/delete.html',
        controller: 'DeleteController'
    }).
    otherwise({
        redirectTo: '/list'
    });

}]);

来源自here

如您所见，每个操作（添加、删除等）都有不同的控制器

我的下一个问题是：是否可以只创建一个控制器，但其功能与上述控制器具有相同的逻辑（只需创建控制器 EmpCtrl 并添加功能 add()、delete() 等）并将此功能应用于路线？示例：

$routeProvider.when('/list', {
        templateUrl: 'Employee/list.html',
        controller: 'EmpCtrl' <-- here somehow use EmpCtrl.list()
    }).
    when('/create', {
        templateUrl: 'Employee/edit.html',
        controller: 'EmpCtrl' <-- here somehow use EmpCtrl.add()
    })

如果可能的话，这是个好方法吗？

Answer 1

是的，这是可能的。但是我不会说这是一个好方法。控制器只是用来获取信息并将其绑定到作用域——仅此而已。如果两个州有相同的控制器，这意味着他们正在共享信息，并且可能只是一个 controller/state 而不是。

Answer 2

是的，可以创建一个 AngularJs 控制器并将其分配给列表、创建、更新和删除路由。

每个 CRUD 函数都可以存在于一个控制器中。但是 controller: 'EmpCtrl' <-- 这里以某种方式使用 EmpCtrl.list() 这是不可能的。 AngularJs 只需要一个控制器 class。

Answer 3

你说的是 prototypical inheritance。 Angular 的 $scope 继承了 prototypically。 ui-router.

示例

假设您的父状态如下：

.state(parent, {
  abstract: true,
  controller: function($scope) {
    $scope.parentMethod = function() {
      console.log("Found on parent")
    }
  }
})

上述父级的子状态如：

.state(parent.child, {
  controller: function($scope){
    $scope.parentMethod(); // Implementation at parent state
  }
})

对 parentMethod 的调用是从当前调用点 bubbled up 开始的。我们在 parent.child 状态下调用了 parentMethod()。在那里找不到。所以它上升到父级并尝试调用 parentMethod。一直持续到 $rootScope。当在任何地方都找不到该方法时，您会得到 Reference Error.

如果我的解释听起来令人困惑，google Prototypical Inheritance and Angular $scope and $rootScope。

在 Angular JS 中使用一个控制器进行路由

Use one controller for routing in Angular JS

javascript

angularjs

angular-routing