Angularjs: Làm thế nào để tiêm phụ thuộc từ giải quyết routeProvider

Question

Tôi có một vấn đề tiêm giải quyết các thông số từ định tuyến vào bộ điều khiển. Tôi đang đặt giá trị giải quyết cho một đối tượng {name: 'Banner', slug: 'banner'} nhưng tôi gặp lỗi.

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

Lỗi:

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 hỗ trợ tiêm của các biến quyết tâm điều khiển, đó là hữu ích cho mối quan tâm xuyên suốt của ứng dụng, như xác thực hoặc cấu hình của ứng dụng.

Nhược điểm là bộ điều khiển có thể chỉ được khởi tạo với các thông số có sẵn để được tiêm, có nghĩa là một trong hai bạn nhanh chóng điều khiển của bạn bằng tay (với $controller), mà hầu như không bao giờ như vậy, hoặc với ngRoute với quyết tâm. Những gì bạn không thể làm với bộ điều khiển như vậy là khởi tạo nó với ng-controller hoặc ở bất kỳ vị trí nào khác nơi không có tham số được tiêm.

Lỗi này chỉ ra rằng ngoài việc xác định bộ điều khiển trên tuyến đường, bạn cũng có bộ điều khiển được xác định là ng-controller trong mẫu của tuyến đường. Điều này thứ hai instantiation của bộ điều khiển là những gì không thành công.

Answer 2

Bạn có thể nhận dữ liệu đã giải quyết trong bộ điều khiển bằng cách sử dụng dịch vụ định tuyến $.

Xin xem demo ở đây http://plnkr.co/edit/2oID3G0QStTOGEPPLQ3h?p=preview

như vậy trong ví dụ của bạn nó sẽ trông giống như dưới đây:

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

và trong điều khiển:

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(); 
     }); 
    }] 
}