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.单页页面与多页页面

多页应用	单页应用(spa)
项目中有多个完整的HTML页面	项目中只有一个完整的HTML页面(其他都是html片段)
使用超链接，js实现跳转	使用超链接，伪js
所有的页面请求都是同步的-客户端等待服务器响应时浏览器一片空白	所有的“伪页面请求”都是异步请求-客户端在等待下一个页面片段到时，仍可以显示前一个页面内容
不便于实现两个页面间切换过场动画	很容易实现两个伪页面间的过场切换动画
浏览器需要不停的创建(删除)完整的dom树	浏览器只需要创建一个完整的dom树 此后的伪页面切换只是在换某个div中的内容
每个页面需要加载自己的css和js文件	整个项目的css和js文件只需要加载一次

手动实现 单页面应用的步骤
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(‘#/路由地址’)
}