如何使用ui-router在组件驱动的体系结构中定义控制器？

Question

如何使用Ui-Router在组件驱动的体系结构中定义控制器？

状态包含在App.js中，而控制器在单个组件文件夹中定义。

$stateProvider.state('route1', {
    url:'/route1',
    views: {
      "ViewA": {
        templateUrl: 'View.html',
        controller: 'ViewController'
      }
    }
  })

---

(function(myApp) {

var ViewController = function($scope) {
    $scope.message='AngularJS'
};

ViewController.$inject = ['$scope','$http'];
myApp.controller('ViewController', ViewController);}(angular.module('myApp')));

---

<div ng-controller="ViewController" ><label> {{message}}</label>

Answer 1

如果您的意思是“组件​​驱动的体系结构”，即您的应用在各个组件文件夹中具有独立的模块，

1.在各自的文件夹中创建组件模块，然后将控制器附加到它们

如果模块和控制器都在同一文件中，则可以执行以下任一操作：

angular.module('myComponent', []).controller(function($scope) {
    //Code here
});

或者，如果控制器在另一个文件中，则可以像这样获取对模块的引用：

angular.module('myComponent').controller(function($scope) {
        //Code here
    });

2.将组件插入主模块：

angular.module('myApp', ['myComponent'])

这样，您的组件控制器就可以在主模块和$stateProvider配置中使用。

---

另外请注意，您不必在View.html使用ng-controller 。 当您说controller: 'ViewController'更改状态时为controller: 'ViewController'时，将自动完成此操作。