还没开始写 就变成了 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 继承
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的默认值
}
}
}
- 静态文件生成带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-*
网友评论