Question

我刚开始学习angularjs。我正在尝试在他们的官方网站上给出的教程。

http://docs.angularjs.org/tutorial/step_08

我想要实现的是通过添加路由来构建多个视图。

当我访问home.html时，它正在显示所有的移动列表，但是一旦我点击链接获取任何移动设备的详细信息，下一页就会给我这个错误

[$注射器：unpr]

请注意，没有未知的提供程序错误

并且正在打印phone-detail.html上的所有表达，因为它没有被评估。

这是我的app.js代码

var phonecatApp = angular.module('phonecatApp', [
        'ngRoute',
        'phonecatControllers'
    ]);

    phonecatApp.config(['$routeProvider',function($routeProvider) {
        $routeProvider.
        when('/phones', {
            templateUrl: 'partials/phone-list.html',
            controller: 'PhoneListCtrl'
        }).
        when('/phones/:phoneId', {
            templateUrl: 'partials/phone-detail.html',
            controller: 'PhoneDetailCtrl'
        }).
        otherwise({
            redirectTo: '/phones'
        });
    }]);

然后我的controller.js代码是

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        alert(data);
        $scope.phones = data;
    });

    $scope.orderProp = 'age';
}]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','$http',function($scope, $routeParams,$http) {
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
        $scope.phone = data;
    });
}]);

home.html代码

<html lang="en" ng-app="phonecatApp">
        <head>
        <title>Hello world example from angular js</title>
        <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <link type="text/css" rel="stylesheet" href="css/custom.css"/>
        <script type="text/javascript" src="scripts/angular.min.js"></script>
        <script type="text/javascript" src="scripts/angular-route.min.js"></script>
        <script type="text/javascript" src="scripts/app.js"></script>
        <script type="text/javascript" src="scripts/controller.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="container">
                <div ng-view></div>
            </div>
        </div>
    </body>
</html>

phone-list.html代码 -

<div class="col-lg-12">
    <hr>
    <p class="pull-right col-lg-4">
        <input type="text" ng-model="query" class="form-control col-lg-6" placeholder="Search" style="width:auto;">
        <select ng-model="orderProp" class="form-control col-lg-6" style="width:auto;">
            <option value="name">Alphabetical</option>
            <option value="age">Newest</option>
            <option value="-age">Oldest</option>
        </select>
    </p>
    <p class="col-lg-6">Total number of phones: {{phones.length}}</p>
    <div class="clearfix"></div>
    <hr>
    <h3 ng-bind-template="Thumbnail view | Search for : {{query}}">List view</h3>
    <div class="row">
        <div class="col-lg-4"  ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            <div class="thumbnail">
                <a href="#/phones/{{phone.id}}">
                    <img src="{{phone.imageUrl}}" data-src="{{phone.imageUrl}}" alt="{{phone.name}}">
                </a>
                <div class="caption">
                    <h3>{{phone.name}}</h3>
                    <p>{{phone.snippet}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

phone-detail.html代码 -

<div class="phone-images">
  <img ng-src="{{img}}"
       class="phone"
       ng-repeat="img in phone.images"
       ng-class="{active: mainImageUrl==img}">
</div>

<h1>{{phone.name}}</h1>

<p>{{phone.description}}</p>

Answer 1

我知道问题出在哪里。

这是因为我从github复制了phone-detail.html中的内容，这应该在后面的步骤中出现。在电话细节中有一些代码，如

这里的复选标记是一个过滤器，但我根本没有引入过滤器。

所以解决方案是我添加了带内容的filter.js

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

然后在home.html中导入script.js，它运行正常。

所以我犯了两个错误 - 1.引入过滤器代码而不注册任何过滤器。 2.没有发布phone-detail.html的整个代码，以便你可以找出第一个错误。

特别感谢@Lorenzo帮助我解决问题。

Answer 2

当您使用var phonecatApp = ...定义App模块时，您必须使用它为Angular创建控制器，以便知道phonecatController“属于”phonecatApp

所以只需将angular.module替换为phonecatApp.controller

替换此行

var phonecatControllers = angular.module('phonecatControllers', []);
//------------------------^-------------^---------------------------

有了这个

var phonecatControllers = phonecatApp.controller('phonecatControllers', []);
//------------------------^--------------------^---------------------------

或者你可以做到

angular.module('phonecatApp').controller('phonecatControllers', []);

错误：angular.js中的[$ injector：unpr]

2 个答案: