来公司有二十天了，前一个星期在学bootstrap框架，接着就是angular，到现在也有两周了，学的还是一脸懵逼，不知所以然。
昨天老大直接把公司的项目代码发给我，让我先熟悉代码，心想着估计不久可能就要开始干活了。看了下代码，大概认出一些东西，知道用到的框架是angular，但具体的还是一点都不懂，所以从昨晚开始又重新刷了下angular教程。PS：之前学了一遍，由于基础并不是特别好，然后教程讲的也比较枯燥，很多时候是看着看着就要睡着了，所以对angular只了解了大概。现在重新认真的学一遍angular，顺便写写自己的收获，也算是温故知新吧。
先搭建angular框架 （此段代码必须背下来），代码如下：
<head>
<script src=" ../angular.min.js">
</head>
<body>
<div ng-app='hd' ng-controller='ctrl'>
<script>
var m=angular.module('hd' []);
m.angular('ctrl',['$scope' function($scope){
}])
</script>
</body>
先引用angular的插件，然后定义一个模块hd,(注意 以ng-开头的都为控制器中的内容)，接着在模块中定义一个控制器ctrl, 接着在controller中放入视图模型scope PS：此处写法有两种，具体看文档，但推荐用以上代码模式。
angular两个特点：双向数据绑定，依赖注入（此处以后详解）。
先了解具体内部结构：
1.angular内部指令：
1)ng-app不指定值时，angular会加载一个不带特定模块的应用；
ng-app指定值时，angular会加载一个与这指令有关的模块。
且ng-app不可缺失。
2）ng-init
初始化数组的数据，即给定义的指令赋初值，
3) ng-model
将当前的作用域中的属性同给定的元素进行绑定，如果作用域中的属性不存在，他会隐式的创建一个并添加到当前的作用域中去。
4)ng-show与ng-if
此用于页面显示标签的内容或隐藏其内容，且两者作用想反。
5)ng-click
点击，用于按钮Button
6）ng-switch
转换。
7）ng-repeat
用于遍历数组或字符数组，代码如下：
<body ng-app='' ng-controller=' ctrl'>
<div ng-repeat="a in arr">{{a}</div>
</body>
注释——其中，arr为定义在视图中的一串字符 eg:"arr={1,2,3}"
8）track by
在使用ng-repeat时防止元素出现重复。
9)
<li ng-repeat="t in attr" track by $index>{{t}}</li>
10)
2.控制器controller
控制器的使用，此处主要考虑其访问权限即可；
子级的controller可以访问父级的控制器，即子级控制器克继承父级控制器内元素的内容，但是父级不可访问子级控制器的内容，且同级控制器作用域之间也不可访问。
3.过滤器
常用过滤器
1)orderBy 元素的排序
<li ng-repeat="item in items" | orderBy:'age' ">{{item}}</li>
注释：遍历集合items中的各个元素，并将按照age大小进行排序。
| 为管道连接符，用于连接两个功能块，且可以继续增加其它功能，继续连用该管道连接符
2）limitTo 限制返回元素的个数
{{hello | limitTo:2}} -->he
{{hello |limitTo:-2}}-->lo
3) filter 过滤指定内容且不分字段的筛选出内容
<li ng-repeat="x in arr" | filter="三">{{x}}</li>
遍历arr中的内容，并将还有“三”的数据查询出来。
----------------------------------------
自定义过滤器
代码： {{"hello" | myfilter}}
*********
app.filter("myfilter" function(){
return function(val){
return val.toUppperCase();
}
})
将hello变为大写。
--------------------------------------------
五个常用过滤器：
currency ；date ；number ；lowercase ；uppercase
currency：货币符号
date ：日期
number ：保留小数点后的位数
lowercase/ uppercase ：转换大小写
用法：
{{price | currency :"$"}}
其它几个类比。
{{time | date :"yyyy-MM-dd hh-mm-ss"}} 时间过滤
4.
自定义指令
声明自定义指令先调用directive方法
调用方法和调用controller方法一致，m.directive{***};
在方法内部会有配置项 模板template ，templateUrl ,详解见教程。
replace 调换内容。
restrict：可选参数，决定该指令在dom中以何种方式声明
默认值为EA，除此之外还有ECMA，
E：标签
C：样式
M：注释
A：属性
（一般在模块中定义，根据具体要求选用适合的声明方式）
5. 将控制器绑定到自定义指令上
首先声明控制器（必须声明），然后在定义自定义指令。
1）
eg:
app.controller("mycontroller" ,["$scope" function($scope){
$scope.name=" ";
}])
app.directive("mydirective" function (){
scope：{
name："@" //单向数据绑定，即父级向子级单向传递数据。
}
return {
controller:"mycontroller" //进行数据绑定。
}
})
transclude ：保存信息
2）自定义指令写在controller中
<div ng-app="mycontroller">
<my-directive></my-directive>
</div>
<script>
var app=angular.module("mycontroller" [])
app.directive("mydirective" function(){
return {
template:<div> 自定义标签</div>
}
})
-----------------------------
自定义指令中scope:{}是angular中最强大的功能。当指定scope为对象时，表明创建了一个隔离域，此作用域不与其他任何作用域产生依赖影响，即不可继承父级的值。
指定 {} 中的内容时，可通过一系列前缀标识符引用元素的属性，这些前缀分别为@ / = / &或attr
@ 标识符，单向绑定（也称字符串绑定）
add directive("mydirective" function(){
return{
scope：{
myname:“@”
name:“@myname” //与上的意思一样，写法稍有区别 ;表示单向数据绑定
psg:"=" //等于号 = 表示双向数据绑定
pfun:"&" //方法传递
// & 将父级的方法向指令传递，供指令调用 ;其它用法与@用法一样。
}
}
})
附上课件视频地址：http://study.163.com/course/courseLearn.htm?courseId=1004018030#/learn/video?lessonId=1047988799&courseId=1004018030
