https://jsplumbtoolkit.com/community/doc/changelog.html

对于第三方CSS，由于考虑未来升级可能，及避免被开发人员直接强行篡改源码，所以一般不放在assets下。

有时候我们需要连续向后端API进行多请求，但需要同时处理这个结果。
采取请求结束，然后请求下一个，做法是这样子:

 this.http.get('/api/test1')
      .subscribe(res1 => {
        this.http.get('/api/test2').subscribe(res2 => {
          this.res1 = res1;
          this.res2 = res2;
        });
      });

这种做法的代码是难以维护，尤其，请求超过2个的话，所以不可取。

• NativeShadow DOM技术
• Emulated模拟
• None

与第三方CSS相似，比如我这里想添加socket.io-client支持

1. 安装socket.io-client

npm i socket.io-client --save-dev

2. scripts配置
   .angular-cli.json

 "scripts": [
        "../node_modules/socket.io-client/dist/socket.io.js"
      ]

3. 组件中声明

declare const io: any;

说明:scripts中配置的脚本，打包后会在scripts.[hash].bundle.js文件中

相关文档

• Promises vs Observables

ng属于前端框架，与后端不同，比如Java开发，debug一般是在IDE中，前端框架是JS，JS运行是在浏览器下，所以debug是在浏览器中。

1. 百度统计不支持SPA应用，另外Angular是谷歌自家推出的框架，所以无论如何也会好些。
2. 虽然谷歌国内被墙，在是统计服务可以正常使用，只是控制台访问需要翻墙。

有时需要遍历对象属性，但是Angular的ngFor指令是只支持遍历数组的，所以需要转换对象，这个时候可以考虑封装个管道，代码如下

import {Pipe, PipeTransform} from "@angular/core";
/**
 * 对象返回数组
 */
@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

实际上，就是用了JS的Object.keys()方法，该方法作用如下

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

管道做好后，使用方法如下:

<div *ngFor="let key of facetFields|keys">
key:{{key}},
value:{{facetFields[key]}}
      </div>

通过父子路由配置，可以将视图页面结构构造成树结构

个人推荐以下几个

• ngx-bootstrap
• primeng
• ng-zorro-antd

http://animationsftw.in/

对于静态文件先压缩再输出是再正常的事，但这种压缩都是动态的，每次请求都会先压缩再输出，浪费了很多cpu。如果前端加了反向代理缓存，那能减少这种浪费。但不是每个生产环境前端都有缓存的。而nginx有个模块Gzip Precompression，这个模块的作用是对于需要压缩的文件，直接读取已经压缩好的文件(文件名为加.gz)，而不是动态压缩，对于不支持gzip的请求则读取原文件。

https://angular.io/guide/browser-support

https://angular.io/api/common/NgTemplateOutlet

MARK

单页应用的jiathis使用是与我们jsp,php多页应用不同的。

错误方法

index页面下导入js文件，在组件模版中添加分享html代码块，这样运行必然报错，原因是js执行会早于组件，那个时候分享的dom元素还没生成

ng本身提供了方便的对象来快速访问dom元素，及修改dom元素的属性值等

情况说明

正常我们请求有一个带有锚点的链接，浏览器会自动帮我们定位到锚点位置处，但是如果我们的锚点位置HTML代码块是异步获取的，而浏览器会先于定位，这个时候就会造成锚点链接无效的错觉。

如果是包含html/css/js/iframe牵扯到使用安全机制

如题

期待结果

• 进入新页面，滚动条要回到顶部
• back历史，回到原先的位置

Angular开发，多数还是使用官方的CLI构建工具，但是官方CLI构建下的前端，index页面是死的，比如希望构建打包的index页面中是无法追加部分内容的，那么只能自己手动去实现了。

以下就是一些场景和对应的解决思路

当我们对下拉列表进行ngModel双向绑定，如果我们的对象是非字符串类型，比如boolean,当用户选择选项后，会变成字符串。

ng下是如何实现下拉菜单功能呢，除了控制选中的是哪个选项外，还要支持选中事件。

WEB性能优化的其中一种手段就是资源缓存，减少没必要的请求，占用服务器资源，网络带宽，同时也消耗客户端性能。

实际上我们SPA应用每次构建打包，我们的CSS，主模块，或者子模块内容变化的话，对应文件的hash指纹就会变化，通过这种Hash文件命名法，我们做到可以让用户会请求我们新的JS等文件，但是所有的JS毕竟还是以Index页面宿主页面，如果Index页面缓存化了，用户端还是不会去加载新的文件，所以我们要做到的是不缓存化index.html

进入一个视图页面时候，我们经常需要订阅参数，参数是有很多类型的，路径参数、查询参数,锚点参。我们如果利用嵌套形式写的话，会是这样子:

    this.route.queryParams.subscribe(qparams => {
            alert(qparams['title']);
            this.route.params.subscribe(params => {
                alert(params['id']);
            });
        })

参考链接:How to build Progressive Web Apps with Angular

场景

当我们展开某个弹出层，我们点击弹出层外部任意位置，实现弹出层关闭，如何实现呢，一个指令即可搞定。

click-outside.directive.ts

import {Directive, ElementRef, EventEmitter, HostListener, Output} from '@angular/core';

/**
 * Created by He on 25/12/17.
 * 点击挂载对象的外部节点，触发事件
 */
@Directive({
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective {
  @Output() clickOutside = new EventEmitter();

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }
}

场景

Angular生产部署，各个浏览器对于框架下实现的特定功能，兼容性不同，如果前端JS判断加载，并不是最佳实践，最好的方式还是后端渲染，通过浏览器头部，来按需返回特定的index页面

相关文档

• Angular vs. React vs. Vue: A 2017 comparison

树插件对比ztree,jstree等，认为jstree较为灵活，当然官网文档写的，个人认为很一般。

https://angular.io/guide/router

在官网路由章节，除了讲述视图跳转，路由定义之外，还讲了guard与resolver,那么我们不禁要问，resolver的使用场景是什么呢?

场景

登录指令挂载部分元素上，但点击元素，首先check用户是否登录，未登录，唤起登录窗体，同时拦截元素本身的点击事件行为，这样做，可以抽离对应登录状态的判断逻辑，简化本身组件内部的逻辑代码。整体提高代码维护性

1. 父子组件
2. 服务类

ng4.3推出拦截器功能,支持对于请求和回复的改变，也就是在发起请求前和收到回复后可以预先处理下。

官网原话:

A major feature of @angular/common/http is interception, the ability to declare interceptors which sit in between your application and the backend. When your application makes a request, interceptors transform it before sending it to the server, and the interceptors can transform the response on its way back before your application sees it. This is useful for everything from authentication to logging.