javascript - AngularJS Error: $injector:unpr Unknown Provider -
i'm trying build own service following example in documentation factory methodology. think i've done wrong because continue unknown provider error. code app including declaration, configuration , factory definition.
edit i've added of files troubleshoot
edit full details of error below issues appears getsettings, it's looking getsettingsprovider , cannot find it
error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr? p0=getsettingsprovider%20%3c-%20getsettings @ error (native) @ http://localhost/sw/selfservice/bower_components/angular/angular.min.js:6:450 @ http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:431 @ object.c [as get] (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13) @ http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:499 @ c (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13) @ d (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:230) @ object.instantiate (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:394) @ http://localhost/sw/selfservice/bower_components/angular/angular.min.js:66:112 @ 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 angular.js:2509 (anonymous function) angular.js:2780 q angular.js:330 c these of files have in app currently
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; }; }]); and here how using service in controller
controller.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 "" }]); directives.js
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'; }); }); } }; }); and if it's pertinent here's 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> can point me in right direction? have done best follow documentation, , looking through of related issues more in depth, , more difficult me understand. first time creating service.
your angular module needs initialized properly. global object app needs defined , initialized correctly inject service.
please see below sample code reference:
app.js
var app = angular.module('sampleapp',['ngroute']); //you can inject dependencies within 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 create function when require service returns object default can't return function directly. that's 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 function call updated service var loadsettings = getsettings.getsetting('global'); loadsettings.then(function(val) { $scope.settings = val; }); }]); sample html code should this:
<!doctype html> <html> <head lang="en"> <title>sample application</title> </head> <body ng-app="sampleapp" ng-controller="globalcontrol"> <div> ui elements go here </div> <script src="app.js"></script> </body> </html> please note controller not binding html tag body tag. also, please try include custom scripts @ end of html page standard practice follow performance reasons.
i hope solve basic injection issue.
Comments
Post a Comment