因为最近工作的转变 技能栈也由 React 向 Angular 进行了切换
用了两/三个月的 Angular 打算写一些文章 也好有个积累
详细的用法官方文档那边都很详细了
angular.io/
angular.cn/
我这边主要是从事务动身 写一些能快速上手/结合事务的用法
后续在事务中遇到的问题 我都会抽象出来记载在这里
ps 我会一直保护这个教学项目 github.com/rick-chou/a…
韶光机 👾
-
Angular 快速入门 ｜ 项目装备 ( angular.json / environment / proxy / tailwind ) ✅ ✅
-
Angular 快速入门 ｜ Rxjs ( lodash event version )
-
Angular 快速入门 ｜ Directive ( 自定义 Directive ) ✅ ✅
-
Angular 快速入门 ｜ Pipe ( 自定义 Pipe ) ✅ ✅
-
Angular 快速入门 ｜ Module ( 路由模块 / 共享模块 )
-
Angular 快速入门 ｜ Router ( 懒加载 / 预加载 )
-
Angular 快速入门 ｜ Http ( 错误处理 / 请求拦截 )
-
Angular 快速入门 ｜ Standalone Component ( 替代 Module ? )
-
Angular 快速入门 ｜ Deploy ( Github Action / Docker / Nginx )
-
Angular 快速入门 ｜ Library ( 快速完成一个自己的 library )
-
Angular 快速入门 ｜ Monaco-Editor
-
Angular 快速入门 ｜ Html-In-Service
-
…
下面进入正题 这节主要介绍 Angular 的项目装备
初始化 Angular 项目
首要装置 Angular CLI
npm install -g @angular/cli
然后运转 ng new xxx 就能够快速创建一个 angular 项目了
引进 eslint
参考 github.com/angular-esl…
履行 ng add @angular-eslint/schematics 就好了
下面我主要介绍两个文件 一个是 angular.json 还有一个是 environment 文件
angular.json
这是 angular 项意图装备文件 我摘取了一些比较重要的装备
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"configurations": {
"production": {
// ...
},
"development": {
// ...
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "ng-tutorial:build:production"
},
"development": {
"browserTarget": "ng-tutorial:build:development"
}
},
"defaultConfiguration": "development"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
}
}
这是 package.json 中的装备 能够对照着来看
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
能够看到 start / build / test 这三个指令和 angular.json 中 architect 下的三个字段是对应上的
这便是这三个字段便是发动指令的一些装备信息
一般的咱们的项目 通常有 development / production 两个环境
当咱们发动项意图时分通常会走指令装备告知项目用哪个装备
咱们能够在指令行中输入 ng serve --help
然后你会看到这个指令中有一个 option 是 -c, –configuration
-c, --configuration One or more named builder configurations as a comma-separated list as specified in the
"configurations" section in angular.json.
The builder uses the named configurations to run the given target.
For more information, see
https://angular.io/guide/workspace-config#alternate-build-configurations.
所以咱们发动项意图时分 其实应该是 ng server -c development 发动 dev mode 或许是 ng server -c production 发动 prod mode
但是咱们看到 script 中的指令并没有带上任何 option 来指定环境
这时分再看会 angular.json 能够看到在每一个指令的 Object 下都有一个 defaultConfiguration 来指定默许的 option
所以开发环境的 ng server 默许启用的是 development 形式 而构建项意图 ng build 则默许是 production 形式
注意 -c 后边的字段要和 angular.json 中的字段对齐 不能想当然的简写成 dev
environment
同样的也是 angular.json 中的装备 咱们看到有一条是
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
},
即在 production 形式下把 environment.ts 替换成 environment.prod.t
所以平常在使用的时分 咱们只需求引进environment.t这个文件就好了 然后更具发动项装备去做到引进不同的 environment 文件
proxy
新建 proxy.conf.json 然后修正 angular.json
修正 angular.json 或许 proxy.conf.json 这些 config 文件 需求 reload 项目 才能收效
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "proxy.conf.json"
},
},
文件内容如下 你能够将它当成一份模版 运用于自己的项目中
注意 这仅会在 dev 本地开发时 收效
{
"/api": {
"target": "http://124.223.71.181",
"secure": true,
"logLevel": "debug",
"changeOrigin": true,
"headers": {
"Origin": "http://124.223.71.181"
},
"pathRewrite": {
"^/api": ""
}
}
}
引进 tailwind css
reference tailwindcss.com/docs/guides…
- 引进依靠
npm install -D tailwindcss postcss autoprefixer
- 生成 tailwind 装备文件并修正
npx tailwindcss init
module.exports = {
content: ['./src/**/*.{html,ts}'],
theme: {
extend: {},
},
plugins: [],
};
- 在 styles.css 大局 css 入口处参加
@tailwind base;
@tailwind components;
@tailwind utilities;
🎉
angular-tutorial demo 现已上线了 能够在线检查啦 （ 功能就一丢丢 还在补充中 👨💻 ）
rick-chou.github.io/angular-tut…
Get Start 能够检查一些 library 在 angular 中 demo
例如 monaco-editor
Basic Syntax 能够看到一些根底语法的用法