AngularJS学习笔记

1、什么是angularjs

• AngularJS是一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。
• AngularJS有着诸多特性，最为核心的是：MVC、模块化、双向数据绑定、指令系统、依赖注入等。

2、为什么使用angular

先看一个例子

{{name}}

当页面加载完毕后，AngularJS自动开始执行
HTML页面中，ng-xxx的属性称之为指令(Driective)
ng-app 告诉AngularJS该标签是ng的应用程序管理的边界
ng-model 指令把文本框的值value绑定到user.name上
{{user.name}} 表达式用来取出绑定在user.name上面的值，显示在页面

（2）angular语法

• 定义一个应用
  
• 定义一个模块
  var myapp = angular.module('myapp',[]);

第一个参数是控制器的名称,第二个参数是执行时会执行的函数

• 定义控制器
  myapp.controller('myCtrl',["$scope",function($scope){ }])

为应用中的模型设置初始状态,通过$scope(上下文模型)对象把数据模型或函数行为暴露给视图

• 表达式
  {{}}

它们可以包含文字、运算符和变量
如 {{ 1 + 2 }} 或 {{ ‘hello ’+ ‘,world’}}

指令

ng-xxx

ng-bind 来实现模型（Model）数据向视图模板（View）的绑定
ng-init 初始化模型（Model）也就是$scope。
ng-click、ng-dblclick 点击事件/双击
ng-show/hide控制元素是否显示，true显示、false不显示
ng-repeat 重复 可以将数组或对象数据迭代到视图模板中
ng-class控制类名
ng-switch、on、ng-switch-when 可以对数据进行筛选。
自定义指令
app.directive('xxx',function(){})
restrict 定义指令的声明方式 'E'元素 'A' 属性
replace 如果指令作为标签，替换标签本身
transclude 如果标签内部有内容，如何替换
template/ templateUrl 模板 / 模板的url
$templateCache 缓存模板
link 通过link可以给dom元素绑定事件

作用域

• 根作用域

整个应用范围（ng-app所在标签以内）都是可以被访问到的。

• 子作用域

通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。
`

{{name}}

  
{{name1}}
  
{{age}}
  

`

过滤器

{{ | }}

| 来过滤

• 内置过滤器
  1、currency将数值格式化为货币格式
  2、date日期格式化，'yyyy-MM-dd hh:mm:ss'
  3、filter 筛选 并返回一个新数组，其条件可以是一个字符串、对象、函数
  4、json将Javascrip对象转成JSON字符串。
  5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
  6、lowercase/uppercase将文本转换成小/大写格式
  7、number数字格式化，可控制小位位数
  8、orderBy对数组进行排序，第2个参数可控制方向
• 自定义过滤器

通过模块对象实例提供的filter方法自定义过滤器。
`

{{'你好'| bf}}

实例化模块时，依赖注入ngRoute
var app = angular.module('app',['ngRoute']);

配置路由模块
app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/a',{ controller:'ACtrl', templateUrl:'a.html' }) .otherwise({ redirectTo:'/a' }); }])

布局模板
通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。

• 路由参数

两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数。
第1个参数是一个字符串，代表当前URL中的hash值。
第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。
a、template 字符串形式的视图模板
b、templateUrl 引入外部视图模板
c、controller 视图模板所属的控制器
d、redirectTo跳转到其它路由

带参数的路由

获取参数，在控制中注入$routeParams可以获取传递的参数