AngularX
2024-05-28 20:30:29 6 举报AI智能生成
angularX angular6
作者其他创作
大纲/内容
小记
小括号在内中括号在外 //小内中外
指令生命周期钩子hooks
ngOnChanges
触发：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。
作用：监听输入数据变化
ngOnlint
触发：第一个ngOnChange触发器之后
作用：初始化指令
ngDoCheck
触发：在Angular上下文发生变化时执行
ngOnDestroy
触发：指令销毁之前
ngAfterContentInit
指令内容初始化完毕
ngAfterContentChecked
Angular检查投影到其视图中的绑定的外部内容之后
ngAfterViewInit
Angular创建组件的视图后
ngAfterViewChecked
Angular检查组件视图的绑定之后
记：8个
技巧
dom操作
获取节点
构造函数注入ElementRef调用querySelector获取节点
使用@ViewChild直接绑定对应的ElementRef节点
与angular1的区别
derive指令
组件指令
拥有模板的指令
结构指令
作用：添加和移除 DOM 元素改变 DOM 布局，对原生html标签进行功能扩展，而不是创建新节点
自定义指令
自带指令
ngFor
ng-content:节点内容占位符
select：值可以为标签、类名、id，是插入内容的选择器
属性指令
自定义指令
自带指令
[(ng-model)]：双向绑定数据
hidden
值为真时给元素添加display:none（区别于angular1不带!important）
作用：改变元素、组件或其它指令的外观和行为的指令。
对象
ElementRef
通过注解实现已有html节点（或指令内注入构造函数）后可获取对应节点/指令的实现类，进行dom操作和监听
QueryList
一个不可修改的条目列表
Renderer2：所在组件的渲染器，可进行html操作和监听
注解
@Directive指令类注解
@ViewChild单节点属性注解：获取单个节点，可配置选择器
@ContentChildren多节点属性注解：获取多个节点，可配置选择器
@ViewChildren属性注解
@Directive指令类注解
@HostListener指令函数注解
监听节点事件
详细文档地址：https://gitee.com/jikold/booturl
或者：https://github.com/dongyanghe/booturl
或者：https://github.com/dongyanghe/booturl
自由主题
AngularJS 1.0
Filter(过滤器)
angularJS自带的
orderBy
number
limitTo
Json
filter
date
uppercase
Angular-filter插件
UI-Router(插件)
注入服务
$state
$view
$stateProvider
$urlRouterProvider
$locationProvider
$stateChangeState
$stateChangeSuccess
指令
ui-sref
ui-sref-active
ui-view
ui-state
Form Validation(表单验证)
input
checkbox
ng-true-value
ng-false-vale
ng-checked
radio
ng-value
required
date/datatime-local
min
max
ng-required
text/time/url/email/textarea
required
ng-minlength
ng-maxlength
ng-pattern(正则表达式)
ng-required
ng-trim
select
ng-selected
ng-options
ng-modal/ng-bind
ng-message
四大特性
模块化
MVC
双向绑定
指令
M双向绑定V指令C模块化的控制层
Data Binding(数据绑定)
{{}}(加载比较慢时会出现{{data}})
ng-bind
MVC(Modal，View，Controller)
modal指api获取的数据
view指页面块
controller指控制器
Directive(指令)
ng-app
page(页面)
ng-include
ng-hide/ng-show
ng-if
ng-disabled
ng-class/ng-style
ng-class-odd/ng-class-even
ng-repeat
ng-view
event(事件)
ng-change
ng-click/ng-dbclick
ng-focus
子主题
ng-checked
ng-switch
ng-submit
ng-readonly
ng-keydown/ng-keypress/ng-keyup
ng-mousedown/ng-mouseenter/ng-mouseleave/ng-mouseover
ng-controller
ng-init
Service(依赖注入)
$q
$http
$log
$location
$scope
$rootScope
$window
$timeout
$interval
$animate
$filter
$cookies/$cookieStore
$servicee
$factory
provide供应商
数据监控
$watch
监听数据
$digest
监控数据。不断循环，通过监控函数比较数据，有变化后执行watch里的回调
$apply
执行$digest
0 条评论
下一页
为你推荐
查看更多
抱歉，暂无相关内容 
