Question

我正试图（在本地）运行AngularJS http://angularjs.org/new中的第三个示例，称为“连接后端”而没有运气（在Chrome上）。

抱怨：

           Uncaught Error: [$injector:modulerr]   
           http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=project&p1=Error%3A…
           oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A29%3A56) angular.js:3577

这是HTML / JS文件：

的index.html：

            <!doctype html>
            <html ng-app="project">
              <head>
                <script                 
                src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-
                route.js"></script>
                <script 
                src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
                </script>   

                <script                 
            src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-
            resource.min.js">
                </script>   
                <script src="https://cdn.firebase.com/v0/firebase.js"></script>
                <script 
            src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js">                                
            </script>
                <script src="project.js"></script>
              </head>
              <body>
                <h2>JavaScript Projects</h2>
                <div ng-view></div>
              </body>
            </html>

project.js

            angular.module('project', ['ngRoute', 'firebase'])

            .value('fbURL', 'https://angularjs-projects.firebaseio.com/')

            .factory('Projects', function($firebase, fbURL) {
              return $firebase(new Firebase(fbURL));
            })

            .config(function($routeProvider) {
              $routeProvider
                .when('/', {
                  controller:'ListCtrl',
                  templateUrl:'list.html'
                })
                .when('/edit/:projectId', {
                  controller:'EditCtrl',
                  templateUrl:'detail.html'
                })
                .when('/new', {
                  controller:'CreateCtrl',
                  templateUrl:'detail.html'
                })
                .otherwise({
                  redirectTo:'/'
                });
            })

            .controller('ListCtrl', function($scope, Projects) {
              $scope.projects = Projects;
            })

            .controller('CreateCtrl', function($scope, $location, $timeout, Projects) {
              $scope.save = function() {
                Projects.$add($scope.project, function() {
                  $timeout(function() { $location.path('/'); });
                });
              };
            })

            .controller('EditCtrl',
              function($scope, $location, $routeParams, $firebase, fbURL) {
                var projectUrl = fbURL + $routeParams.projectId;
                $scope.project = $firebase(new Firebase(projectUrl));

                $scope.destroy = function() {
                  $scope.project.$remove();
                  $location.path('/');
                };

                $scope.save = function() {
                  $scope.project.$save();
                  $location.path('/');
                };
            });

list.html

            <input type="text" ng-model="search" class="search-query"                 
                placeholder="Search">

            <table>
              <thead>
              <tr>
                <th>Project</th>
                <th>Description</th>
                <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="project in projects | orderByPriority | filter:search |                 
            orderBy:'name'">
                <td><a href="{{project.site}}" target="_blank">{{project.name}}</a>                
            </td>
                <td>{{project.description}}</td>
                <td>
                  <a href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
                </td>
              </tr>
              </tbody>
            </table>

details.html

            <form name="myForm">
              <div class="control-group" ng-class="{error: myForm.name.$invalid}">
                <label>Name</label>
                <input type="text" name="name" ng-model="project.name" required>
                <span ng-show="myForm.name.$error.required" class="help-inline">
                    Required</span>
              </div>

              <div class="control-group" ng-class="{error: myForm.site.$invalid}">
                <label>Website</label>
                <input type="url" name="site" ng-model="project.site" required>
                <span ng-show="myForm.site.$error.required" class="help-inline">
                    Required</span>
                <span ng-show="myForm.site.$error.url" class="help-inline">
                    Not a URL</span>
              </div>

              <label>Description</label>
              <textarea name="description" ng-model="project.description"></textarea>

              <br>
              <a href="#/" class="btn">Cancel</a>
              <button ng-click="save()" ng-disabled="myForm.$invalid"
                      class="btn btn-primary">Save</button>
              <button ng-click="destroy()"
                      ng-show="project.$remove" class="btn btn-danger">Delete</button>
            </form>

我错过了什么吗？

顺便说一句，我阅读了有关此问题的其他帖子，例如：AngularFire beginner doesn't work example "Wire up a Backend" from angularjs.org (solved-no css ref., chrome issue duplicated)但这是旧的angularJS版本和不同的错误，显然缺少bootstrap css

Answer 1

如果我按照例外中的链接收到此消息：

在AngularJS 1.2.0及更高版本中，ngRoute已移至其自己的模块。如果在升级到1.2.x后出现此错误，请确保已安装ngRoute。

我只需将angular-route.min.js添加到head的{{1}}，所有内容似乎都按预期工作：

index.html

让我知道它是否有帮助！

修改

这是我<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script>的{{1}}

head

除此之外，我没有修改任何其他内容，所有来源都直接从您的链接下载。

AngularJS“连接后端”示例仍然不能正常工作

1 个答案: