Angular.js настройка дочерних состояний ui-router из нескольких модулей

Я хотел бы реализовать установку, в которой я могу определить "корневое состояние" в основном модуле, а затем добавить дочерние состояния в другие модули. Это, потому что мне нужно состояние root для разрешения, прежде чем я могу перейти в дочернее состояние.

По-видимому, это должно быть возможно в соответствии с этим FAQ: Как настроить ui-маршрутизатор из нескольких модулей

Для меня это не работает: Ошибка. Недоступная ошибка. Нет такого состояния "приложение" из ngBoilerplate.foo

Вот что у меня есть:

app.js

angular.module( 'ngBoilerplate', [
  'templates-app',
  'templates-common',
  'ui.state',
  'ui.route',
  'ui.bootstrap',
  'ngBoilerplate.library'
])
.config( function myAppConfig ( $stateProvider, $urlRouterProvider ) {
    $stateProvider
        .state('app', {
            views:{
                "main":{
                    controller:"AppCtrl"
                }
            },
            resolve:{
                Auth:function(Auth){
                    return new Auth();
                }
            }
        });
    $urlRouterProvider.when('/foo','/foo/tile');
    $urlRouterProvider.otherwise( '/foo' );
})
.factory('Auth', ['$timeout','$q', function ($timeout,$q) {
    return function () {
        var deferred = $q.defer();
        console.log('before resolve');
        $timeout(function () {
            console.log('at resolve');
            deferred.resolve();
        }, 2000);

        return deferred.promise;

    };
}])
.run(function run( $rootScope, $state, $stateParams ) {
    console.log('greetings from run');

    $state.transitionTo('app');
})
.controller( 'AppCtrl', function AppCtrl ( $scope, Auth ) {
    console.log('greetings from AppCtrl');
});

foo.js

angular.module( 'ngBoilerplate.foo', ['ui.state'])

.config(function config( $stateProvider ) {
  $stateProvider
      .state( 'app.foo', {
        url: '/foo/:type',
        views: {
            "main": {
                controller:'FooCtrl',
                templateUrl: function(stateParams) { /* stuff is going on in here*/ }
            }
        }
      });
})
.controller( 'FooCtrl', function FooCtrl( $scope ) {
  console.log('deferred foo');
});

Как сделать эту работу или какие другие подходы я могу предпринять, чтобы что-то глобальное разрешалось перед каждым состоянием (без определения разрешения для каждого состояния)?

Ответы

Ответ 1

Я, наконец, выбрал этот подход, который выполняет мою работу:

// add all your dependencies here and configure a root state e.g. "app"
angular.module( 'ngBoilerplate', ['ui.router','templates-app',
'templates-common','etc','etc']);

// configure your child states in here, such as app.foo, app.bar etc.
angular.module( 'ngBoilerplate.foo', ['ngBoilerplate']);
angular.module( 'ngBoilerplate.bar', ['ngBoilerplate']);

// tie everything together so you have a static module name
// that can be used with ng-app. this module doesn't do anything more than that.
angular.module( 'app', ['ngBoilerplate.foo','ngBoilerplate.bar']);

а затем в вашем приложении index.html

<html ng-app="app">

Ответ 2

В документации модуль feature1 зависит от модуля application. Попробуйте

angular.module( 'ngBoilerplate.foo', ['ngBoilerplate'])

Ответ 3

Я бы просто прокомментировал, но у меня нет репутации. Я знаю, что это старо, но у меня была такая же проблема, и я столкнулся с этим. Одна вещь, с которой я смущен, - это приложение app.js, которое вы не импортируете "ngBoilerplate.foo", а ngBoilerplate.library. У меня была та же проблема, и моим решением было вставить вспомогательные модули в верхний модуль вместо их родителя.

Моя структура была модулем ('ngBoilerplate'), модулем ('ngBoilerplate.foo') и модулем ('ngBoilerplate.foo.bar') '. Я вводил ngBoilerplate.foo.bar в ngBoilerplate.foo, а $stateProvider терпел неудачу. Мне нужно было ввести ngBoilerplate.foo.bar в верхний уровень ngBoilerplate.

Я думал, что поставил бы это здесь, если кто-нибудь еще это увидит. Ошибка, которую я имел, это Uncaught TypeError: Невозможно прочитать свойство "navigable" из undefined из ngBoilerplate.foo