AngularJS 环境设置
AngularJS 环境设置
本章描述了如何设置用于 Web 应用程序开发的 AngularJS 库。它还简要描述了目录结构及其内容。
当您打开链接 https://angularjs.org/ 时，您会看到那里有两种下载 AngularJS 库的选项-
在 GitHub 上查看-单击此按钮，您将转到 GitHub 并获取所有最新脚本。
下载 AngularJS 1-单击此按钮，您将看到一个对话框，如下所示-
此屏幕提供了使用 Angular JS 的各种选项，如下所示-
在本地下载和托管文件
有两个不同的选项：旧版和最新版。名称本身是自描述的。 Legacy 版本低于 1.2.x，而最新版本为 1.3.x。
我们还可以使用最小化、未压缩或压缩的版本。
CDN 访问-您还可以访问 CDN。 CDN 使您可以访问区域数据中心。在这种情况下，谷歌主机。 CDN 将托管文件的责任从您自己的服务器转移到一系列外部服务器。它还提供了一个优势，如果您网页的访问者已经从同一个 CDN 下载了 AngularJS 的副本，则无需重新下载。
我们在本教程中使用该库的 CDN 版本。
示例
现在让我们使用 AngularJS 库编写一个简单的示例。让我们创建一个 HTML 文件
myfirstexample.html，如下所示-
myfirstexample.html，如下所示-
<!doctype html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>
<body ng-app = "myapp">
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
让我们详细看一下上面的代码-
包括 AngularJS
我们在 HTML 页面中包含 AngularJS JavaScript 文件，以便我们可以使用它-
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
您可以在其官网查看最新版本的AngularJS。
指向 AngularJS 应用
接下来，需要说明 HTML 的哪一部分包含 AngularJS 应用程序。您可以通过将 ng-app 属性添加到 AngularJS 应用程序的根 HTML 元素来实现。您可以将其添加到 html 元素或 body 元素，如下所示-
<body ng-app = "myapp">
</body>
查看
视图是这部分-
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
ng-controller 告诉 AngularJS 在这个视图中使用哪个控制器。
helloTo.title 告诉 AngularJS 在这个位置用 HTML 编写名为 helloTo.title 的模型值。
helloTo.title 告诉 AngularJS 在这个位置用 HTML 编写名为 helloTo.title 的模型值。
控制器
控制器部分是-
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
这段代码在名为
myapp 的 angular 模块中注册了一个名为 HelloController 的控制器函数。我们将在各自的章节中详细研究模块和控制器。控制器函数通过 angular.module(...).controller(...) 函数调用在 angular 中注册。
myapp 的 angular 模块中注册了一个名为 HelloController 的控制器函数。我们将在各自的章节中详细研究模块和控制器。控制器函数通过 angular.module(...).controller(...) 函数调用在 angular 中注册。
$scope 参数模型被传递给控制器函数。控制器函数添加一个
helloTo JavaScript 对象，并在该对象中添加一个
title 字段。
helloTo JavaScript 对象，并在该对象中添加一个
title 字段。
执行
将上述代码另存为
myfirstexample.html 并在任何浏览器中打开它。您将看到以下输出-
myfirstexample.html 并在任何浏览器中打开它。您将看到以下输出-
Welcome AngularJS to the world of Tutorialspoint!
在浏览器中加载页面时会发生什么？让我们看看-
HTML 文档被加载到浏览器中，并由浏览器进行评估。
AngularJS JavaScript 文件被加载，Angular global 对象被创建。
执行注册控制器功能的 JavaScript。
接下来，AngularJS 会扫描 HTML 以搜索 AngularJS 应用程序和视图。
一旦找到视图，它就会将该视图连接到相应的控制器函数。
接下来，AngularJS 执行控制器功能。
然后使用控制器填充的模型中的数据呈现视图。该页面现已准备就绪。