Question

我尝试学习角度js。我在像这样的HTML中尝试一个简单的代码

  <!DOCTYPE html>
    <html lang="en" ng-app="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Title Page</title>

            <link rel="stylesheet" href="bootstrap.min.css" >
        </head>
        <body>
            <input type="text" ng-model="name">
            <div>hello{(name)}</div>
            <!-- jQuery -->
            <script src="https://cdnjs.com/libraries/angular.js/"></script>
    </body>
</html>

我在网络浏览器上运行它时的结果是一个错误。它没有用控制台上的错误就像这样

Uncaught ReferenceError: System is not defined on line 2

我怎么会得到这样的错误？

Answer 1

您不能包含所有https://cdnjs.com/libraries/angular.js/页面，您需要选择要包含的脚本，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

此外，它是{{name}}（两个花括号），而不是{(name)}

  <!DOCTYPE html>
    <html lang="en" ng-app="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Title Page</title>
            
        </head>
        <body>
            <input type="text" ng-model="name">
            <div>hello {{name}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    </body>
</html>

Answer 2

这是指向AngularJS CDN页面：

<script src="https://cdnjs.com/libraries/angular.js/"></script>

您应该选择一个版本。例如Minified AngularJS版本1.5.8：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

请注意，您应该排除https。

同时检查要在AngularJS中打印变量，您应该使用{{ name }}而不是{(name)}。

Answer 3

这里至少需要强调两点。

您的导入。其他答案完全描述了为什么它不起作用。修复它。
Angular本身。 Angular适用于应用程序和控制器（最简单的部分）。您需要做的是创建一个包含控制器的文件。例如，创建一个名为myapp.js的文件并将其导入您的网页：

<script src="path/to/myapp.js"></script>

然后，一旦您初始化了应用程序（var myApp = angular.module('myApp',[]);将完美地完成操作）和控制器（检查AngularJS documentation about it），您就可以使用您的范围初始化您的数据：< / p>

$scope.name = 'John';

在HTML页面中调用您的应用程序：

<html ng-app="myApp">

你能在那里看到神奇的魔力：

hello {{ name }} // and not {( name )}

您的网络浏览器实际上应该显示：

hello John

包含角度时出错

3 个答案: