Question

我正在创建一个小型网络应用，我将展示十大热门电视节目的图表。然后，当我进入浏览器并检查时出现错误：

错误：[$ injector：unpr] http://errors.angularjs.org/1.5.6/ $ injector / unpr？p0 = showProvider％20％3C-％20show％20％3C-％20MainController

    <!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="css/main.css" rel="stylesheet" />
    <!-- Angular JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <body ng-app="Top10App">
    <div class="header">
      <div class="container">
        10
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="content">


      <!--TODO: Loop through shows and display each one with this HTML-->
      <!--ng-repeat="show in shows" -->
          <div>
            <div class="rank">{{$index + 1}}</div>

            <h2 class="series"> {{ index.series }}</h2>
            <p class="genre">{{ index.genre }} </p>
            <p class="run-start"> {{ index.run_start }}</p>
            <p class="description"> {{ index.description }} </p>

         </div>


        </div>
      </div>
    </div>




    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

    <!-- Services -->
    <script src="js/services/show.js"></script>

  </body>
</html>

的Javascript

MainController.js

    app.controller('MainController', ['$scope', 'show', function ($scope, show) {


show.success(function(data) {

$scope.show = data;


});




}]);

show.js

    app.factory('Top10App', ['$http', function($http){
  return $http.get('shows.json')
  .success(function(data){
    return data;
  })
  .error(function(err){
    return err;
  });
}]);

Answer 1

您已将服务名称定义为“Top10App＆＃39;”，以便您按照文件名访问它的方式，而不是文件名。

['$scope', 'Top10App', function ($scope, Top10App) { ...

  Top10App.success(...

Answer 2

首先，你创建了模块吗？你应该有类似的东西：

// app.js
angular.module('app', []);

// maincontroller.js
angular.module('app').controller('myController, ...', [.......]);

// factory.js
angular.module('app').factory(...)

Answer 3

您正在尝试将show作为控制器的依赖项注入，但它看起来不像是在任何地方定义的。这就是为什么你的错误告诉你它是一个未知的提供者。

我猜你正在尝试使用你的Top10App工厂，所以你需要注入它

app.controller('MainController', ['$scope', 'Top10App', function ($scope, Top10App) {
  Top10App.success(...)
}

在AngularJS中获取错误

3 个答案: