AngularJS 环境设置

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

当您打开链接 https://angularjs.org/ 时，您会看到那里有两种下载 AngularJS 库的选项-

AngularJS 环境设置_https://bianchenghao6.com_【AngularJS 教程】_第1张
在 GitHub 上查看-单击此按钮，您将转到 GitHub 并获取所有最新脚本。
下载 AngularJS 1-单击此按钮，您将看到一个对话框，如下所示-

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

在本地下载和托管文件
有两个不同的选项：旧版和最新版。名称本身是自描述的。 Legacy 版本低于 1.2.x，而最新版本为 1.3.x。
我们还可以使用最小化、未压缩或压缩的版本。
CDN 访问-您还可以访问 CDN。 CDN 使您可以访问区域数据中心。在这种情况下，谷歌主机。 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

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

控制器

控制器部分是-

<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 对象，并在该对象中添加一个
title 字段。

执行

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

Welcome AngularJS to the world of Tutorialspoint!

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

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

AngularJS 概述

AngularJS 上传文件