AngularJS - 环境设置

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

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

在 GitHub 上查看- 单击此按钮，您将转到 GitHub 并获取所有最新的脚本。
下载 AngularJS 1 - 通过单击此按钮，您将在屏幕上看到一个对话框，如下所示 -

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

在本地下载和托管文件
- 有两种不同的选项：旧版和最新版。名称本身是自我描述的。旧版的版本低于 1.2.x，最新版的版本为 1.3.x。
- 我们还可以使用最小化、未压缩或压缩版本。
CDN 访问- 您还可以访问 CDN。CDN 使您可以访问区域数据中心。在本例中，为 Google 主机。CDN 将托管文件的责任从您自己的服务器转移到一系列外部服务器。它还提供了一个优点，如果您网页的访问者已经从同一 CDN 下载了 AngularJS 的副本，则无需重新下载。

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

例子

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

我们将 AngularJS JavaScript 文件包含在 HTML 页面中，以便我们可以使用它 -

<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 的模型值。

控制器

控制器部分是 -

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

此代码在名为myapp的 Angular 模块中注册一个名为 HelloController 的控制器函数。我们将在各自的章节中研究有关模块和控制器的更多信息。控制器函数通过 angular.module(...).controller(...) 函数调用在 Angular 中注册。

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

执行

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

Welcome AngularJS to the world of Tutorialspoint!

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

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