angular知识点总结

angularjs

angular支持的运算

逻辑运算

比较运算

三目运算

调用字符串对象的成员方法

使用直接变量表示法创建对象

使用数组

(不可以)new var

(不可以)调用全局es

javascript对象中的分类

1)ECMAScript标准对象 Global String Data RegExp Array Object

可以在任何一个js解析器中使用

2)宿主对象

DOM: node element attribute

bom: window document

只能在浏览器中的js解释器中使用 不能在独立的服务器端js解释器(如NodeJS)中使用

3)用户自定义对象

angular指令

ng-app

ng-init

ng-bind

ng-controller

ng-repeat

ng-if

angular声明Model数据

1)使用Controller对象创建Model数据

ngApp -> Module -> Controller ->Model

1)声明ngApp

2)创建自定义模块 angular.module(‘myModule’,[ng]);

3)在应用中注册自定义模块: ng-app=”模块名”

4)在模块中声明controller

5)在view中指定controller对象的作用范围

6)在controller中声明model

Angular四大特征

1)MVC模型

Model 模型业务数据 (商品，订单 核心数据 从数据库来)

(前端应用中就是保存在JS变量，保存在特定范围内的模型变量)

View 视图 业务数据的呈现(前端应用中HTML)

Controller 控制器业务数据的获取删除修改(前端应用中function)

model:业务数据($scope,$rootScope.xx)

view:业务数据呈现 html+ngXXX

control:操作业务数据 .controller(“”,function(){})

2)双向数据绑定

方向1：Model绑定到View 只要Model变View随着变

方向2：View(表单控件)绑定到Model 只要View变 Model随着变

(最大的缺陷是)原生js dom只有特定事件的监听机制 没有监听数据/对象/值改变的机制

3)依赖注入

如何解决依赖关系：

1.主动创建方式

var c1 = new Car(); //主动创建依赖对象

var d1 = new Driver(c1); //传递依赖对象

2.被动注入(Injection)方式

module.controller(‘控制器’,function($scope,$interval){})

angular中的ngController指令在实例化控制器对象时 会根据指定的形参名

创建出控制器所依赖的对象 并注入给控制器对象-依赖注入现象

(如果使用yui压缩 会导致形参传递失败)

(解决：

....controller(‘myCtrl’,[‘$interval’,’$scope’,’$timeout’,function($interval,$scope,$timeout){

}])

可以被注入的对象：

1.$rootScope

2.$interval

3.$timeout

4.$log

5.$http

6.$location

…

)

4)模块化(Module)设计-体现 “高聚合低耦合”

Angular与jQuery关系

jquery操作思路：先找元素 再操作元素 $(…)

AngularJS操作思路：创建业务数据 绑定数据 维护数据

Angular已经把dom操作封装了

angular在加载时

判断 是否有jquery.js 如果存在用当前jq操作dom

不存在 会使用自定义的精简版本jqLite-只有核心jQuery方法

MVC模型

1)在一个Angular应用中可以声明多个模块

2)某个模块可以依赖于其他模块

3)有一个模块必须注册给ngApp指令 - 启动模块

4)一个模块中可以声明多种组件

1.controller

2.directive

3.service

4.filter

5.....

5)$scope表示当前控制器对象的有效范围/作用域

声明在某个$scope中的模型数据 一般情况下不能被其他控制器使用

想在多个控制器间共享/传递数据 可以在根作用域中–$rootScope每个Angular应用(ngApp)只有一个

唯一的$rootScope对象

控制器的本质用途 用于划分一个大型页面中的不同的div块 每个这样的块中都有自己专用的数据 以及可以

和其他块共享的数据

双向数据绑定

1)方向1：Model绑定到View 此后不论何时只要Model发生变化 View会同时更新

实现方法：{{}} ngBind ngIf ngRepeat ngShow ngChecked 等等几乎所有的现实数据指令都实现了

方向1的绑定

2)方向2：View绑定到Model 把视图中用户可以修改的HTML元素-即表单控件的值

绑定到一个Model变量上 此后 不论何时只要用户修改了表单控件的值

后台模型变量的值就会随之改变

实现方法：ngModel

为了监视Model变量是否真的改变 可以使用$scope.$watch()函数对Model数据进行监视

-单行文本输入域 ngModel可以把value属性绑定到Model变量

-复选框 ngModel可以把true/false 值绑定到Model变量

-单选框 ngModel可以把当前选中的单选框的value值绑定到Model变量

-下拉框 ngModel可以把当前选中的option的value值绑定到Model变量

4.ng模块提供的service组件

1.$rootScope 用于在所有的控件器间共享数据

2.$interval 周期性定时器服务

3.$timeout 一次性定时器服务

4.$log 提供5个基本的日志输出服务

5.$http 提供异步Http请求(AJAX服务)

$http.get() $http.post() $http.put() $http.delete()

resful

用法：$http({method:’GET’,url:’/xx.php’}).

success(fn).

error(fn)

简化版用法 $http.get(‘url’).success(fn);

$http.get(‘url’).success(fn);

5.ng模块提供的directive组件

1.ngApp

2.ngInit

3.ngBind

4.ngIf

5.ngRepeat

6.ngClick

7.ngMouseOver

8.ngSrc 为img标签指定src属性 可以防止404

9.ngShow 若赋值为true 则display:block 否则display:none

10.ngHide 若赋值为true 则display:none 否则display:block

6.ng模块提供的过滤器

Filter：把Model数据在显示时以某种特定的格式呈现

1.lowercase

{{表达式|lowercase}}

2.uppercase

3.number

4.currency

5.date

7.单页页面与多页页面

手动实现 单页面应用的步骤

1)创建一个完整的html页面 引入所需的所有css和js body中只需要一个伪页面的容器元素

如

2)创建若干个伪html页面/模板页面 只需要声明html片段

3)客户端请求完整的html页面 同时url中再追加一个特殊的标记

如index.html#/start-指定要加载的伪页面的名称

4)浏览器解析出的伪页面名称 查找一个字典 找到该名称对应的模板页面的url

window.location.hash

/start => template/main.html

/m => template/main.html

5)客户端发起异步ajax请求 获取模板页面的内容

加载到index.html的伪页面容器中

index.html 路由地址 模板页面

8.ngRoute

route: 路由 通过某条路径找到目标内容

ngRoute: 根据浏览器中url的特殊地址标记（形如#/xxx）

查找到该标记对应的模板页面 异步加载到当前页面的ngView指令中

1.创建一个完整的html页面 其中声明一个容器 ngView指令 引入angular.js和angular-route

2.创建多个模板页面(习惯上放在一个特别的目录下 如tpl)

3.创建Module 声明依赖于ng和ngRoute两个模块

4.在Module中配置路由字典

5.在浏览器中测试

http://IP地址/index.html#/路由地址

6.ng-view跳转

超链接

js location.href=”#/路由地址”

$scope.jump = function(){

//不能使用多页面跳转

$location.url(‘#/路由地址’)

}