AngularJS教程
AngularJS是一个JavaScript框架，旨在使其更易于实现RIA Web应用程序。当我刚开始学习AngularJS时，没有太多详细的AngularJS教程可用。这就是为什么我决定编写自己的AngularJS教程的原因。
AngularJS由Google创建，这可能是其成功的更大原因之一。我们可以在这里找到AngularJS项目：
http://angularjs.org/
AngularJS基于MVC模式(模型视图控件)。因此，AngularJS将RIA应用程序分为模型，视图和控制器。使用HTML + AngularJS自己的模板语言指定视图。通过JavaScript对象和JavaScript函数指定模型和控制器。因此，视图是像HTML通常那样以声明方式指定的，而模型和控制器是像JavaScript通常那样强制性地指定的。
如果我们不知道声明式和命令式编程之间的区别，请不要担心。在学习AngularJS之前了解并不重要。此外，在网上找到定义非常简单。
AngularJS Hello World
这是用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模板系统的一部分。这告诉AngularJS在此位置将名为" helloTo.title"的"模型"值写入HTML。
"控制器"是这一部分：
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
});
</script>
此代码在名为" myapp"的角度模块中注册了名为" HelloController"的控制器功能。 Angular模块将在本教程的后面部分进行解释。
传递给控制器功能的$ scope参数是"模型"。控制器函数添加了一个" helloTo" JavaScript对象，并在该对象中添加了" title"字段。视图将其写入模型的HTML值就是" helloTo.title"值。
从头开始开发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"模块中。换句话说，名为" myapp"的AngularJS模块包含此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>
这是标准的HTML，除了" {{helloTo.title}}"部分。这部分告诉AngularJS将名为" helloTo.title"的模型值插入该位置的HTML中。
第五，我们需要一个控制器功能。控制器函数是一个普通的JavaScript函数，它带有一个参数：$ scope参数。 $ scope参数是控制器功能和相应视图要使用的模型对象。控制器功能可以将数据和功能插入模型对象。然后，视图可以使用数据和功能。
这是插入了控制器功能的我们的小型Web应用程序：
<!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"。该名称与在body元素的ng-app属性中指定的名称匹配。这样，AngularJS知道正在注册的控制器功能属于" myapp"模块，该模块恰好是该AngularJS应用程序正在使用的模块(在" body"元素的" ng-app"属性中指定)。
" controller()"函数调用是注册控制器函数本身的函数。传递给controller()函数的第一个参数是控制器函数的名称。这是我们在视图的ng-controller属性中引用的名称。第二个参数是控制器功能本身。
AngularJS应用程序执行
现在我们的示例应用程序已经完成，所以让我解释一下将此页面加载到浏览器中时发生的情况。
首先，将HTML文档加载到浏览器中，并由浏览器进行评估。此时，将加载AngularJS JavaScript文件，创建" angular"全局对象，并执行注册控制器功能的JavaScript。
其次，AngularJS扫描HTML以查找AngularJS应用和视图。当AngularJS找到一个视图时，它将该视图连接到相应的控制器函数。
第三，AngularJS执行控制器功能，并使用控制器填充的模型中的数据更新(渲染)视图。现在页面已准备就绪。
第四，AngularJS侦听浏览器事件(例如，更改输入字段，单击按钮，移动鼠标等)。如果这些浏览器事件中的任何一个需要更改视图，AngularJS将相应地更新视图。如果事件要求调用相应的控制器函数，AngularJS也会这样做。并非所有事件都需要调用控制器功能，即使由于事件而导致视图更新也是如此。
