Angular.js konfigurieren ui-router untergeordnete Zustände aus mehreren Modulen

Ich möchte ein Setup implementieren, wo ich einen "root state" im Hauptmodul definieren und dann untergeordnete Zustände in anderen Modulen hinzufügen kann. Dies, weil ich den Stammzustand auflösen muss, bevor ich in den Kind-Zustand gehen kann.Angular.js konfigurieren ui-router untergeordnete Zustände aus mehreren Modulen

Offenbar soll dies möglich sein, nach dieser FAQ: How to: Configure ui-router from multiple modules

Für mich ist es nicht funktioniert: Fehler nicht erfasste Fehler: No such Zustand 'App' von ngBoilerplate.foo

hier ist, was ich habe:

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'); 
});

Wie mache ich diese Arbeit oder was andere Ansätze konnte ich vor jedem Staat etwas global gelöst haben (ohne auf jedem Zustand einen Entschluss zu definieren)?

Quelle

2013-08-15 Kilian Schefer

Ich versuche, genau dasselbe zu tun, und ich denke, ich kenne das Problem. Ich glaube, es ist nur eine Einschränkung mit '$ stateProvider'. Das Szenario, das Sie (und ich) haben, ist das Modul, das den Stammzustand definiert (in diesem Szenariozustand "app" im Modul "ngBoilerplate"), das ein anderes Modul (in diesem Fall 'ngBoilerplate.foo') definiert ist ein Kind des genannten Stammzustandes (dh 'app.foo'). Alle Abhängigkeiten des ersten Moduls ("ngBoilerplate") müssen zuerst aufgelöst werden (was beinhaltet, dass alle ihre '.config's ausgeführt werden), bevor es seine eigene' .config' ausführt. –

Also, wenn '$ stateProvider' nur die Definition von untergeordneten Zuständen erlauben könnte, selbst wenn der Elternstatus noch nicht definiert wurde, und stattdessen einen Fit nach der Konfig-Phase wirft, wenn es einen Kind-Zustand ohne definierten Elternstatus gibt. –

Haben Sie @Sydney Antwort unten versucht? –

ich endlich diesen Ansatz gewählt, die den Job für mich tut lesen:

// 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']);

und dann in der App-Index. html

<html ng-app="app">

Quelle

2013-09-17 07:07:22

Das ist, was ich einfach und elegant gesucht habe. –

In der Dokumentation hängt das feature1 Modul vom application Modul ab. Versuchen Sie

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

Quelle

2013-08-15 16:51:33 Sydney

Ich würde nur kommentiert, aber ich habe nicht die rep. Ich weiß, das ist alt, aber ich hatte das gleiche Problem und stieß auf dieses Problem. Eine Sache, über die ich verwirrt bin, ist in app.js, dass Sie nicht "ngBoilerplate.foo", sondern stattdessen ngBoilerplate.library importieren. Ich hatte das gleiche Problem und meine Lösung bestand darin, Submodule in das oberste Modul anstelle von deren Eltern zu injizieren.

Meine Struktur war Modul ('ngBoilerplate'), Modul ('ngBoilerplate.foo') und Modul ('ngBoilerplate.foo.bar') '. Ich habe ngBoilerplate.foo.bar in ngBoilerplate.foo eingefügt und der $ stateProvider ist fehlgeschlagen. Ich musste ngBoilerplate.foo.bar in die oberste Ebene von ngBoilerplate einfügen.

Ich dachte, ich würde dies hier für den Fall, dass jemand anderes dies sieht. Der Fehler, den ich hatte, war Uncaught Typeerror: nicht Eigentum ‚schiffbar‘ undefinierter von ngBoilerplate.foo

Quelle

2013-09-16 21:11:46

Angular.js konfigurieren ui-router untergeordnete Zustände aus mehreren Modulen

Antwort

Verwandte Themen