未知的提供程序错误 - AngularJS应用问题 [英] Unknown provider error - AngularJS App issue

问题描述

  VAR对myApp = angular.module（MyApp的，['ngRoute']）;myApp.config（['$ routeProvider'，
  功能（$ routeProvider）{
    $ routeProvider。
      什么时候（'/'， {
        templateUrl：'谐音/ cart.php'，
        控制器：CTRL，
        解析：{
类别：功能（cartService）{
                的console.log（'内解析类）
返回cartService.getCategories（）;
}
          }
      }）。
      除此以外（{
        redirectTo：'/'
      }）;
}]）;myApp.controller（'CTRL'，函数（类别，$范围）{
  $ scope.items =类别;
}）;
myApp.service（cartService功能（$ HTTP，$ Q）{
    this.getCategories =功能（）{
        变种推迟= $ q.defer（）;
        $ http.get（'JS / categories.js'）
            。然后（功能（响应）{
              deferred.resolve（response.data）;
            }）;       返回deferred.promise;
    }
}）;
myApp.run（['$ rootScope'，函数（$ rootScope）{
    $ rootScope.stateIsLoading = FALSE;
    $ rootScope。在$（'$ routeChangeStart'功能（即电流，pre）{
        $ rootScope.stateIsLoading = TRUE;
        VAR fullRoute =当前$$ route.originalPath。
        如果（fullRoute =='/'）
        {
          的console.log（'负载categoreis和产品）
        }
    }）;
    $ rootScope。在$（'$ routeChangeSuccess'，函数（）{
        $ rootScope.stateIsLoading = FALSE;
        的console.log（'路线改为'）;
    }）;
    $ rootScope。在$（'$ routeChangeError'，函数（）{
        // catch错误
    }）;
}]）;
 

我已经放在NG-应用和NG-控制器指令在HTML顶部

 ＆LT; HTML LANG =ENNG-应用=MyApp的NG控制器=CTRL＆GT;
 

但是当我运行HTML我得到以下错误

  

错误：[$喷油器：unpr]未知提供商：categoriesProvider＆LT; -
  类别＆LT; - CTRL

我该如何解决这个问题？

编辑：如果我从HTML删除NG控制器=CTRL，则没有任何错误

解决方案

您有只因为，你使用的是相同的控制器该错误的index.php都和谐音/ cart.php

  

创建'谐音/ cart.php'一个单独的控制器来解决这个
  问题

code段：

\r

\r

// code到这里\r
VAR应用= angular.module（'应用'，['ngRoute']）;\r
\r
app.controller（'indexCtrl'，函数（$范围）{\r
  $ scope.title ='头';\r
}）;\r
\r
\r
的app.config（函数（$ routeProvider）{\r
  $ routeProvider.when（'/'，{\r
    模板：＆LT; UL＆GT;＆LT;李NG重复='中的项目项目'＆GT; {{}项}＆LT; /李＆GT;＆LT; / UL＆gt;中，\r
    控制器：'categoryCtrl'，\r
    解析：{\r
        类别：功能（cartService）{\r
            返回cartService.getCategories（）;\r
        }\r
      }\r
  }）;\r
  \r
}）;\r
\r
app.controller（'categoryCtrl'，函数（类别，$范围）{\r
  $ scope.items =类别;\r
}）;\r
\r
app.service（cartService功能（）{\r
   this.getCategories =功能（）{\r
     返回['A'，'B'，'C'];\r
   };\r
}）;

\r

＆LT; HTML NG-应用=应用程序＆GT;\r
\r
  ＆LT; HEAD＆GT;\r
    ＆所述;脚本数据需要=angular.js@1.4.9数据semver =1.4.9SRC =的https：//$c$c.angularjs.org/1.4.9/angular.js＆GT ;＆LT; / SCRIPT＆GT;\r
    ＆所述;脚本数据需要=angular-route@1.4.2数据semver =1.4.2SRC =HTTPS：//$c$c.angularjs.org/1.4.2/angular-route.js ＆GT;＆LT; / SCRIPT＆GT;\r
    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
    ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;\r
  ＆LT; /头＆GT;\r
\r
  ＆LT;机身NG控制器=indexCtrl＆GT;\r
    ＆LT; H1＆GT;的{{title}}＆LT; / H1＆GT;\r
     ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;\r
  ＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r

\r

var myApp = angular.module("MyApp", ['ngRoute']);

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/cart.php',
        controller: 'ctrl',
        resolve: {
            categories: function(cartService){
                console.log('inside resolve categories')
                return cartService.getCategories();
            }
          }           
      }).
      otherwise({
        redirectTo: '/'
      });
}]);



myApp.controller('ctrl', function (categories, $scope) {    
  $scope.items = categories;    
});


myApp.service("cartService", function ($http, $q) {     
    this.getCategories = function () {
        var deferred = $q.defer();    
        $http.get('js/categories.js')
            .then(function (response) {
              deferred.resolve(response.data);
            });

       return deferred.promise;     
    }    
});


myApp.run(['$rootScope',function($rootScope){    
    $rootScope.stateIsLoading = false;
    $rootScope.$on('$routeChangeStart', function(e, current, pre) {
        $rootScope.stateIsLoading = true;
        var fullRoute = current.$$route.originalPath;
        if(fullRoute == '/')
        {
          console.log('load categoreis and products')  
        }            
    });
    $rootScope.$on('$routeChangeSuccess', function() {
        $rootScope.stateIsLoading = false;
        console.log('route changed');
    });
    $rootScope.$on('$routeChangeError', function() {
        //catch error
    });    
}]);

I have placed the ng-app and ng-controller directives at the top of the HTML

<html lang="en" ng-app="MyApp" ng-controller="ctrl">

But when I run the HTML I get the following error

Error: [$injector:unpr] Unknown provider: categoriesProvider <- categories <- ctrl

How can I fix this ?

Edit: If I remove ng-controller="ctrl" from the HTML, then no errors

解决方案

You got that error just because, you are using the same controller for both index.php and 'partials/cart.php'

Create a separate controller for 'partials/cart.php' to resolve this problem

Code Snippet:

// Code goes here
var app = angular.module('app', ['ngRoute']);

app.controller('indexCtrl', function($scope) { 
  $scope.title = 'Header';
});


app.config(function($routeProvider) {
  $routeProvider.when('/', {
    template: "<ul><li ng-repeat='item in items'>{{item}}</li></ul>",
    controller: 'categoryCtrl',   
    resolve: {
        categories: function(cartService){
            return cartService.getCategories();
        }
      }
  });
  
});

app.controller('categoryCtrl', function (categories, $scope) {
  $scope.items = categories;
});

app.service("cartService", function() {
   this.getCategories = function() {
     return ['A', 'B', 'C'];
   };
});

<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
    <script data-require="angular-route@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="indexCtrl">
    <h1>{{title}}</h1>
     <div ng-view></div>
  </body>

</html>

这篇关于未知的提供程序错误 - AngularJS应用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！