AngularX 思维导图模板_ProcessOn思维导图、流程图

小记

小括号在内中括号在外 //小内中外

指令生命周期钩子hooks

ngOnChanges

触发：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。

作用：监听输入数据变化

ngOnlint

触发：第一个ngOnChange触发器之后

作用：初始化指令

ngDoCheck

触发：在Angular上下文发生变化时执行

ngOnDestroy

触发：指令销毁之前

ngAfterContentInit

指令内容初始化完毕

ngAfterContentChecked

Angular检查投影到其视图中的绑定的外部内容之后

ngAfterViewInit

Angular创建组件的视图后

ngAfterViewChecked

Angular检查组件视图的绑定之后

记：8个

技巧

dom操作

获取节点

构造函数注入ElementRef调用querySelector获取节点

使用@ViewChild直接绑定对应的ElementRef节点

与angular1的区别<br>

derive指令

组件指令

拥有模板的指令

结构指令

作用：添加和移除 DOM 元素改变 DOM 布局，对原生html标签进行功能扩展，而不是创建新节点

自定义指令

自带指令

ngFor

ng-content:节点内容占位符

select：值可以为标签、类名、id，是插入内容的选择器

属性指令

自定义指令

自带指令

[(ng-model)]：双向绑定数据

hidden

值为真时给元素添加display:none（区别于angular1不带!important）

作用：改变元素、组件或其它指令的外观和行为的指令。

对象

ElementRef

通过注解实现已有html节点（或指令内注入构造函数）后可获取对应节点/指令的实现类，进行dom操作和监听

QueryList

一个不可修改的条目列表

Renderer2：所在组件的渲染器，可进行html操作和监听

注解

@ViewChild单节点属性注解：获取单个节点，可配置选择器

@ContentChildren多节点属性注解：获取多个节点，可配置选择器

@ViewChildren属性注解

<br>@Directive指令类注解

@HostListener指令函数注解

监听节点事件

详细文档地址：https://gitee.com/jikold/booturl <br>或者：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

四大特性

模块化<br>

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