个人中心
gpt4 book ai didi

AngularJS "Wire up a Backend"示例仍然无法正常工作

转载 作者：行者123 更新时间：2023-12-01 12:45:13 28 4
gpt4 key购买 nike

我正在尝试(在本地)运行 AngularJS 中的第三个示例 http://angularjs.org/new称为“Wire up a Backend”，运气不好(在 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

最佳答案

如果我点击异常中的链接，我会收到此消息:

In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute.

我只需要将 angular-route.min.js 添加到 index.html 的 head 中，一切似乎都正常预期:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script>

如果有帮助，请告诉我!

编辑

这是我的 head 的 index.html

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.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>

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

关于AngularJS "Wire up a Backend"示例仍然无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20796993/

28 4 0
文章推荐： oracle - 为什么 Oracle 不支持 "group by 1,2,3"？
文章推荐： java - 无法在Struts 2中发送和接收ajax数据
文章推荐： java - 更新实例变量值并确保私有(private)方法使用它们 - Java
文章推荐： firebird - 打开 Firebird 数据库 (8.15)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com