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

Question

How to define a controller in component driven architecture using Ui-Router?

States are included in App.js and Controllers are defined in individual component folders.

$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

If you mean by "Component Driven Architecture" the fact that your application has independent modules in individual component folders,

1. Create your component modules in their respective folders and attach the controllers to them

You can either do this if both the module and the controller is in the same file:

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

Or you can get the reference to your module like this if the controller is in another file:

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

2. Inject your components in to your main module:

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

This way your component controllers become available in your main module and $stateProvider configuration.

---

Also note that you don't have to use ng-controller in your View.html . That is automatically done when you say controller: 'ViewController' when changing state.