Angularjs: 如何从 resolve routeProvider 注入依赖
Angularjs: How to inject dependency from resolve routeProvider
我在将路由中的解析参数注入控制器时遇到问题。我正在将解析值设置为一个对象 {name: 'Banner', slug: 'banner'}
,但出现错误。
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'
});
});
错误:
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">
ngRoute
支持将已解析的变量注入控制器,这对于应用程序的横切关注点很有用,例如应用程序的身份验证或配置。
缺点是控制器可以只能使用这些可注入的参数实例化,这意味着您要么手动实例化控制器(使用$controller
) ,几乎从来没有这种情况,或者 ngRoute
下定决心。你不能用这样的控制器做的是用 ng-controller
或在注入参数不可用的任何其他位置实例化它。
此错误表示除了在路线上定义了控制器外,您还在路线模板中定义了控制器ng-controller
。控制器的第二次实例化失败了。
您可以使用 $route 服务在您的控制器中获取已解析的数据。
请在此处查看演示 http://plnkr.co/edit/2oID3G0QStTOGEPPLQ3h?p=preview
因此在您的示例中,它将如下所示:
.when('/banner1', {
templateUrl: 'banner1.php',
controller: 'ModuleController',
resolve: {
properties: function() {
return { name: 'Banner', slug: 'banner' };
}
}
})
在控制器中:
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;
});
}
}
]);
resolve : {
properties : ['projects', 'user', function (projects, user) {
return user.getData().then(function () {
return projects.getData();
});
}]
}
使用依赖注入 ng-route
试试这个;
var myApp = angular.module("myApp", ["ngRoute", "localytics.directives"]);
myApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/TimeLine.html",
controller: "MainCtrl"
})
.when("/AddOrEditOccasion", {
templateUrl: "/Html/GiftWhiz/AddOrEditOccasion.html",
controller: "AddOrEditOccasionCtrl"
})
.when("/OccasionStart", {
templateUrl: "/OccasionStart.html",
controller: "OccasionStartCtrl"
})
}]);
myApp.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location) {
//your codes
}]);
我在将路由中的解析参数注入控制器时遇到问题。我正在将解析值设置为一个对象 {name: 'Banner', slug: 'banner'}
,但出现错误。
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'
});
});
错误:
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">
ngRoute
支持将已解析的变量注入控制器,这对于应用程序的横切关注点很有用,例如应用程序的身份验证或配置。
缺点是控制器可以只能使用这些可注入的参数实例化,这意味着您要么手动实例化控制器(使用$controller
) ,几乎从来没有这种情况,或者 ngRoute
下定决心。你不能用这样的控制器做的是用 ng-controller
或在注入参数不可用的任何其他位置实例化它。
此错误表示除了在路线上定义了控制器外,您还在路线模板中定义了控制器ng-controller
。控制器的第二次实例化失败了。
您可以使用 $route 服务在您的控制器中获取已解析的数据。
请在此处查看演示 http://plnkr.co/edit/2oID3G0QStTOGEPPLQ3h?p=preview
因此在您的示例中,它将如下所示:
.when('/banner1', {
templateUrl: 'banner1.php',
controller: 'ModuleController',
resolve: {
properties: function() {
return { name: 'Banner', slug: 'banner' };
}
}
})
在控制器中:
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;
});
}
}
]);
resolve : {
properties : ['projects', 'user', function (projects, user) {
return user.getData().then(function () {
return projects.getData();
});
}]
}
使用依赖注入 ng-route 试试这个;
var myApp = angular.module("myApp", ["ngRoute", "localytics.directives"]);
myApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/TimeLine.html",
controller: "MainCtrl"
})
.when("/AddOrEditOccasion", {
templateUrl: "/Html/GiftWhiz/AddOrEditOccasion.html",
controller: "AddOrEditOccasionCtrl"
})
.when("/OccasionStart", {
templateUrl: "/OccasionStart.html",
controller: "OccasionStartCtrl"
})
}]);
myApp.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location) {
//your codes
}]);