javascript - 如何使用 ui-router 在组件驱动架构中定义 Controller ？

Question

如何使用 Ui-Router 在组件驱动架构中定义 Controller ？

状态包含在 App.js 中， Controller 在各个组件文件夹中定义。

$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。在各自的文件夹中创建组件模块并将 Controller 附加到它们

如果模块和 Controller 位于同一个文件中，您可以执行此操作:

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

或者，如果 Controller 位于另一个文件中，您可以像这样获取对模块的引用:

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

<强>2。将您的组件注入(inject)到主模块中:

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

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

<小时/>

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