Routing Sub-Module in eckigen

Question

Wie schreibe ich verschiedene Module mit ihren eigenen Routing?

ich habe eine Winkel App und es hat verschiedene modules.i für jeden von ihnen, bestimmten Route Datei schreiben werden, aber ich habe diesen Fehler

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/ $injector/unpr?p0=routeServiceProvider%20%3C-%20routeService

es mein Code:

sample.module.js

angular.module('app.sample', []); 

sample.route.js

angular 
.module('app.sample') 
.run(appRun); 

    /* @ngInject */ 
    function appRun (routeService) { 
    routeService.configureRoutes(getRoutes()); 
    } 

function getRoutes() { 
    return [ { 
     url: '/sample', 
     config: { 
      templateUrl: 'sample.html' 
     } 
    } 
    ]; 
} 

i bereits ngRoute hinzufügen und diese Dateien in index.html Datei

Answer 1

Um solche Projektstruktur zu erreichen injizieren, ist ui-router der beste Weg zu gehen. Es ist eine separate Bibliothek, so dass Sie in Ihr Projekt als Abhängigkeit aufnehmen müssen.

Hier sind die Auszüge, die

angular.module('app.dashboard', ['ui.router']); 

dashboard.router.js

angular.module('app.dashboard') 
     .config(routerConfig); 

    routerConfig.$inject = ['$stateProvider']; 
    function routerConfig($stateProvider) { 
     $stateProvider 
      .state('state1', { 
       url: '/state1', 
       templateUrl: 'url/to/state1.html', 
       controller: function() { 
        // controller code here 
       } 
      }) 
      .state('state2', { 
       url: '/state2', 
       templateUrl: 'url/to/state2.html', 
       controller: function() { 
        // controller code here 
       } 
      }); 
    } 

sample.module.js für Ihren Fall

dashboard.module.js nützlich sein wird

angular.module('app.sample', ['ui.router']); 

sample.router.js

angular.module('app.sample') 
     .config(routerConfig); 

    routerConfig.$inject = ['$stateProvider']; 
    function routerConfig($stateProvider) { 
     $stateProvider 
      .state('state3', { 
       url: '/state3', 
       templateUrl: 'url/to/state3.html', 
       controller: function() { 
        // controller code here 
       } 
      }) 
      .state('state4', { 
       url: '/state4', 
       templateUrl: 'url/to/state4.html', 
       controller: function() { 
        // controller code here 
       } 
      }); 
    } 

Schließlich app.module, die alle diese Module

app.module.js

angular.module('app', [ 
    /* 
    * sub-modules 
    */ 
    'app.dashboard', 
    'app.sample' 
]); 

Um es zusammenzufassen, Sie verfügen über zwei unabhängige Untermodule verbindet (app.dashboard und app.sample) mit ihrer eigenen Routing-Logik und einem Modul (app), das sie in eine winkelförmige Anwendung umschließt.

$stateProvider, Service von ui.router zur Verfügung gestellt, wird für die Registrierung von Staaten verwendet.

Zusatzinfo

Da Ihre Anwendung modular aufgebaut ist, werden Sie wahrscheinlich verschachtelten Routing müssen, die stark von ui.router unterstützt wird. Lesen Sie docs, um weitere Informationen zu verschachtelten Zuständen zu erhalten.

aktualisieren

Wenn Sie jedoch nach wie vor mit ngRoute haften möchten, this und this deutlich erklären, wie das gleiche Ergebnis zu erzielen.