阅读 483

Angular 构建前端项目

本教程假设您已经安卓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前后端交互相关知识

项目性能优化

等等等

以后有时间再跟大家一起学习,感谢大家,喜欢的点个赞。谢谢!!!

文章分类
前端
文章标签