Angular入门开发实战

Angular 与 angular.js 不是同一种前端框架

angular.js在2010年10月发布，而 Angular 诞生于2016 年 9 月，比 React 和 Vue都要晚。

本文GitHub源码：https://github.com/xtqjh/ngx-test

配置开发环境

• 安装最新稳定版的Node
• 检查npm与node版本

npm -v
node -v

更新npm

npm i npm@latest -g

安装Angular CLI

npm i -g @angular/cli@latest

查看Angular版本

ng v

创建项目

ng new ngx-test

项目开发前调研技术栈追加相关参数

• 样式style 如 --style=scss 值可以是（css | scss | sass | less | stylus ）等
• 项目中使用路由routing 如 --routing 生成routing module
• 前缀 prefix 如 --prefix 或 -p 默认为app,参数自定义 比如 --prefix=zc

更多参数参考 ng new

启动项目

ng serve
ng serve --port 4100 --open

• 默认端口4200，可以通过port更改端口 --port 4100
• 启动时自动打开浏览器 --open

本地代理

开发环境项目在开始对接后端接口时通常需要配置本地代理

在项目根目录下添加 proxyconfig.json 文件

[
  {
    "context": [
      "/wmsgateway",
      "/tmsgateway",
      "/fileserver"
    ],
    "target": "http://172.16.111.11:8087"
  },
  {
    "context": [
      "/oagateway",
      "/hrgateway",
    ],
    "target": "http://172.16.111.12:8087"
  }
]

NG-ZORRO

NG-ZORRO是阿里出品的企业级Angular UI组件。在示例中，我们将使用NG-ZORRO表单、表格等。

在项目根目录下执行以下命令后将自动完成 ng-zorro-antd 的相关初始化配置。

ng add ng-zorro-antd
Installed packages for tooling via npm.
? Add icon assets [ Detail: https://ng.ant.design/components/icon/en ] Yes
? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes
? Choose your locale code: zh_CN
? Choose template to create project: blank

注意：默认会修改与添加以下文件

CREATE src/theme.less
UPDATE src/app/app.module.ts
UPDATE angular.json

NgModule

NgModule 把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。

选项	说明
declarations	用到的组件、指令、管道
providers	依赖注入服务
imports	导入需要的模块
exports	导出的模块
entryComponents	需提前编译好的模块

常用模块

模块名称	所属	说明
BrowserModule	@angular/platform-browser	浏览器运行
CommonModule	@angular/common	基础指令
FormsModule	@angular/forms	基础表单
ReactiveFormsModule	@angular/forms	响应式表单
RouterModule	@angular/router	路由
HttpClientModule	@angular/common/http	请求

运行在浏览器中的应用，必须在根模块AppModule中导入BrowserModule ，因为它提供了启动和运行浏览器应用的某些必须服务。BrowserModule 的provider是面向整个应用的，只能在根模块中使用。 特性模块只需要 CommonModule 中的常用指令。

创建登录界面

在根目录下执行以下命令通过 ng-zorro-antd 来创建登录组件

ng g ng-zorro-antd:form-normal-login login

脚手架会自动创建修改以下文件，生成的组件使用了响应式表单。

CREATE src/app/login/login.component.css
CREATE src/app/login/login.component.html
CREATE src/app/login/login.component.spec.ts
CREATE src/app/login/login.component.ts
UPDATE src/app/app.module.ts

创建列表分页页面

在根目录下执行以下命令通过 ng-zorro-antd 来创建登录组件

ng g ng-zorro-antd:table-row-selection-custom list

脚手架会自动创建修改以下文件，生成的组件使用了响应式表单。

CREATE src/app/list/list.component.css
CREATE src/app/list/list.component.html
CREATE src/app/list/list.component.spec.ts
CREATE src/app/list/list.component.ts
UPDATE src/app/app.module.ts

添加组件到路由

编辑 app-routing.module.ts 文件，添加组件路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { ListComponent } from './list/list.component';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'list', component: ListComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

添加组件路由链接

编辑 app.component.html 文件

<h1>{{title}}</h1>
<nav>
  <a routerLink="/login">登录</a>
  |
  <a routerLink="/list">列表</a>
</nav>
<hr>
<router-outlet></router-outlet>

编译项目

ng build
ng build --prod --output-path=dist/ngx-tms --base-href=/ngx-tms/

• –base-href=/ngx-tms/ 相当于在index.html中添加，默认
• –prod 通过UglifyJS 删除更多未使用的代码，使项目编译后更小体积
• –output-hashing=all 编译后输出文件名以哈希模式，便于缓存
• -output-path=dist/ngx-tms 指定编译后文件输出目录

更多参数参考 ng build