AngularJS - 环境设置( Environment Setup)

本章介绍如何设置要在Web应用程序开发中使用的AngularJS库。它还简要描述了目录结构及其内容。

当您打开链接https://angularjs.org/ ，您会看到有两个选项可供下载AngularJS库 -

View on GitHub - 通过单击此按钮，您将转到GitHub并获取所有最新脚本。
Download AngularJS 1 - 通过单击此按钮，您可以在屏幕上看到如下对话框:

此屏幕提供了使用Angular JS的各种选项，如下所示 -

Downloading and hosting files locally
- 有两种不同的选择:遗产和最新。名称本身是自我描述的。 Legacy的版本低于1.2.x，最新的版本为1.3.x.
- 我们还可以使用最小化，未压缩或压缩版本。
CDN access - 您还可以访问CDN。 CDN使您可以访问区域数据中心。在这种情况下，谷歌主机。 CDN将托管文件的责任从您自己的服务器转移到一系列外部服务器。它还提供了一个优势，如果您的网页的访问者已经从同一CDN下载了AngularJS的副本，则无需重新下载它。

我们在本教程中使用了库的CDN版本。

例子 (Example)

现在让我们使用AngularJS库编写一个简单的示例。让我们创建一个myfirstexample.html的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 IoWiki!</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>

View

视图是这部分 -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of IoWiki!</h2>
</div>

ng-controller告诉AngularJS该视图使用哪个控制器。 helloTo.title告诉AngularJS在这个位置用HTML编写名为helloTo.title的模型值。

控制器 (Controller)

控制器部分是 -

<script>
   angular.module("myapp", [])
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

此代码在名为myapp的角度模块中注册名为HelloController的控制器函数。我们将在各自的章节中更多地了解modules和controllers 。控制器功能通过angular.module（...）。controller（...）函数调用以角度注册。

$ scope参数模型传递给控制器函数。控制器函数添加一个helloTo JavaScript对象，并在该对象中添加一个title字段。

Execution

将上述代码保存为myfirstexample.html并在任何浏览器中打开它。你会看到以下输出 -

Welcome AngularJS to the world of IoWiki!

在浏览器中加载页面时会发生什么？让我们看看 -

HTML文档被加载到浏览器中，并由浏览器进行评估。
加载AngularJS JavaScript文件，创建角度global对象。
执行注册控制器功能的JavaScript。
接下来，AngularJS扫描HTML以搜索AngularJS应用程序以及视图。
找到视图后，它会将该视图连接到相应的控制器功能。
接下来，AngularJS执行控制器功能。
然后，它使用控制器填充的模型中的数据呈现视图。该页面现已准备就绪。

<上一篇.AngularJS - 概述

AngularJS - MVC架构( MVC Architecture).下一篇>

AngularJS - 教程

AngularJS - 概述