如何使用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'時，將自動完成此操作。