Kann Route verdrahtet in zwei HTML-Seiten AngularJS

Question

Etwas verwendet werden, ist in meinem Code geschieht Also ich habe zwei Haupt HTML-Seiten

index.html && adHome.html 

Sie beide verschiedene Routen verwenden, aber als ich versuchte, diese

zu tun

angular 
    .module('App', [ 
    'ngRoute', 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngTouch', 
    'ngSanitize' 

    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 

    .when('/test', { 
    templateUrl: 'views/user/main.html', //this is called in index.html 
    controller: 'MainCtrl' 
    }) 

    .when('/Reports', { 
    templateUrl: 'pages/Reports.html', //this is called in adHome.html 
    controller: 'reportController' 
    }) 

.otherwise({ 

    redirectTo: '/404' //used by both 

    }); 

} 

Jetzt, wenn ich versuche, die Seiten auf meinem index.html alles zu laufen scheint gut zu funktionieren, aber wenn ich versuche, etwas auf meinem adHome.html zu laufen bekomme ich diese Fehler

Failed to instantiate module flowersApp due to: Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/ $injector/modulerr?p0=n...)...

Ich denke, das Problem ist; dass da adHome.html diese nicht verwenden:

" 'ngAnimate', 'ngCookies', 'ngResource', 'ngTouch', ‚ngSanitize"

etwas passiert, und ich erhalte eine Fehlermeldung Denn wenn ich sie entferne, dann scheint alles auf der adHome.html Seite zu funktionieren, aber klarerweise erhalte ich Fehler in meiner index.html Seite, weil ich meine Injektionen vermisse.

Könnte mir jemand helfen, dies zu lösen?

Answer 1

Sie sollten mit dem folgenden beheben:

app.js:

var myApp = 
      angular 
      .module('App', ['ngRoute']); 

route.provider.js:

myApp.config(function ($routeProvider) { 
    $routeProvider 
    .when('/test', { 
    templateUrl: 'views/user/main.html', //this is called in index.html 
    controller: 'MainCtrl' 
    }) 
    .when('/Reports', { 
    templateUrl: 'pages/Reports.html', //this is called in adHome.html 
    controller: 'reportController' 
    }) 
.otherwise({ 
    redirectTo: '/404' //used by both 
    }); 
}); 

Oder können Sie vermeiden, routeProvider mit und verwenden Sie stattdessen stateProvider.

myRoute.route.js:

(function() { 
    'use strict'; 
    angular.module('myApp') 
     .config(myRoute); 

    function myRoute($stateProvider) { 
     $stateProvider 
      .state('myRoute', { 
       url: '/myUrl', 
       parent: 'index', 
       templateUrl: 'mySomething.html', 
       controller: 'MyController', 
       controllerAs: 'myCtrl' 
      }) 
    } 
})(); 

Und $state.go('myRoute'); mit Ihrer App zu durchsuchen, während $state in Ihren Komponenten wie Controllers oder Factories injiziert wird.

Ich hoffe, ich war hilfreich.