angularjs tricky

angularjs doc 必读内容：https://angular.cn/docs 
生命周期也是时序问题：https://angular.cn/guide/lifecycle-hooks

1 名称解释

1.1: ng-container. 
使用 ngIf,ngFor都需要在div,span,label等标签中实现
比如： <div *ngIf="_isDevMode" class="form-debug">
ng-container可以代替它们.而ng-container在运行时消失.
这样减少了div,span,label等标签的大量增加
参考: https://zhuanlan.zhihu.com/p/24781585
https://segmentfault.com/a/1190000009175508
1.2: ng-template 
有两个作用.
1.2.1： 使用ng-template可以在ts文件中写html.ng-template和@ViewChild连用
比如: <ng-template #saveButtonTemplate>
   <table>
     ...
</table> 
      </ng-template>

  export class PagTest implements OnInit, AfterViewInit, OnDestroy {
    @ViewChild('saveButtonTemplate') saveButtonTemplate: TemplateRef<any>;
......
  }
给template起名saveButtonTemplate,用ViewChild加载.template中的html就work了.
1.2.2：和ng-container 一样.语法不同而已
              <ng-template ngFor let-itemRow [ngForOf]="showItems" let-i="index">
              <ng-container  *ngFor="let itemRow of showItems" let i="index">

3 ngModel,[ngModel] and [(ngModel)] 区别
注意第三项比第二项多个()
[ngModel]="user.name" //变量单向绑定
友情提示：[ngModel] 是单向绑定，当表单中 name 输入框的值改变时，不会同步更新 this.user.name
[(ngModel)]=ngModelChange)="user.name = $event" //和变量双向绑定

举例分析参见: https://segmentfault.com/a/1190000009037539
4  ngModelChange 和 valueChanges 区别
两种双向绑定的方法，都是为各自的方法监听value的变化,处理value的变化
ngModel是在控件上直接绑定。然后用ngModleChange处理监听。
valueChanges是通过form，formGroup绑定控件。然后用subscribe 处理监听
https://www.cnblogs.com/dennis0525/p/7631301.html
5
http://www.runoob.com/try/try.php?filename=try_ng_model_status

描述		属性类
$valid	ng-valid	Boolean false (如果输入的值是合法的则为 true)。比如email的合法性检查
$invalid	ng-invalid	Boolean true 与valid相反
$dirty	ng-dirty	Boolean 如果值改变则为 true)。
$pristine	ng-pristine	Boolean false (如果值改变则为 false)。与dirty 相反

6 事件：onChange, onBlur
onblur：  只要input失去焦点就会触发 onblur事件。不管input框里面的值是否改变，都会触发事件。
onchange：只有当input框里面的值发生变化才会执行，这里加了值判断 
前者是任何一个字符输入都会触发，后者是整个框输入完成才触发.
前者的例子是Richard中error 提示消除,在框中，改动字符仍然是error，当将最后一个字符也改对了，这时是正确答案，则error 提示消失。
所以error 提示检测是通过每个字符变化检测的。
后者的例子是verify password，输入完password，鼠标焦点移除input，则发送rest验证
7 
css: 获取控件css
 Grome debug 模式:element--arraw选中控件--可以在右边的方框调边距---然后将value加到code中，<div style="margin-left: 15px">
 8 
formControlName = ngModel
<div>用户名：<input formControlName="nickname" name="nickname" type="text" required patter="[a-zA-Z0-9]+"></div>
<div>用户名：<input ngModel name="nickname" type="text" required patter="[a-zA-Z0-9]+"></div>
没有formcomponent.

9 Blob 是js write 二进制，比如download file等        
blob 主要功能是：
1) Blob构造函数
var blob = new Blob(data, type)
Blob构造函数接受两个参数：
参数data是一组数据，所以必须是数组，即使只有一个字符串也必须用数组装起来.
参数type是对这一Blob对象的配置属性，目前也只有一个type也就是相关的MIME需要设置 type的值：
'text/csv,charset=UTF-8' 设置为csv格式，并设置编码为UTF-8
'text/html' 设置成html格式
注意：任何浏览器支持的类型都可以这么用
var blob = new Blob(['我是Blob'],{type: 'text/html'});
2) 属性
blob.size   //Blob大小（以字节为单位）
blob.type   //Blob的MIME类型，如果是未知，则是“ ”（空字符串）
其他可以参考
https://www.kancloud.cn/dennis/tgjavascript/241840
====================================================
other:
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
1 语法：

“===”表示 value相同，类型相同
2 webstorm:
setting--editor--code style---Ts
常用快捷键:
ctrl+shift+O 优化（去掉多余头文件)；ctrl+shift+F 统一格式 .
常用第三方工具: postman

3 html:这么debug，ts的变量
                    <div *ngFor="let opti of _videoDialingOrderCtl.options">
                        {{opti}} 11       {{opti.value}} 222
                        {{opti.tag}}
                    </div>
  this._audioDialingOrderPreference1Ctl.options[0].val for ts set/get
  this._audioDialingOrderPreference1Ctl.options[0].tag for show in GUI;
4 ajax:
// 使用方法，但是这种方法已经过时了
doUsbCaptureStartRequest:function( filter ) {
        var ajaxOption = {
            url:Draco.urlPrefix + '/rest/pcap',
            method:'POST',
            params:{
                action:'startUsbCaptureWithFilter',
                filter:filter
            },
            scope:me,
            success:me.onUsbCaptureStartSuccess,
            failure:me.onUsbCaptureStartFailed
        };
//一段ajax request，回来的respond通过回调函数处理， 
success: call onUsbCaptureStartSuccess,failure call onUsbCaptureStartFailed 方法
现在改成用本质http.get  or this.http.post
    getJson(uri: string): Observable<any> {
        return this.httpGetJson(uri, false);
    }
    protected httpGetJson(url: string, cache: boolean = true): Observable<any> {
this.http.get(url, options)
    }