本教程假设您已经安卓node环境，并保证node版本在10.14.0版本以上
本教程演示环境
Angular CLI: 8.3.29
Node: 10.15.0
OS: win32 x64
Angular: 8.2.14
一、搭建 Angular 项目
参考文档：Angular 中文网
安装 Angular CLI
要使用 npm 命令安装 CLI，请打开终端/控制台窗口，输入如下命令：
npm install -g @angular/cli
创建 Angular 项目
ng new my-app
运行应用
cd my-app
ng serve --open
ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。
--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。
如果你的安装和环境搭建成功了，就会看到如下页面：
废话不多说，我们先集成一套 UI 组件库进来，增益我们的开发速度
二、集成UI组件库 NG-ZORRO
参考文献： NG-ZORRO官网
// 注意：
// 如果您已经按照第一步完成项目的初始化，成功构建好了Angular项目
// 您不再需要根据 NG-ZOORO的快速入门教程一步步做
// 假如你还没构建Angular项目，您根据NG-ZOORO的快速入门教程，您能构建一个完成的、并包含NG-ZOORO库的项目
初始化ng-zorro-antd
ng add ng-zorro-antd
在控制台窗口，输入以上命令，您需要进行一些选择
// 这里是询问您是否需要在assets文件夹下，添加ng-zorro的icon图标。 y允许， N不允许
Add icon assets:(y/N)
// 是否添加一个theme（主题）文件。y允许， N不允许
Set up custom theme file: (y/N)
// 选择您的本地语言。按左右键选择，并按回车确认
Choose your locale code:
// 选择一个模板。按上下方向键选择，并回车确认
Choose template to create project
我的设置是， y、y、zh_CN、sidemenu 短暂的等待执行之后，重新启动项目
ng serve --open
我们若能看到如下页面，则项目集成UI库NG-ZORRO成功了
有了UI库，Angular框架，前端大部分页面我们也能画了，但是
但是
。。。。。
我们还没法和后端交互，作为一个崇拜前后端分离模式的重度患者
根据以往经验，我肯定要做个代理，代理后端服务，方便开发
三、代理后端服务
参考文献: Angular中文网：代理到后端服务器
根据文档指引
1. 在src/目录创建一个proxy.config.json文件，编写如下代码
{
"/api": {
"target": "您的后端服务器地址/api/",
"changeOrigin": true,
"secure": false,
"pathRewrite": {
"^/api": ""
}
},
}
2. 在项目根目录，找到angular.json文件，并在文件中找到server配置项
...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ng-demo:build"
},
"configurations": {
"production": {
"browserTarget": "ng-demo:build:production"
}
}
},
...
3. 在option选项下面添加 proxyConfig 属性，属性值是proxy.config.json文件的路径
...
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
},
...
这样，我们的代理就配置好了
四、集成第三 js 库
有时候我们避免不了需要使用过第三方js库，比如我们常用的画图js库echarts
这个其实很简单，我们同样找到 angular.json 文件，找到 build 选项
......
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
......
然后找到 option 下面的style，script两个属性
"assets": [
...
],
"styles": [
...
],
"scripts": [
...
]
下载一个您需要的第三方库，我这里以echarts为例
npm install --save echarts @types/echarts
@types/echarts 这个库是echarts的ts支持，因为echarts是js写的，而angular是ts，安装这个是为了API提示
安装成功之后，我们在 angular.json 文件的 build 编译步骤中 option 下 scripts 中添加如下代码
"scripts": [
...
"./src/assets/static/js/echarts.min.js",
...
]
这样，你就把 echarts 全局注入到了您的项目中，使用echarts时，不需要单独 import 或者 require 引入
以上代码添加好之后，需要重新启动项目，才能生效
重新启动项目之后，在组件中还不能直接使用echarts，会报echarts未定义错误
解决该问题你只需要在组件，.ts文件头部假如如下代码：
declare const echarts;
这样 echarts 就可以生效了
您还可以添加其他的库，作为 scripts 值数组的其他项就可以了
比如我们常用moment.js
会插入js库，css库就相对简单很多了，您只需要在style属性下。 加入您的css、less或sass文件路径就可以
五、国际化
Angular 官网有关于国际化的介绍，但本人不太喜欢那种国际化方式
这里介绍 ngx-translate 的使用方式
下载 ngx-translate 以及 相关的 loader
npm install --save @ngx-translate/core @ngx-translate/http-loader
提示：translate 的 core 和 http-loader 有版本要求，必须匹配响应的版本。
提示：下载的时候，请参考 ngx-translate 相关的的版本介绍
将 ngx-tranlsate 接入项目
在顶层 module（这里是app.module.ts） 里加入如下代码:
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
...
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
...
@NgModule({
...
imports: [
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (HttpLoaderFactory),
deps: [HttpClient]
}
})
],
...
})
export class AppModule { }
注意：HttpLoaderFactory 工厂函数必须是导出函数，而不是内联函数。使用的时候，需要加上括号(HttpLoaderFactory)
您还可以给程序设置默认的语言, 像这样：
...
TranslateModule.forRoot({
defaultLanguage: 'en'
})
...
序初始化TranslateService
在 app.component.ts 添加如下代码：
...
import {TranslateService} from '@ngx-translate/core';
...
constructor (
private translate: TranslateService
) {
//添加语言支持
translate.addLangs(["en", "zh"]);
//设置默认语言，一般在无法匹配的时候使用
translate.setDefaultLang('zh');
}
...
构建 .json 文件
在 ./assets/i18n/ 目录中创建支持语言的 .json 文件
提示：文件名称跟您在 app.component.ts 中设置的，所支持语言相同
我们分别创建 zh.json 和 en.json 并添加一些代码
// zh.js
{
"language": "简体中文",
"age": "年龄",
......
}
...
// en.js
{
"language": "English",
"age": "Age",
"HELLO": "Hello {{value}}"
......
}
这样创建好之后，到组件 .html 文件中像这样使用
<div>{{ 'language' | translate:param }}</div>
<p>{{ 'age' | translate:param }}</p>
在组件 .ts 文件中这样使用
// get方法是异步的
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
console.log(res);
//=> 'Hello world'
});
如果希望同步，使用instant方法
const hello = this.translate.instant('HELLO', {value: 'world'});
//=> 'Hello world'
更多 API 请参考 ngx-translate/core 文档
关于项目构建 还有其他一些知识点，比如：
懒加载
路由相关知识
http前后端交互相关知识
项目性能优化
等等等
以后有时间再跟大家一起学习，感谢大家，喜欢的点个赞。谢谢！！！
