Angular JS 1.x 学习笔记

1. 完整的目录结构

dest:放置最终编译后的JS
docs:写的文档

node_modules:node.js里工作

src:源代码

test:测试代码

根据设计图,用bootstrap的编写规则,先写模板代码,然后再去写JS代码

一级目录:

  • package.json
  • node_nodels: 插件集合,放在工程目录里,便于团队合作,工具统一
  • app:
    1. 模板
    2. js: app.js(作为启动点,相当于C语言里的main函数),controller.js, directive.jsfilters.jsservice.js

2. 忘了是什么内容了。。。。

在模板注入中,注入的模板如果是已ng开头的,则是AngularJS自带的模板
ng-bind 和双花括号的使用选择: 首页(第一个页面用ng-bing),后面的页面用双花括号。

3. Directive 指令

AngularJS自带的预设指令都有ng-前缀,比如说ng-app

AngularJS API Document: https://docs.angularjs.org/api

AngularUI: https://angular-ui.github.io/ (一些现成的封装好的指令,可以省去自己写指令的精力)

return的对象中,包含的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
return {
name: '',
priority: 0,
terminal: true,
restrict: '',
replace: '',
transclude: true,
scope: {},
require: fn,
controller: fn,
template: '',
templateUrl: '',
compile: fn,
link: fn
}

3.1 name:

表示当前scope的名称,一般使用默认值。

3.2 priority:

多个directive在同一个DOM上执行时的优先级。

3.3 restrict: restrict: ''**

四种指令方式:

  • “A”: 属性(attribute) eg: <div hello><div>(默认方式)
  • “E”: 元素(element) <hello></hello>
  • “M”: 注释`<!” directive “>
  • “C”: CSS样式类 `

推荐使用 属性 和 元素 这两种方式

3.5 transclude: replace: true/fasle(在使用指令可以嵌套内容)

1
2
3
<hello>
<!-- 一些代码 -->
</hello>

如果想在指令中,添加一些代码,就需要开启 transclude,使其为true

另外一种形式: transclude:'element'

3.5.1 两种形式的比较: transclude: truetransclude: 'element'

假定我们有一个directive:

1
<hello>{{who}}</hello>

在JS中定义的template是:

1
2
3
4
<div>
<div ng-transclue></div>
<h1>Nice to Meet You!</h1>
</div>

transclude: true: 在html页面中的效果

1
2
3
4
5
6
<div>
<div ng-transclude>
{{who}}
</div>
<h1>Nice to Meet you!</h1>
</div>

transclude: 'element': 在html页面中的效果

1
2
3
4
5
6
<div>
<div ng-transclude>
<hello>{{who}}</hello>
</div>
<h1>Nice to Meet you!</h1>
</div>

注意:在element模式下,replace: true/false的变化,会导致最后的输出不同。

3.5.2 transclude()函数 ???还没明白。。。。。。。。。。。!!!

transclude和scope

如果使用transclude,则无论什么情况,都会生成一个新的作用域,这个作用域直接原型继承于父作用域,它的作用域和指令生成的作用域一样,二者属于并列关系

  • tra

3.2 scope (独立scope):

在定义一个指令时,如果不显示声明scope,那么这个指令的作用域就是父作用域。当声明scope: ture或者scope: {},指令就会生成一个自己的作用域(scope: true是原型继承,scope: {}是独立的作用域)。

scope绑定策略:
18

  • “@”: 用于绑定字符串,返回一个字符串(也可以指定属性名称,如@attr。如果没有指定属性名,则本地名称将于DOM中的属性名称一致。
  • “=”:用于双向绑定。将local scope属性与parent scope进行双向绑定。(如果没有指定attr名称,如=a1,=attr1',则本地名称将于属性名称一致。
  • “&”:用于传递函数, 调用父层作用域上的函数

19

小坑:在scope中定义的属性名称,如果是类似scope: 'aTitle',则在html文件中,便签中属性引用时,应该使用a-title=...

3.6 template:

如果template是网页的话,可以用cache缓存:

使用module”.run(function($templateCache){})形式来缓存directive里的template页面。在template中,使用$templateCache.gett(“hello.html”)去除网页

3.7 templateUrl:

用法和template差不多,不过这里传入的模板是所指定的url加载后得来的。加载模板时异步的,所有compilie和linking的动作会先暂停,等加载完后继续执行 ??????

3.8 Controller: controller: function($scope, $element, $attrs, $transclude) { };

通过数据注入传入参数(因此参数的名称是固定的),注入的参数:

  • $scope:
  • $element:
  • $attrs:
  • $transclude

controller构造函数,会在pre-linking步骤之前进行初始化,并且controller允许其它directive通过require来指定名称来获取某个controller,并将该controller作为一个对象。

3.9 require: require: '?^hello'

directive中require的作用是请求其它的controller,并传入房钱directive的linking函数中。require函数需要传入一个directive控制器的名称,如果找不到对应名称的控制器,则会抛出一个error。require有两个前缀可以使用:

  • ‘?’: 不要抛出异常
  • ‘^’: 允许查找父控制器。

可以通过require进行依赖外部的指令,从而可以在link中可以接收到第四个参数。通过link中第四个参数,从而可以和外层的指令进行交互(对外层指令中所暴露的方法进行操作)。

3.10 Compile:

因为link没有依赖注入,function函数中的各个参数的传递只要顺序对了就行,参数名字可以随便取。

17

  • (JS文件)在directive中,link函数的参数scope中的属性,对应template里的变量。attrs中的属性,对应controller中的变量
  • (html文件)如果以属性的方式使用某个directive,则传入directive中某个属性是某个controller的属性(即在link函数中,attrs参数的属性)
  • howToload(): 在不同控制器中调用不同的指令

用@比用link更快

可以使用scope.loadData() 或者scope.$apply()来调用方法

controller, link和compile的关系:

controller先运行,link和compile同时存在时,compile会覆盖link的内容。

directive的 内置指令

最重要的标签之一是 form

4. Service&Provider

在MVC中,不要去复用controller。但是多个controller中有相同代码时,可以把相同的代码抽取出来变成service。

4.1 HTTP服务

  • timeout: 在向后台发起请求时,防抖动处理
  • 自定义service: 不能有$前缀。在对angularJS进行注入时,应该放在最后。

Service, Provider,Factory本质都是Provider

4.1.1 Filter

4.1.2 其它常用的Service: 内置的共24个

内置的service,一定要会用

$compile:编译服务

$filter:数据格式化工具,内置了8个

$interval:

$timeout:定时器

$locale:用于国际化文件

$location:

$log:

$parse:

$http: 封装了Ajax

其它知识点

  • forEach: angular.forEach(values, function(value, index, array/objs){}, context);
参数 作用
values 需要遍历的集合
value 遍历时当前的数据
key 遍历时当前索引
array 需要遍历的集合,每次遍历时都会把objs原样的传一次

index 和 array参数可以不写

返回值:对obj的引用

  • $.scope:

    .$watch(' ', function{});: 监控模型的变化

核心原理解析

1. AngularJS的启动过程分析

2. 依赖注入原理分析: Povider与Injector

3. 指令的执行过程分析

4. $scope与双向数据绑定分析