未知提供程序错误 - AngularJS 应用程序问题

Unknown provider error - AngularJS App issue

本文关键字：AngularJS 应用程序 问题 错误 程序 未知      更新时间：2023-09-26
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
    });    
}]);

我已将 ng-app 和 ng-controller 指令放在 HTML 的顶部

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

但是当我运行 HTML 时，出现以下错误

错误： [$injector：unpr] 未知提供程序： 类别提供程序 <- 类别 <- 控制

我该如何解决这个问题？

编辑：如果我从HTML中删除ng-controller="ctrl"，那么没有错误

您收到该错误只是因为您对索引.php和"部分/购物车"使用相同的控制器.php

为"部件/购物车.php"创建一个单独的控制器来解决此问题 问题

代码片段： 

// 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>

您必须定义注入控制器"ctrl"中的服务/工厂类别。

相关文章：