这是我参与8月更文挑战的第1天，活动详情查看： 8月更文挑战
AngularJS 是一个 JavaScript 框架，旨在使实现 RIA Web 应用程序变得更容易。当我第一次开始学习 AngularJS 时，没有那么多详细的 AngularJS 教程可用。这就是我决定编写自己的 AngularJS 教程的原因。
AngularJS 是由 Google 创建的，这可能是其成功的更大原因之一。你可以在这里找到 AngularJS 项目：
AngularJS 基于 MVC 模式（模型视图控件）。因此，AngularJS 将您的 RIA 应用程序分为模型、视图和控制器。视图是使用 HTML + AngularJS 自己的模板语言指定的。模型和控制器是通过 JavaScript 对象和 JavaScript 函数指定的。因此，视图是声明式指定的，就像 HTML 通常那样，而模型和控制器是命令式指定的，就像 JavaScript 通常那样。
如果您不知道声明式编程和命令式编程之间的区别，请不要担心。在学习 AngularJS 之前了解它并不重要。此外，在网上找到定义非常简单。
AngularJS 你好
这是一个使用 AngularJS 制作的简单“hello world”示例，它显示了 AngularJS 应用程序的模型、视图和控制器部分：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
} );
</script>
</body>
</html>
在这个例子中，“视图”是这部分：
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
注意ng-controller属性。这个属性告诉 AngularJS 在这个视图中使用什么控制器。还要注意{{helloTo.title}}正文。这是 AngularJS 模板系统的一部分。这告诉 AngularJShelloTo.title在这个位置写入命名为 HTML的“模型”值。
“控制器”是这部分：
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
});
</script>
这段代码在名为“myapp”的角度模块中注册了一个名为“HelloController”的控制器函数。Angular 模块将在本教程后面解释。
$scope传递给控制器函数 的参数是“模型”。控制器函数添加一个helloToJavaScript 对象，并在该对象中添加一个title 字段。helloTo.title视图写入 HTML 的正是模型中的这个值。
从头开始开发 AngularJS 应用程序
现在您已经看到了 AngularJS 应用程序的模型、视图和控制器部分，让我们从头开始构建上面的示例应用程序，并对每个步骤进行解释。
AngularJS 应用程序是 HTML 和 JavaScript 的混合体（正如您已经看到的），所以我们首先需要的是一个 HTML 页面：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
其次，我们需要在 HTML 页面中包含 AngularJS JavaScript 文件，以便我们可以使用 AngularJS：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>
</body>
</html>
记得查看 AngularJS 的网站以获取最新版本的 AngularJS，这样你就不会一直使用我在这个例子中使用的版本。
第三，我们需要告诉 AngularJS 我们 HTML 页面的哪个部分包含 AngularJS 应用程序。您可以通过将ng-app属性添加到 AngularJS 应用程序的根 HTML 元素来实现。通常，根元素是html元素或body元素。在这个例子中，我将ng-app属性插入到body元素中：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp" >
</body>
</html>
在本例中，我将ng-app值设置为myapp. 这意味着必须将所有控制器功能添加到myapp模块中。换句话说，命名的 AngularJS 模块myapp包含此 AngularJS 应用程序的所有控制器。这个名字myapp是我选择的。您可以自由选择模块名称。
第四，我们需要一个视图。视图是包含在 HTML 元素中的 HTML 部分。下面是一个例子：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
</body>
</html>
在这个例子中，视图是div元素和它里面的一切。该div元素包含ng-controller 值为 的属性HelloController。这意味着，此视图使用的控制器函数名为HelloController。
视图div元素包含 HTML
<h2>Hello {{helloTo.title}} !</h2>
除了{{helloTo.title}}部分之外，这是标准的 HTML 。这部分告诉 AngularJShelloTo.title在该位置将命名的模型值插入到 HTML 中。
第五，我们需要一个控制器功能。控制器函数是一个普通的 JavaScript 函数，它接受一个参数：$scope参数。所述$scope参数是由控制器功能和相应的视图中使用的模型对象。控制器函数可以将数据和函数插入到模型对象中。然后视图可以使用数据和函数。
这是我们插入了控制器功能的小型网络应用程序：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
});
</script>
</body>
</html>
控制器函数通过angular.module(...).controller(...)函数调用以角度注册。
该angular对象是由包含在页面开头的 AngularJS JavaScript 创建的全局对象。
注意angular.module() 函数调用的第一个参数。该参数的值为"myapp"。此名称与元素中的ng-app属性中指定的名称相匹配body。这样 AngularJS 就知道正在注册的控制器函数属于该myapp模块，而该模块恰好是这个 AngularJS 应用程序正在使用的模块（ng-app在body元素中的属性中指定）。
该controller()函数调用就是注册控制器功能本身。传递给controller()函数的第一个参数是控制器函数的名称。这是您ng-controller在视图属性中引用的名称。第二个参数是控制器函数本身。
AngularJS 应用程序执行
现在我们的示例应用程序已经完成，让我解释一下当这个页面加载到浏览器时会发生什么。
首先将 HTML 文档加载到浏览器中，并由浏览器进行评估。此时 AngularJS JavaScript 文件被加载，angular全局对象被创建，并且你注册控制器函数的 JavaScript 被执行。
其次，AngularJS 扫描 HTML 以查找 AngularJS 应用程序和视图。当 AngularJS 找到一个视图时，它会将该视图连接到相应的控制器函数。
第三，AngularJS 执行控制器功能并使用控制器填充的模型中的数据更新（渲染）视图。该页面现已准备就绪。
第四，AngularJS 侦听浏览器事件（例如输入字段被改变、按钮被点击、鼠标移动等）。如果这些浏览器事件中的任何一个需要更改视图，AngularJS 将相应地更新视图。如果事件需要调用相应的控制器函数，AngularJS 也会这样做。并非所有事件都需要调用控制器函数，即使视图因事件而更新。
这就对了。您现在已准备好开始使用您自己的 AngularJS 应用程序。还有很多东西要学习，但是在本 AngularJS 教程的后续文本中会介绍（请参阅本系列教程中每个页面的左上角以获取该系列中的主题列表）。
