AngularJS 오류: $injector: Unpr Unknown Provider
공장 방법론 문서의 예에 따라 독자적인 서비스를 구축하려고 합니다.알 수 없는 프로바이더 에러가 계속 발생하고 있기 때문에 뭔가 잘못했다고 생각합니다.선언, 구성 및 공장 정의를 포함한 내 앱의 코드입니다.
편집 문제 해결을 위해 모든 파일을 추가했습니다.
편집 오류의 자세한 내용은 getSettingsProvider를 찾고 있지만 찾을 수 없기 때문에 getSettings와 관련된 문제인 것 같습니다.
Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr? p0=getSettingsProvider%20%3C-%20getSettings
at Error (native)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:6:450
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:431
at Object.c [as get] (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:499
at c (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
at d (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:230)
at Object.instantiate (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:394)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:66:112
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:53:14 angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
h.$apply angular.js:12512
(anonymous function) angular.js:1382
d angular.js:3869
$b.c angular.js:1380
$b angular.js:1394
Wc angular.js:1307
(anonymous function) angular.js:21459
a angular.js:2509
(anonymous function) angular.js:2780
q angular.js:330
c
현재 앱에 있는 모든 파일입니다.
app.JS
//Initialize angular module include route dependencies
var app = angular.module("selfservice", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
});
app.factory('getSettings', ['$http', '$q', function($http, $q) {
return function (type) {
var q = $q.defer();
$http.get('models/settings.json').success(function (data) {
q.resolve(function() {
var settings = jQuery.parseJSON(data);
return settings[type];
});
});
return q.promise;
};
}]);
컨트롤러에서 이 서비스를 사용하는 방법은 다음과 같습니다.
컨트롤러입니다.JS
app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {
var loadSettings = getSettings('global');
loadSettings.then(function(val) {
$scope.settings = val;
});
}]);
app.controller("login", ['$scope', function ($scope) {
return ""
}]);
명령어.이네이블화
app.directive('watchResize', function(){
return {
restrict: 'M',
link: function(scope, elem, attr) {
scope.spacer = (window.innerWidth < 1025) ? '' : 'large-3';
scope.button = (window.innerWidth < 1025) ? '' : 'large-6';
angular.element(window).on('resize', function(){
scope.$apply(function(){
scope.spacer = (window.innerWidth < 1025) ? '' : 'large-3';
scope.button = (window.innerWidth < 1025) ? '' : 'large-6';
});
});
}
};
});
그리고 만약 이것이 적절하다면, 여기 HTML이 있습니다.
<html class="no-js" lang="en" ng-app="selfservice" ng-controller="globalControl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{settings.title}}</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div id="template">
<header id="header">
<img src="{{settings.logo}}" alt="{{settings.logoDescription}}"/>
</header>
<div id="view">
<ng-view></ng-view>
</div>
</div>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
//initialize foundation
$(document).foundation();
</script>
</body>
</html>
누가 나를 올바른 방향으로 인도해 줄 수 있나요?저는 매뉴얼에 따르기 위해 최선을 다했습니다.그 때문에 대부분의 관련 문제는 훨씬 더 심도 있고 이해하기 어렵습니다.서비스를 만드는 것은 이번이 처음입니다.
또한 당신이 당신의 페이지에 서비스 파일을 포함시키는 것을 놓칠 수 있는 인기 있는 이유 중 하나입니다.
<script src="myservice.js"></script>
각도 모듈을 올바르게 초기화해야 합니다.글로벌 오브젝트app서비스를 주입하려면 올바르게 정의 및 초기화가 필요합니다.
아래의 샘플 코드를 참조해 주세요.
app.module
var app = angular.module('SampleApp',['ngRoute']); //You can inject the dependencies within the square bracket
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
$locationProvider
.html5Mode(true);
}]);
app.factory('getSettings', ['$http', '$q', function($http, $q) {
return {
//Code edited to create a function as when you require service it returns object by default so you can't return function directly. That's what understand...
getSetting: function (type) {
var q = $q.defer();
$http.get('models/settings.json').success(function (data) {
q.resolve(function() {
var settings = jQuery.parseJSON(data);
return settings[type];
});
});
return q.promise;
}
}
}]);
app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {
//Modified the function call for updated service
var loadSettings = getSettings.getSetting('global');
loadSettings.then(function(val) {
$scope.settings = val;
});
}]);
샘플 HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head lang="en">
<title>Sample Application</title>
</head>
<body ng-app="SampleApp" ng-controller="globalControl">
<div>
Your UI elements go here
</div>
<script src="app.js"></script>
</body>
</html>
컨트롤러는 HTML 태그가 아니라 본문 태그에 바인딩되어 있습니다.또, HTML 페이지의 마지막에 커스텀 스크립트를 포함하도록 해 주세요.이것은 퍼포먼스상의 이유로 따라야 할 표준 프랙티스입니다.
이것으로 기본적인 주입 문제가 해결되길 바랍니다.
app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {
모든 의존관계를 선언해야 합니다.아니면 아무것도 선언하지 않고 $q를 선언하는 것을 잊었습니다.
편집:
controller.controller : 로그인, 반환 안 함"
이 오류는 $scope를 공장 출하시 투입 시에도 발생합니다.
angular.module('m', [])
.factory('util', function ($scope) { // <-- this '$scope' gives 'Unknown provider' when one attempts to inject 'util'
// ...
});
같은 문제를 해결하려고 몇 시간이나 걸렸어저는 이렇게 했습니다.
app.filename:
var myApp = angular.module( 'myApp', ['ngRoute', 'ngResource', 'CustomServices'] );
Custom Services는 서비스라는 별도의 파일에 새로 생성하여 배치한 모듈입니다.js
_Layout.cshtml:
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/services/services.js"></script>
서비스를 제공합니다.js:
var app = angular.module('CustomServices', []);
app.factory( 'GetPeopleList', ['$http', '$log','$q', function ( $http, $log, $q )
{
//Your code here
}
app.module
myApp.controller( 'mainController', ['$scope', '$http', '$route', '$routeParams', '$location', 'GetPeopleList', function ( $scope, $http, $route, $routeParams, $location, GetPeopleList )
서비스를 services.js 파일의 새 모듈에 바인드해야 합니다.또한 메인 앱 모듈(app.js)을 생성할 때 해당 새 모듈을 사용해야 합니다.또한 이 모듈을 사용하는 컨트롤러에서 서비스 사용을 선언해야 합니다.
이 문제가 발생하고 있었는데, 알고 보니 컨트롤러가 ui.router와 html 템플릿 양쪽에 포함되어 있었습니다.
.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/views/index.html',
controller: 'DashboardController'
});
}
]);
그리고.
<section data-ng-controller="DashboardController">
컨트롤러와 컨트롤러가 있는 모듈 및 컨트롤러에 호출된 기능을 모두 "포함"하십시오.
module(theModule);
@ user2310334 아주 기본적인 예시로 방금 시도했습니다.
HTML 파일
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-route.min.js" type="text/javascript"></script>
<script src="./app.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="MailDetailCtrl">
</div>
</body>
</html>
javascript 파일:
var myApp= angular.module('app', ['ngRoute']);
myApp.factory('mailService' , function () {
return {
getData : function(){
var employees = [{name: 'John Doe', id: '1'},
{name: 'Mary Homes', id: '2'},
{name: 'Chris Karl', id: '3'}
];
return employees;
}
};
});
myApp.controller('MailDetailCtrl',['$scope', 'mailService', function($scope, mailService) {
alert(mailService.getData()[0].name);
}]);
그리고 그것은 동작한다.먹어봐.
컨트롤러는app.config 반드시 외부에 로드해 주세요.이 에러의 원인은, 다음의 코드입니다.
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
var AuthCtrl = require('components/auth/AuthCtrl'); //NOTICE HERE
$stateProvider.state('login',{
url: "/users/login",
templateUrl: require("components/auth/login.tpl.html"),
controller: AuthCtrl // ERROR
})
}))
이 오류를 수정하려면 AuthCtrl을 외부로app.config 이동해야 합니다.
var AuthCtrl = require('components/auth/AuthCtrl'); //NOTICE HERE
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('login',{
url: "/users/login",
templateUrl: require("components/auth/login.tpl.html"),
controller: AuthCtrl // WORK
});
}))
저 같은 경우에는 앱에 새로운 서비스(파일)를 추가했습니다.이 새로운 서비스는 기존 컨트롤러에 삽입됩니다.기존 컨트롤러에 대한 새로운 서비스 종속성 주입을 놓치지 않고 앱 모듈을 한 곳만 선언했습니다.웹 앱을 다시 실행할 때 브라우저 캐시가 새 서비스 파일 코드로 재설정되지 않을 때도 동일한 예외가 발생합니다.브라우저 캐시용 새 서비스 파일을 얻기 위해 브라우저를 새로 고쳤더니 문제가 사라졌습니다.
은 Stackoverflow 시 되는 첫 입니다.Error: $injector:unpr Unknown Provider여기에 이걸 넣겠습니다.
index.html에서 모듈/의존관계가 필요한 경우 로드되지 않도록 합니다.
, 내 에는 「」가 있습니다.customFactory.factory.js합니다.
angular
.module("app.module1")
.factory("customFactory", customFactory);
그러나 index.html은 다음과 같습니다.
<script src="/src/client/app/customFactory.factory.js"></script>
<script src="/src/client/app/module1.module.js"></script>
정말 이렇게 생겼어야 하는 곳:
<script src="/src/client/app/module1.module.js"></script>
<script src="/src/client/app/customFactory.factory.js"></script>
★★customFactory.factory.js의 module1 로드해야 합니다.customFactory
Jasmine 유닛 테스트 작성 시 오류가 발생하였습니다.난 대사가 있었어:
angular.injector(['myModule'])
필요한 것은 다음과 같습니다.
angular.injector(['ng', 'myModule'])
ui-router를 사용하는 경우 ng-controller를 아무 곳에서나 사용하면 안 됩니다.컨트롤러의 적절한 상태가 활성화되면 자동으로 UI 뷰가 인스턴스화됩니다.
언급URL : https://stackoverflow.com/questions/23942356/angularjs-error-injectorunpr-unknown-provider
'programing' 카테고리의 다른 글
| Java loop over Json 어레이? (0) | 2023.03.19 |
|---|---|
| 템플릿을 요구하는 여러 디렉티브: (0) | 2023.03.19 |
| TypeError: b'1'은 JSON을 직렬화할 수 없습니다. (0) | 2023.03.19 |
| Json allowget 오류 (0) | 2023.03.19 |
| Wordpress 연락처 양식 7 사용자 지정 쇼트 코드 (0) | 2023.03.19 |