AngularJS Hello World示例
欢迎来到AngularJS Hello World示例。
我们非常高兴开始使用超级英雄MVW框架AngularJS(通常称为Angular)。
通过本系列教程，我们将介绍AngularJS的所有功能。
AngularJS Hello World
什么是AngularJS？
AngularJS是Google开发的客户端JavaScript框架，用于向HTML添加交互性。
如果您想创建一个响应迅速，易于组织，易于测试和维护的Web应用程序，AngularJS是最佳选择。
AngularJS自称为超级英雄MVW框架。
您可能想知道，它代表什么？模型视图无论如何，这里代表着"对您有用的一切"！ Angular带有完整的客户端解决方案，可以满足您的要求。
在这套教程中，我们将逐步介绍angular的所有功能。
前提条件
我们假定您非常熟悉以下内容：
- HTML
- JavaScript
- CSS
如果您不熟悉这些技术中的任何一种，我们建议您在学习AngularJS教程之前先学习HTML，JavaScript和CSS。
为什么选择AngularJS？
帮助以模块化方式构建结构良好的应用程序。
帮助创建响应式Web应用程序。
MVC架构的最佳实现
编写更少的代码。
强大而灵活。
简单易学。
处理依赖关系。
轻松与其他技术集成。
易于测试和维护。
AngularJS的核心功能
下表说明了AngularJS的核心功能。
| 核心功能 | 描述 |
|---|---|
| Template | 模板是带有新标记的HTML。 |
| Compiler | 它用于解析模板，然后实例化指令和表达式。 |
| Directives | 使用自定义属性和元素向HTML添加行为。 |
| Expressions | 允许在范围内读写变量和函数。 |
| Filter | 过滤表达式的值。 |
| Scope | 存储模型的上下文。表达式，指令和控制器都可以访问它。 |
| Model | 是用户与之交互并在视图中显示数据的地方。 |
| View | 这是输出。这就是用户看到的。 |
| Data Binding | 在模型和视图之间同步数据。 |
| Controllers | 我们将视图的业务逻辑定义为控制器。这控制了我们应用程序中的数据流。 |
| Dependency Injection | 处理对象和函数的创建和连接方式。 |
| Injector | 依赖性注入容器，用于相互注入任何值，工厂，服务。 |
| Module | 用于配置注入器的指令，控制器，服务，过滤器的容器。 |
| Services | 这支持“关注分离”；概念。这些是可重用的组件。 |
该表简要提到了AngularJS框架的核心功能。
我们将在接下来的文章中详细解释这些功能。
下载AngularJS
您可以通过以下链接下载从官方上下载AngularJS。
https://ajax.googleapis.com/ajax/libs/angularjs
您将看到类似的页面，然后单击下载。
有两个分支可供下载。
遗留版本，稳定版本和最新版本，AngularJS的不稳定版本。
您可以选择任何缩小，未压缩或者压缩的angular版本。
您还可以在下面的图像中找到最新Angular版本的CDN。
我们将使用稳定和最小化的angularJS版本。
单击下载按钮，然后将文件保存在您的文件夹中。
包括AngularJS
您必须在HTML文档中包含下载JavaScript文件(" angular.min.js")才能使用angularJS。
以下HTML显示了如何包含angular.min.js。
<!doctype html>
<html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
</body>
</html>
您也可以使用CDN，但请确保与angularJS联系以获取最新版本。
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
</body>
</html>
AngularJS Hello World示例
现在，我们要编写第一个AngularJS应用程序。
我们按照以下步骤创建了第一个Angular应用程序：
第一步是在HTML文档中包含angularJS文件。
您可以使用angular.min.js或者CDN。第二步是指示Angular应用的有效部分。
指令ng-app告诉Angular我们文档的哪一部分属于angular应用程序。指令ng-model和ng-bind将输入文本值绑定到指定HTML
元件。
我们将在以后的文章中解释这些概念。
现在，仅向您的第一个Angular应用打个招呼。
<!DOCTYPE html> <html lang="en"> <title>AngularJS First Application</title> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-app> <p>Enter Some text : <input type="text" ng-model="someText"></p> <p>Hello <span ng-bind="someText">!</p> </div> </body> </html>
您将在浏览器中看到以下输出。
键入时，输入的文本将显示在输入框下方。
ng-bind指令告诉Angular用给定的值替换元素的文本，并随着表达式值的改变而更新。
通常，我们不会在文档中直接使用ng-bind指令。
我们将模型值包装在双大括号中，例如{{some-expression}}。
下面的示例演示如何将模型值包装在双花括号内。
您将在浏览器中看到相同的结果。
<!DOCTYPE html>
<html lang="en">
<title>AngularJS First Application</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>Enter Some text : <input type="text" ng-model="someText"></p>
<p>Hello {{ someText }}!</p>
</div>
</body>
</html>
您将在浏览器中看到以下输出。
键入时，输入的文本将显示在输入框下方。
这是您的第一个有Angular的hello world应用程序。
希望您对" ng-app"，" ng-model"和" ng-bind"等Angular指令有所了解。
