再遇AngularJS

半年前做前端实习时迷迷糊糊的用了两个月的 Angular(说起来快一年前的事了),当时对依赖注入什么的完全不理解,最近用了几个月 Spring 才明白过来。这几天又用了 Angular搬砖(还是 1 版本,并没有使用 AngularJS 2 或者 AngularJS 4,版本更新太快了) ,正好可以好好学习下这个被称之为前端九阳神功的框架!(曾听说:AngularJS 是前端里的九阳神功,学会了AngularJS学什么都快;React 是前端里的九阴真经,学习过程中很容易走火入魔。)

AngularJS 作用

既然要用 AngularJS,那么把它加入我们的项目究竟有什么用呢?

  1. 双向数据绑定,非常棒的 MVVM 模型
  2. 把应用数据绑定到 HTML 元素
  3. 克隆和重复 HTML 元素
  4. 显示和隐藏 HTML 元素
  5. 表单输入验证

当然了,单纯的 JS 或者 JQuery 也可以完成这些工作,但是写完之后你会发现你的 JS 代码就像一坨翔,别说别人不喜欢看,过一个月你自己都能看疯了。

表达式

AngularJS 表达式形式: ,可以做数值、字符串常见的一些加减乘除操作,作用就跟 ng-bind 指令是一样的吧,还没发现两者有什么不同之处。AngularJS 表达式 与 JavaScript 表达式的异于同:

  1. 两者都可以包含字母,操作符,变量
  2. AngularJS 不支持条件判断,循环以及异常处理
  3. AngularJS 可以写在 HTML 中
  4. AngularJS 支持过滤器

作用域

作用域是应用在 HTML(视图)和 JavaScript(控制器)之间的纽带,它是一个对象,有可用的方法和属性,可同时应用在视图和控制器上。创建控制器时,$scope 以参数的形式注入。根作用域,即 $rootSceop,它可以作用在 ng-app 指令包含的所有 HTML 元素中;控制器方面,$rootScope 可以作用于整个应用中,是各个 controller 中 scope 的桥梁,用 $rootScope 定义的值,可以在各个 controller 中使用。

控制器

AngularJS 控制器:控制器是 Javascript 对象,由标准的 JavaScript 对象的构造函数创建。

过滤器

AngularJS 过滤器:过滤器可以使用一个管道字符(|)添加到表达式和指令中,内置过滤器有:currency格式化数字为货币格式,filter从数组中选择一个子集,大小写转换过滤器,根据某个表达式排序数组。当然了,你可以自定义过滤器。

服务

AngularJS 服务:服务是一个函数或对象。内置服务有 30 多个,常见的有 $location,$http,$timeout,$interval 等,这些都是对原生 JavaScript 中的一些函数的封装成 AngularJS 风格,在控制器中使用某项服务,需要注入。

依赖注入

AngularJS 中有五个核心组件可以用来作为依赖注入:value,constant,factory,service,provider。

指令

AngularJS 最强大的地方估计就是指令:以 ng 作为前缀的 HTML 属性(HTML5 允许扩展属性,以 data- 开头,所以你也可以使用 data-ng- 来让网页对 HTML5 有效)。指令的作用就是来扩展 HTML 功能的,AngularJS 自带很多牛逼的指令,当然用户也可以自定义指令。常用内置指令如下:

  • ng-app
  • ng-controller
  • ng-init
  • ng-modal
  • ng-bind
  • ng-repeat
  • ng-options
  • ng-include
  • ng-disabled
  • ng-show
  • ng-hide

自定义指令

四种调用指令的方式:

调用方式 restrict值
元素名 E
属性 A
类名 C
注释 M

表单

AngularJS 表单,form 元素一个 HTML5 新增的属性,novalidate 属性禁用了使用浏览器的默认验证(没想到浏览器还有默认验证呢),用了此属性,可让AngularJS重写标准的 HTML5 验证。

  • $dirty: 表单有填写记录
  • $valid: 字段内容合法
  • $invalid: 字段内容非法
  • $pristine: 表单没有填写记录

路由

还没具体学习,先不哔哔了。

动画

还没具体学习,先不哔哔了。

模块

AngularJS 模块:模块定义了一个应用程序(这里说的模块并不同于我们普通认为的一个程序可以分为多个模块,AngularJS 中一个模块就只是表示一个完整的应用),它是应用程序中不同部分的容器,它是控制器的容器。我们都知道 JavaScript 中应该避免使用全局函数,因为它们很容易被其他脚本文件覆盖,所以 AngularJS 模块让所有函数的作用域局限在该模块下,避免了该问题。我们自己的 AngularJS 脚本必须放在 html 文档底部(body闭合标签之前,因为我们要等上面使用了指令的dom结构渲染完毕,才能使用AngularJS来处理它们,不然你处理个屁啊),但是AngularJS库可以放在头部引入。