• 什么是Angularjs
  • 1 Angularjs 1X 版本的功能
  • 2 Angularjs 1X 版本的主要特性
  • Angularjs 1X版本之Hello world
  • 1 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。
下载函数库解压后，里面内容如下：

aNGULARjs应用架构 angular jsx_HTML

注意：

  • 其中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>
  • 运行结果

aNGULARjs应用架构 angular jsx_angularjs_02

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 之间使用。

3.6 AngularJS模块

     我们使用模块是为了在设计大型程序时可以进行模块化编程，将不同的功能分为各种模块。这个如何实现也将在以后说明。

3.6 AngularJS插件

      如果我们仅仅使用原生的AngularJS，可能功能会不足，因此我们会借助一下AngularJS插件，例如：ngRoute路由插件，ngResource数据交互插件，ngAnimate动画插件，ngSanitize解析HTML插件。

4.总结

      在此篇博客中主要介绍了：

  • 什么是AngularJS？
  • 然后写了一个Hello World程序
  • 然后又介绍了一些Angularjs的一些名词