NG4/5/6/7 学习笔记

2018-05-29 本文已影响0人 pengji

还没开始写就变成了 NG5了。 =。= 僵硬

写了一段都变 Angular7 了，实在是学不动了。

基础语法的就不细表了，参考1写的更为优秀，写一下耽误了我时间的部分~

http - interceptor
由于之前用过axios的拦截器，所以在使用的时候理所应当的想到了NG的拦截器。

拦截器允许我们将中间件逻辑插入管线中。

主要是分为请求拦截器 (Request Interceptor) 和响应拦截器 (Response Interceptor)
引入第三方库
planA. npm 安装，并且安装相应的声明文件 @types/**
planB. 下载第三方到assets 下，在angular-cli 引入，并且在typings.ts 里进行声明。
```
  declare var $: any; 
  declare var jQuery: any;
```
父子路由
代理
在proxy.conf.json 下配置请求代理。防止跨域
pipe and resolver ..
ts相关
event bind

6.14

同一个Pipe 在两个module里引用，错误提示：在更高层级引用，so 在pipe中使用pipe.module 导出以下所有pipe供组件使用。
UI复用可以通过指令 directive
纯逻辑复用可以通过class extends 继承
Angular 2 HostListener & HostBinding

6.15 Typescript

Class
派生类通常被称作子类，基类通常被称作超类。
派生类包含了一个构造函数，它必须调用super()，它会执行基类的构造函数。而且，在构造函数里访问this的属性之前，我们一定要调用super()。这个是TypeScript强制执行的一条重要规则。

可能对于一部分前端来讲，类这个概念并不是很好理解，理解原型/原型链与 ts里类的编译前后关系是这部分学习的主要内容。

8.23 Ng-Alain Tips

less 降级
使用官方提供的package.json来安装依赖，否则会报一个less 的报错。官方建议降级 less -> ~2.7.0 , 安装 less-loader。删除原有的package.json 和 node_modules来重新安装。

ERROR in ./src/styles.less (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/less-loader/dist/cjs.js??ref--15-3!./src/styles.less)
Module build failed:

// region: PLACEHOLDER, IMPORTANT: don't remove
@import '~@delon/theme/styles/index';
^
'~@delon/theme/styles/index.less' wasn't found. Tried - /Users/jipeng/htdoc/frontend/alain/demo/src/~@delon/theme/styles/index.less,~@delon/theme/styles/index.less
      in /Users/jipeng/htdoc/frontend/alain/demo/src/styles.less (line 2, column 0)
ERROR in ./src/app/layout/passport/passport.component.less
Module build failed:

@import '~@delon/theme/styles/default';
^
'~@delon/theme/styles/default.less' wasn't found. Tried - /Users/jipeng/htdoc/frontend/alain/demo/src/app/layout/passport/~@delon/theme/styles/default.less,~@delon/theme/styles/default.less
      in /Users/jipeng/htdoc/frontend/alain/demo/src/app/layout/passport/passport.component.less (line 1, column 0)
ERROR in ./src/app/routes/passport/login/login.component.less
Module build failed:

@import '~@delon/theme/styles/default';
^
'~@delon/theme/styles/default.less' wasn't found. Tried - /Users/jipeng/htdoc/frontend/alain/demo/src/app/routes/passport/login/~@delon/theme/styles/default.less,~@delon/theme/styles/default.less
      in /Users/jipeng/htdoc/frontend/alain/demo/src/app/routes/passport/login/login.component.less (line 1, column 0)
ERROR in ./src/app/routes/passport/register/register.component.less
Module build failed:

@import '~@delon/theme/styles/default';
^
'~@delon/theme/styles/default.less' wasn't found. Tried - /Users/jipeng/htdoc/frontend/alain/demo/src/app/routes/passport/register/~@delon/theme/styles/default.less,~@delon/theme/styles/default.less
      in /Users/jipeng/htdoc/frontend/alain/demo/src/app/routes/passport/register/register.component.less (line 1, column 0)

error link#448
ng-alain 官方package.json

Analyzing bundle size with the Angular CLI and Webpack
遵循官方文档生成分析页面，然后遵循下面参考资料来写查看指令。

查看分析操作
Analyzing bundle size with the Angular CLI and Webpack

delon/auth
alain 封装的拦截器操作
封装后的 THIRDMODULES、路由的封装操作让人耳目一新
模块注册指导原则
alain主题样式自定义

TODO:

理解DI

9.13 angular-cli 接入CDN

在angular-cli中deployUrl，对应webpack的配置项是 output.publicPath可以为指定的站点添加cdn

抄了一份angualr-cli.json 常用配置

{
  "project": {
    "name": "angular-questionare",
    "ejected": false // 标记该应用是否已经执行过eject命令把webpack配置释放出来
  },
  "apps": [
    {
      "root": "src", // 源码根目录
      "outDir": "dist", // 编译后的输出目录，默认是dist/
      "assets": [ // 记录资源文件夹，构建时复制到`outDir`指定的目录
        "assets",
        "favicon.ico"
      ],
      "index": "index.html", // 指定首页文件，默认值是"index.html"
      "main": "main.ts", // 指定应用的入门文件
      "polyfills": "polyfills.ts", // 指定polyfill文件
      "test": "test.ts", // 指定测试入门文件
      "tsconfig": "tsconfig.app.json", // 指定tsconfig文件
      "testTsconfig": "tsconfig.spec.json", // 指定TypeScript单测脚本的tsconfig文件
      "prefix": "app", // 使用`ng generate`命令时，自动为selector元数据的值添加的前缀名
      "deployUrl": "//cdn.com.cn", // 指定站点的部署地址，该值最终会赋给webpack的output.publicPath，常用于CDN部署
      "styles": [ // 引入全局样式，构建时会打包进来，常用语第三方库引入的样式
        "styles.css"
      ],
      "scripts": [ // 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
      ],
      "environmentSource": "environments/environment.ts", // 基础环境配置
      "environments": { // 子环境配置文件
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": { // 执行`ng generate`命令时的一些默认值
    "styleExt": "css", // 默认生成的样式文件后缀名
    "component": {
      "flat": false, // 生成组件时是否新建文件夹包装组件文件，默认为false（即新建文件夹）
      "spec": true, // 是否生成spec文件，默认为true
      "inlineStyle": false, // 新建时是否使用内联样式，默认为false
      "inlineTemplate": false, // 新建时是否使用内联模板，默认为false
      "viewEncapsulation": "Emulated", // 指定生成的组件的元数据viewEncapsulation的默认值
      "changeDetection": "OnPush", // 指定生成的组件的元数据changeDetection的默认值
    }
  }
}

借鉴的github地址

静态文件生成带hash值，用来解决上传cdn后的缓存问题

// 解决方式 编译命令添加 --output-hashing=bundles
 "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json --env=local",
    "build": "ng build --env=prod --output-hashing=bundles",
    "pre": "ng build --output-hashing=bundles",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

12-28

DI 解释器的一些文章
@self @host @optional
官方 core api

3-19

NG-CLI 有的时候 angular.json 配置项无法满足所有需求(例如：分包输出css、js之类的)，可以通过额外配置webpack配置来手动实现。

"ngx-build-plus": "^7.7.6",  // 多添加这个

// 启动时 显式指明额外配置
"start": "ng serve --extraWebpackConfig webpack.extra.dev.js -o --proxy-config proxy.conf.json",
"build": "ng build --extraWebpackConfig webpack.extra.prod.js --prod --build-optimizer",

Ps: 如果想查看原始angular 的webpack配置，请移步 ./node_modules/@angular-devkit/build-*

主要参考：
Angular 4.x 修仙之路
 NG手册
 ts相关
 Angular4.x 引入第三方 JS