Angularjs: Wie man eine Abhängigkeit von der Resolve RouteProvider

Question

injiziere Ich habe ein Problem, die Auflösung Parameter aus dem Routing in den Controller. Ich setze den Auflösungswert auf ein Objekt {name: 'Banner', slug: 'banner'}, aber ich erhalte einen Fehler.

App.js

var app = angular.module('CMS', ['fields', 'ngRoute']); 

app.controller('ModuleController', ['$http', 'properties', 
    function($http, properties) { 
    var module = this; 
    module.properties = properties; 

    if (module.properties.slug.length) { 
     $http.get(module.properties.slug + '.php').success(function(data) { 
     module.list = data; 
     }); 
    } 
    } 
]); 

app.controller('HomeController', function() {}); 

app.config(function($routeProvider) { 
    $routeProvider 
    // route for the banner page 
    .when('/banner1', { 
    templateUrl: 'banner1.php', 
    controller: 'ModuleController', 
    resolve: { 
     properties: function() { 
     return { name: 'Banner', slug: 'banner' }; 
     } 
    } 
    }) 
    .when('/home', { 
    templateUrl: 'home.php', 
    controller: 'HomeController' 
    }) 
    .otherwise({ 
    redirectTo: '/home' 
    }); 
}); 

Fehler:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.14/$injector/unpr?p0=propertiesProvider%20%3C-%20properties%20%3C-%20ModuleController 
    at Error (native) 
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:6:417 
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:7 
    at Object.d [as get] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13) 
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:81 
    at d (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13) 
    at Object.e [as invoke] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:283) 
    at $get.w.instance (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:75:451) 
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:58:476 
    at s (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:7:408) <div ng-view="" class="ng-scope"> 

Answer 1

ngRoute unterstützt Injektion aufgelöst Variablen an die Steuerung, die für die übergreifende Anliegen der app, wie Authentifizierung nützlich ist, oder Konfiguration der App

Der Nachteil ist, dass der Controller kann nur mit diesen Parametern zur Verfügung zu injizierenden instanziert werden, was bedeutet, dass entweder Sie Ihren Controller manuell instanziiert (mit $controller), die so gut wie nie der Fall ist, oder mit ngRoute mit Entschlossenheit. Was Sie mit solch einem Controller nicht tun können, ist Instanziieren Sie es mit ng-controller oder an einem anderen Ort, wo die injizierten Parameter nicht verfügbar sind.

Dieser Fehler zeigt an, dass Sie zusätzlich zur Definition des Controllers auf der Route den Controller in der Vorlage der Route als ng-controller definiert haben. Diese zweite Instantiierung des Controllers scheitert.

Answer 2

Sie können aufgelöste Daten in Ihrem Controller mit dem $ route-Dienst abrufen.

Bitte sehen Demo hier http://plnkr.co/edit/2oID3G0QStTOGEPPLQ3h?p=preview

so in Ihrem Beispiel geht es unten aussieht wie:

.when('/banner1', { 
    templateUrl: 'banner1.php', 
    controller: 'ModuleController', 
    resolve: { 
     properties: function() { 
     return { name: 'Banner', slug: 'banner' }; 
     } 
    } 
    }) 

und in der Steuerung:

app.controller('ModuleController', ['$http', '$route', 
    function($http, $route) { 
    var module = this; 

    //get resolved properties 
    module.properties = $route.current.locals.properties; 

    if (module.properties.slug.length) { 
     $http.get(module.properties.slug + '.php').success(function(data) { 
     module.list = data; 
     }); 
    } 
    } 
]); 

Answer 3

resolve : { 
    properties : ['projects', 'user', function (projects, user) { 
     return user.getData().then(function() { 
      return projects.getData(); 
     }); 
    }] 
}