Как определить контроллер в архитектуре, управляемой компонентами, используя 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

Если вы имеете в виду под "Component Driven Architecture" тот факт, что ваше приложение имеет независимые модули в отдельных папках компонентов,

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' при изменении состояния.