（1）AngularJS 1.X 之认识AngularJS

2024-04-27 15:06:11

字体：大中小

来源：转载

供稿：网友

什么是Angularjs1 Angularjs 1X 版本的功能2 Angularjs 1X 版本的主要特性Angularjs 1X版本之Hello world1 Hello World 代码示例2 解释Angularjs 1X版本执行过程Angularjs 1X 中专有名词1 AngularJS指令2 AngularJS表达式3 AngularJS控制器4 AngularJS过滤器5 AngularJS服务6 AngularJS模块6 AngularJS插件总结

1.什么是Angularjs？

AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，后来成为了 Google 公司的项目。AngularJS 弥补了 HTML 在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展 Web 应用中的 HTML 词汇，使开发者可以使用 HTML 来声明动态内容，从而使得 Web 开发和测试工作变得更加容易。 AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page applications）变得更加容易。

1.1 Angularjs 1.X 版本的功能

AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素”背后”添加代码AngularJS 支持输入验证

1.2 Angularjs 1.X 版本的主要特性

MVC 模块化与依赖注双向数据绑定指令与 UI 控件

2 Angularjs 1.X版本之Hello world

在开始我们的Hello World程序之前，我们首先应该下载我们的Angularjs函数库。下载地址为：Angularjs 1.6.1。下载函数库解压后，里面内容如下：

这里写图片描述

注意：

其中angular.js和angular.min.js为angularjs 1.6.1的函数库其他的函数库均为angular的插件库（目前用不到）

2.1 Hello World 代码示例

首先引入我们的angularjs类库<script src="js/angular.js"></script>然后创建angularjs的作用域（利用ng-app告诉 angular 应该管理 DOM 中的哪一些部分）<html ng-app> <head> <script src="js/angular.js"></script> </head> <body> </body></html>编写HelloWorld表达式<html ng-app> <head> <script src="js/angular.js"></script> </head> <body> {{'hello world'}} </body></html>运行结果

这里写图片描述

2.2 解释Angularjs 1.X版本执行过程

在这里解释几个问题：

问题一：Angularjs 在什么时候执行？答：AngularJS会在DOMContentLoaded事件触发时执行（自动执行）。然后解析Html页面

问题二：Angularjs解析HTML页面的步骤 1.首先寻找ng-app指令所在的DOM树，如果找到该DOM数，那么执行改DOM便是我们应用作用域。 2.载入和指令内容相关的模块。 3.创建一个应用的“注入器(injector)” 4.编译我们的ng-app作用域中的HTML标签

3.Angularjs 1.X 中专有名词

3.1 AngularJS指令

ng-app就是一个指令，用于指定angularjs的作用域ng-init指令用于初始化数据等等还有很多的指令，剩下的指令我们在以后介绍

3.2 AngularJS表达式`{{}}`

AngularJS 表达式写在双大括号内：{{ exPRession }}。 AngularJS 将在表达式书写的位置”输出”数据。AngularJS 表达式很像 javaScript 表达式：它们可以包含文字、运算符和变量。

表达式中包含字符串（注意：字符串有双引号,或者单引号）{{"hello world"}}表达式中包含数字（注意：这里我们是使用变量，区别字符串有引号）<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： {{ quantity * cost }}</p> </div>表达式中有对象<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> 表达式中有数组<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div>

3.3 AngularJS控制器

AngularJS控制器控制AngularJS应用程序的数据.我们一般是使用ng-controller 指令定义应用程序控制器，在控制器中制定我们的数据，然后在html通过表达式输出我们的数据（也可以通过指令输出我们的数据）。

3.4 AngularJS过滤器

AngularJS 过滤器可用于转换数据，我们一般可以向表达式中添加过滤器控制我们的输出，也可以在制定中添加我们的过滤器，同样我们可以在控制器中使用过滤器，我们还可以自定义我们自己的过滤器，具体的将在以后介绍。

3.5 AngularJS服务

在使用Angular 时，很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到，controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在 service 里，service 可以用来永久保存应用的数据，并且这些数据可以在不同的 controller 之间使用。