在本章中，我们将讨论如何建立一个用于Web应用程序开发的AngularJS库。我们还将简要研究目录结构及其内容。

当你打开链接https://angularjs.org/,时，你会看到两个选项来下载AngularJS库：

GitHub下载-点击此按钮进入GitHub，获取所有最新脚本。

下载-或点击此按钮，您将看到：

该屏幕提供了如下使用角度JS的各种选项：

下载和本地主机文件

有两种不同的选择：旧版本和最新版本。名字本身不言自明。旧版本低于1.2.x，最新版本为1.3.x。

我们也可以使用缩小、未压缩或压缩版本。

CDN接入：也可以使用CDN。CDN将提供世界各地的接入。在这种情况下，谷歌托管一个区域数据中心。这意味着使用CDN的移动主机的文件，从自身的服务器到一系列的外部因素都是有责任的。这也提供了一个优势，那就是如果访问者已经从同一个CDN AngularJS副本下载了你的网页，就不必再下载了。

在本教程中使用CDN版本库。

例子

现在让我们用AngularJS库写一个简单的例子。创建一个HTML文件myfirstexample.html，如下所示：

！doctype html html head script src=' http :https://Ajax . googleapi.com/Ajax/libs/angular js/1 . 3 . 0-beta . 17/angular . min . js '/script/head body ng-app=' myapp ' div ng-controller=' hello controller ' H2 welcome { { hello to . title } }到Yiibai的世界！/h2 /div脚本angular.module('myapp '，[])。控制器(' HelloController '，函数($ scope){ $ scope . hello to={ }；$ scope . hello to . title=' AngularJS '；});/script/body/html以下部分详细描述了上述代码：

包括AngularJS

我们已经在AngularJS JavaScript文件中包含了HTML页面，因此我们可以使用AngularJS:

head script src=' http :http://Ajax . googleapis.com/Ajax/libs/AngularJS/1 . 2 . 15/angular . min . js '/script/head在其官方网站上查看angular js的最新版本。

指向AngularJS应用程序

接下来，让我们告诉您HTML的一部分包含AngularJS应用程序。这可以通过将ng-app属性赋予AngularJS应用程序根目录中的HTML元素来实现。您可以将其添加到HTML元素或正文元素，如下所示：

Body ng-app='myapp'/body视图

这部分的观点：

div ng-controller=' hello controller ' H2欢迎{{helloTo.title}}来到Yiibai的世界！/h2/divng-controller告诉AngularJS什么是控制器和视图。HelloTo.title告诉AngularJS在这个名为Helloto.title的HTML位置写下“模型”的值。

控制器

控制器的一部分是：

编写angular.module脚本(' myapp '，[])。控制器(' HelloController '，函数($ scope){ $ scope . hello to={ }；$ scope . hello to . title=' AngularJS '；});/script这段代码首先在名为HelloController的控制器中注册名为MyApp的角模块控制器的功能。我们将在各自的章节中了解更多关于模块和控制器的信息。控制器的功能通过角度模块(.).控制器(.)函数调用。

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

执行

将上述代码保存为myfirstexample.htmll，并在任何浏览器中打开。您将看到以下输出：

当页面加载到浏览器中时，会发生以下事件：

HTML文档被加载到浏览器中，并由浏览器进行计算。加载AngularJS JavaScript文件并创建角全局对象。接下来，执行JavaScript的寄存器控制器功能。

AngularJS扫描整个HTML，找到AngularJS应用程序和视图。一旦找到视图，它将视图连接到相应的控制器功能。

然后AngularJS执行控制功能。然后，它呈现并填充控制器模型数据视图。这一页现在准备好了。