AnjularJS,正确的引用,但“ReferenceError: angular is not defined”

AnjularJS, correct references but "ReferenceError: angular is not defined"

本文关键字:angular is defined ReferenceError not 引用 AnjularJS      更新时间:2023-09-26

我正在尝试创建一个简单的AngularJS代码,它接受一个JSON对象并在HTML表中打印它。

我使用的代码在这个小提琴(在哪里是完美的):http://jsfiddle.net/mjaric/pJ5BR/

但是我无法在单个HTML文件(本地)中重新创建代码,而不会遇到错误。

编辑:

ReferenceError: angular is not defined

错误在线(在脚本中):

var app = angular。模块("myApp",[]);

我试着通过谷歌和本地引用AngularJS和JQuery。没有差别。

这是我的html文件的头部:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

脚本段:

 <script>
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
]));

var app = angular.module('myApp', []);
function PeopleCtrl($scope, $http) {
    $scope.people = [];
    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest
        }).success(function(data, status) {
            $scope.people = data;
        });
    };
}
</script>

最后是正文:

  <div ng-app="myApp">
        <div ng-controller="PeopleCtrl">
            <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
        <table>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr ng-repeat="person in people">
                <td>{{person.id}}</td>
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
            </tr>
        </table>
        </div>
   </div>

谢谢!

你正在使用一个方案相对url来引用Angular:

src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"

使用与访问HTML文档相同的方案,如果您使用http://https://加载HTML文档,则可以完美地工作。

您的本地文件可能是从您的文件系统(使用file:// URI)而不是本地网站(使用http://localhost/)加载的,并且资源在file://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js不可用。

您可以使用

快速破解这个问题
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"

但是您最好使用本地web服务器进行测试,因为有很多事情(特别是围绕Ajax,您正在使用)file://http://之间的工作方式不同。