angular知识点总结

标签：mode   更新   http   用法   grep   seo   .post   业务   exp   

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(‘#/路由地址’)
}

angular知识点总结

标签：mode   更新   http   用法   grep   seo   .post   业务   exp   

原文地址：http://www.cnblogs.com/weizaiyes/p/6518180.html