我能够从一个javascript文件运行代码.但是当我想将服务分离到一个单独的文件(在customServices文件夹中)时,它会给出一个注入器错误： – 未知的提供者.调试器放在我的membershipService.js中 – 它被命中但仍然会抛出错误.
同样,我无法将路由分离到另一个文件.它给出了同样的错误.
文件夹结构： –
上市
contollers
app.js
customservices
membership membership .js
意见
membersdetails.html
2. index.html
Index.html代码： –
<head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
resource.js"></script>
<script src="CustomServices/membershipService.js"></script>
<script src="ngRoute/viewroute.js" type="text/javascript"></script>
<script src="controllers/app.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<div>
<div class="container pt-5">
<div ng-view></div>
</div>
</div>
控制器代码 – app.js
var app = angular.module("tdmModule", ["ngRoute"]);
app.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl : "home",
controller: 'homeController'
})
.when("/home", {
templateUrl : "home",
controller: 'homeController'
})
.when("/membershipdetails", {
templateUrl : "membershipdetails",
controller: 'membershipController'
})
.otherwise({redirectTo: '/'});
}]);
app.service("membershipService", function () {
this.jsondata = function(getdata){
var d = {};
console.log("Service calling " +getdata);
if(getdata != undefined && getdata.TopN != undefined){
d.TopN = getdata.TopN;
}
if(getdata != undefined && getdata.MemberNo != undefined){
d.MemberNo = getdata.MemberNo;
}
return d;
};
});
app.controller('membershipController', function($scope,$filter, $http,
$httpParamSerializer, $location, membershipService, setnotanoption,
compileservice) {
var absurl = $location.absUrl().split('/#!/')[1];
$scope.pagename = absurl;
app.controller('membershipController', function($scope,$filter, $http,
$httpParamSerializer, $location, membershipService, setnotanoption,
compileservice) {
var absurl = $location.absUrl().split('/#!/')[1];
$scope.pagename = absurl;
$scope.noOfColumn = false;
$http.get('http://localhost:3000/membership').then(function (res) {
var options = res.data;
$scope.options = options;
$scope.removeField = function(rmdata) {
setnotanoption.setNotAnOption(rmdata, false, options);
var myEl = angular.element( document.querySelector ("."+rmdata ) );
myEl.attr('ng-show',false);
compileservice.compile(myEl);
var btnEl = angular.element( document.querySelector("#btnEl" ) );
compileservice.compile(btnEl);
setnotanoption.setNotAnOption(rmdata, false, options);
};
$scope.deleteField = function (index){
$scope.rmdata.splice(index,1);
alert("JSON Name is deleted");
}
$scope.addField = function(data) {
if(data != undefined && data.optionSelect != null){
var myEl = angular.element(
document.querySelector("."+data.optionSelect ) );
myEl.attr('ng-show',true);
compileservice.compile(myEl);
setnotanoption.setNotAnOption(data.optionSelect, true, options);
}
};
});
});
注意： – IT工作到此为止.但是一旦我将服务代码移动到不同的文件,如开始文件夹结构中所示,它会给出未知的提供程序错误
我的服务代码 – 我收到错误的地方： –
var app = angular.module("tdmModule", ["ngRoute"]);
app.service("membershipService", function
($location,$rootScope,$http,$filter,$cookies,$timeout,$document,$window)
{
this.jsondata = function(getdata){
var d = {};
console.log("Service calling " +getdata);
if(getdata != undefined && getdata.TopN != undefined){
d.TopN = getdata.TopN;
}
if(getdata != undefined && getdata.MemberNo != undefined){
d.MemberNo = getdata.MemberNo;
}
if(getdata != undefined &&getdata.MemberStartDateHigh !=undefined){
d.MemberStartDateHigh = getdata.MemberStartDateHigh;
}
return d;
};
});
我经历过
1. https://docs.angularjs.org/error/ $injector / unpr
2. https://viralpatel.net/blogs/angularjs-service-factory-tutorial/
3. AngularJS Service not working
4. Unknown Provider error using AngularJS
我猜想我错过了一些概念性的东西.为了便于阅读,有意删除了一些代码.
我的服务注入概念是一个简单的js文件,可以在应用程序的任何控制器中注入并按照应用程序使用.它也需要使用正确的文件夹结构进行注册.
解决方法:
我在一个plunker中添加了你的代码,看看发生了什么.
首先,您的示例中有很多缺失}和},这使您的示例无法编译.
然后,当我对它进行排序时,它抱怨了setnotanoption和compileservice,你已经将其定义为membershipController中的依赖项.
您的示例中未提供这些实例.
删除它们时,一切正常.
注意：我没有绑定对象应用程序上的所有组件,而是将角度模块称为angular.module(“tdmModule”)
Here’s的plunker.