AngularJS
2017-01-03 13:35:56 1 举报AI智能生成
登录查看完整内容
angularjs
作者其他创作
大纲/内容
AngularJS
AngularJS应用解析
模版
模版是用HTML和CSS编写的文件，展现应用的视图
AngularJS编译器是完全可拓展的，这意味着通过AngularJS可以在HTML中构建自己的HTML标记
应用程序逻辑和行为
主要通过控制器实现
模型数据
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步，一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中
作用域
$rootScope是所有$scope对象的最上层
$scope对象并不负责处理和操作数据，只是负责视图和控制器之间的通信
$scope所有的属性，都可以自动被视图访问到
内部指令
ng-app
指定一个AngularJS应用
span style=\
ng-init
指定初始化应用程序数据
ng-model
指定模型，绑定输入与变量
ng-bind
将内容与变量值绑定
ng-if
根据值加载html元素
ng-hide
隐藏或显示HTML元素
ng-show
隐藏或显示一个HTML元素
ng-selected
值为真时选择该选项
ng-disabled
值为真控件不可用
ng-include
将元素内的内容显示为模版内容
ng-class
设置节点的类属性
ng-switch
ng-switch-when
ng-switch-default
ng-src
ng-href
ng-readonly
ng-repeat
重复集合中的每个项目的HTML元素
$index
$first
判断是否是第一个元素
$last
判断是否是最后一个元素
$middle
判断是否是中间元素
事件
内置界面事件
ng-change
ng-click
ng-blur
失去焦点时触发
ng-focus
ng-dbclick
ng-copy
ng-cut
ng-paste
ng-keydown
ng-keyup
ng-keypress
非字符键不会触发keypress事件
ng-mousedown
任何鼠标按键都会触发
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
内置服务事件
$emit事件
$includeContentRequested
ng-include内容重新加载
从ng-include指令触发
$includeContentLoaded
ng-include内容被请求
$viewContentLoaded
ng-view内容重新加载
从ng-view指令触发
$broadcast事件
$locationChangeStart
$locationChangeSuccess
$routeChangeStart
$routeChangeSuccess
$routeChangeError
$routeUpdate
$destroy
自定义事件
$broadcast
向下
传递event和data
$emit
向上
$on
响应
接收event和data
event属性
tartgetScope
currentScope
name
stopPropagation()
防止事件进一步冒泡
只适用于$emit
preventDefault()
设置defaultPrevented为真
defaultPrevented
如果调用了preventDefault()则为真
表单
必须指定id和ng-controller
标签
ng-valid
ng-invalid
ng-pristine
未被污染
ng-dirty
属性
$dirty
$valid
$invalid
$error
maxlength
minlength
url
min
max
email
required
表单控件
checkbox
radio
textarea
过滤器
currency
转化为货币格式
date
转化为日期格式
pre class=\"prettyprint\" style=\
filter
选出需要的元素
json
将JSON转化为字符串
limitTo
截取字符
对数组也可以进行相同的操作】
lowercase
转换为小写
uppercase
将字符串转换为大写形式
number
第二个参数可选，用来设置小数点的位数
orderBy
排序
第二个参数可选，指定是否逆向排序
控制器
控制器可以理解为一个函数
控制器包含作用域
控制器包含方法
路由
ng-view
$routeProvider
templateUrl
模版的地址
controller
template
resolve
依赖对象
值
工厂
服务
服务对象是单例对象，创建之后只有在关闭浏览器才会被清楚
内置服务
$location
返回当前页面的URL地址
需要在controller中使用
location服务不会重新加载整个页面，只是改变URL，可以用$window服务来设置地址
pre data-line-num=\"530 531 532 533\" class=\"代码无行号 prettyprint\" style=\
path()
返回当前路径
path('/')
把路径修改为'/'路由
replace()
让用户跳转后不能点击回退按钮
也可以设置参数修改成新的路径
absUrl()
获取编码后的完整URL
host()
获取主机地址
port()
获取端口
protocol()
获取协议
search()
获取查询串
也可以传入参数设置查询
pre data-line-num=\"348 349 350 351 352 353 354\" class=\"代码无行号 prettyprint\" style=\
url()
获取当前页面的URL
也可以传入参数设置新的URL
$route
在路由的各个阶段都会触发不同的事件
$http
向服务器发送请求，应用响应服务器传送过来的数据
get()
delete()
head()
post()
put()
jsonp()
$timeout
对应JS中的window.setTimeout函数
$interval
对应JS中的window.setInterval函数
每隔一段时间调用一次
$watch
监视某个变量，当变量的值变化时调用
$resource
一个创建资源的工厂
value
值可以改变
前面是变量名，后面是值
constant
值不可以改变
service
用new关键字创建
factory
provider
唯一一个可以注入config的服务
可以在provider对象传递到应用程序其他部分之前在app.config函数中对其进行修改
数据绑定
数据模型对象
$scope对象
双向数据绑定
一个简单的例子
pre data-line-num=\"192 193 194 195 196 197 198 199 200 201 202 203 204\" class=\"代码无行号 prettyprint\" style=\
控制器是一个函数
ng-app所处的层级的父级作用域是$rootScope，所有作用域都可以访问父级作用域
p data-line-num=\"98 99\" style=\
表达式
pre data-line-num=\"7 8 9 10\" class=\"代码无行号 prettyprint\" style=\
name是变量名
pre data-line-num=\"13 14 15 16 17 18 19 20\" class=\"代码无行号 prettyprint\" style=\
自定义过滤器
指令
创建一个简单的自定义指令
pre data-line-num=\"115 116 117 118\" class=\"代码无行号 prettyprint\" style=\
pre data-line-num=\"127 128 129 130 131 132 133 134 135 136 137\" class=\"代码无行号 prettyprint\" style=\
提示，使用.run访问$rootScope
pre data-line-num=\"287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321\" class=\"代码无行号 prettyprint\" style=\
给指令传递参数
pre data-line-num=\"359 360 361 362 363 364 365\" class=\"代码无行号 prettyprint\" style=\
0 条评论
回复 删除
下一页
