Как определить контроллер в компонентно-управляемой архитектуре с помощью 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 конфигурации.

---

Также обратите внимание, что вам не нужно использовать ng-controller в вашем View.html, Это автоматически делается, когда вы говорите controller: 'ViewController' при изменении состояния.