Angular學習筆記

配置開發環境

開發工具

Node.js

VS Code / Intellij IDEA / WebStorm

搭建NPM私服

推薦使用Nexus，概念和配置方法同Maven私服一致，分為proxy、hosted、group三類。

創建proxy如下：

Remote URL:?https://registry.npmjs.org

然后創建hosted、group，不再贅述。

最后在home下創建.npmrc文件，其內填寫public地址，如下：

registry=http://localhost:8081/repository/npm-public/

NPM

Angular 6開發，Node.js版本要求8.x或以上，npm版本要求5.x或以上。運行node -v、npm -v查看版本。

在Windows上下載安裝包安裝即可。在RHEL、CentOS、Fedora上執行如下命令：

$?curl?--silent?--location?https://rpm.nodesource.com/setup_8.x?|?sudo?bash?-or$?curl?--silent?--location?https://rpm.nodesource.com/setup_10.x?|?sudo?bash?-$?sudo?yum?-y?install?nodejs

安裝Node.js后，更新npm:

npm?i?npm@latest?-g

NPM幫助

npm?helpnpm?-l?列出所有命令用法npm??-h?查看某一命令用法，如：npm?ls?-hnpm?help?npm?在瀏覽器中查看幫助文檔，如：npm?help?index?(Index?of?all?npm?documentation)npm?help?foldersnpm?help?install

運行npm ls 可查看版本是否匹配。

運行npm view [package] 可查看某一package發布的版本，如:

npm view ngx-bootstrap [versions]

進入package目錄下，運行npm version可查看安裝的版本。

Angular CLI

安裝Angular CLI

npm?install?-g?@angular/cli@latest

注意：要用@latest

更新Angular CLI

Global package:

npm?uninstall?-g?@angular/cli npm?cache?clean #?if?npm?version?is?>?5?then?use?`npm?cache?verify`?to?avoid?errors?(or?to?avoid?using?--force)npm?install?-g?@angular/cli@latest

Local project package:

#?use?rmdir?/S/Q?node_modules?dist?in?Windows?Command?Prompt#?use?rm?-r?-fo?node_modules,dist?in?Windows?PowerShellrm?-rf?node_modules?distnpm?install?--save-dev?@angular/cli@latestnpm?install

ng幫助

ng?help?顯示所有命令的幫助 ng?[command?name]?--help??顯示某一命令的幫助ng?add??Add?support?for?a?library?to?your?projectng?new??[options]?Creates?a?new?directory?and?a?new?Angular?app. ng?generate??[options]?Generates?and/or?modifies?files?based?on?a?schematic. ng?update??[options]?Updates?your?application?and?its?dependencies. ng?build??[options]?Builds?your?app?and?places?it?into?the?output?path?(dist/?by?default). ng?serve??[options]?Builds?and?serves?your?app,?rebuilding?on?file?changes. ng?test??[options]?Run?unit?tests?in?existing?project. ng?e2e??[options]?Run?e2e?tests?in?existing?project.

常用參數：

--aot Build using Ahead of Time compilation

--base-href Base url for the application being built

--i18n-file Localization file to use for i18n

--prod Flag to set configuration to "prod"

Available schematics:

serviceWorker

application

class

component

directive

enum

guard

interface

module

pipe

service

universal

appShell

library

Angular CLI 6.0新增功能

ng add、ng update、ng generate library是Angular CLI 6.0新增功能。

ng?add??Add?support?for?a?library?to?your?project ng?update??[options]?Updates?your?application?and?its?dependencies. ng?generate?library??create?a?library?project?within?your?CLI?workspace

更新package

在Project根目錄下運行ng update后會顯示需要更新的package，可以選擇更新某一package或全部package。

package.json中的version語法請參見The semantic versioner for npm

npm-check-updates

使用npm-check-updates是另一種更新package的方式：

安裝npm-check-updates

npm i -g npm-check-updates

升級

ncu -u

安裝新版本

npm install

UI組件

UI組件，建議從Angular官網推薦的前四個中選擇，它們都是開源/免費的：ag-Grid、Amexio、Angular Material、NG-ZORRO。

ag-Grid(The best javaScript grid in the world)

數據表格組件，支持排序、篩選、編輯、選擇、分組、聚合、旋轉等許多強大的功能和操作

Amexio

130+ UI組件

支持拖拽

響應式網頁設計

57個主題

支持圖表、地圖、儀表盤

Angular Material

Angular官方組件庫，提供表單控件、導航、布局、按鈕、彈出窗口、數據表格等組件。

NG-ZORRO

阿里出品的企業級UI組件，由阿里計算平臺事業部、阿里云等不同部門的一些小伙伴在原業務組件的基礎上共同構建而成，設計完全兼容并遵守Ant Design的規范，并定期會與 Ant Design React 版本保持功能同步。NG-ZORRO符合國人使用習慣，國內用戶較多。

ng-zorro-antd 是 Angular 版本 Ant Design 的實現，這意味著只有 Ant Design 支持的交互、功能才會被 ng-zorro-antd 實現。

NG-ZORRO

初始化配置

進入項目文件夾，執行以下命令將自動完成 ng-zorro-antd 的初始化配置，包括引入國際化文件，導入模塊，引入樣式文件等

ng?add?ng-zorro-antd

定制主題

初始化項目時，運行ng add ng-zorro-antd --theme 會自動配置主題文件src/theme.less，修改文件內容即可自定義主題。樣式使用了Less作為開發語言，版本為2.7。

代碼演示

NG-ZORRO使用簡單，文檔、示例代碼全面，摘錄示例代碼如下：

表單

import?{?Component,?OnInit?}?from?'@angular/core'; import?{ ??AbstractControl, ??FormBuilder, ??FormGroup, ??Validators }?from?'@angular/forms'; @Component({ ??selector:?'nz-demo-form-normal-login', ??template:?` ???? ?????? ???????? ?????????? ???????????? ?????????? ??????????Please?input?your?username! ???????? ?????? ?????? ???????? ?????????? ???????????? ?????????? ??????????Please?input?your?Password! ???????? ?????? ?????? ???????? ?????????? ????????????Remember?me ?????????? ??????????Forgot?password ??????????Log?in ??????????Or ??????????register?now! ???????? ?????? ???? ??`, ??styles:?[?` ????.login-form?{ ??????max-width:?300px; ????} ????.login-form-forgot?{??????float:?right; ????} ????.login-form-button?{ ??????width:?100%; ????} ??` ??] }) export?class?NzDemoFormNormalLoginComponent?implements?OnInit?{ ??validateForm:?FormGroup; ??submitForm():?void?{????for?(const?i?in?this.validateForm.controls)?{??????this.validateForm.controls[?i?].markAsDirty();??????this.validateForm.controls[?i?].updateValueAndValidity(); ????} ??} ??constructor(private?fb:?FormBuilder)?{ ??} ??ngOnInit():?void?{????this.validateForm?=?this.fb.group({ ??????userName:?[?null,?[?Validators.required?]?], ??????password:?[?null,?[?Validators.required?]?], ??????remember:?[?true?] ????}); ??} }

效果圖：

NG-ZORRO Table

使用push或splice修改nzData的數據不會生效，需如下操作：

//?增加數據this.dataSet?=?[?...this.dataSet,?{??key????:?`${this.i}`,??name???:?`Edward?King?${this.i}`,??age????:?'32',??address:?`London,?Park?Lane?no.?${this.i}`}];//?刪除數據this.dataSet?=?this.dataSet.filter(d?=>?d.key?!==?i);

測試

使用NG-ZORRO組件的頁面，測試時需導入BrowserAnimationsModule和NgZorroAntdModule：

TestBed.configureTestingModule({?????imports:?[ ???????BrowserAnimationsModule, ???????NgZorroAntdModule ?????] })

自定義Pagination

使用NG-ZORRO的Pagination組件，演示如何自定義組件，如何使用HttpParams。

自定義組件PageComponent

page.components.ts

import?{Component,?EventEmitter,?Input,?Output}?from?'@angular/core';import?{DEFAULT_PAGE_SIZE}?from?'../../vo/page'; @Component({ ??selector:?'app-page', ??templateUrl:?'./page.component.html'})export?class?PageComponent?{ ??@Input() ??total:?number; ??@Input() ??pageIndex:?number; ??@Input() ??pageSize?=?DEFAULT_PAGE_SIZE; ??pageSizeOptions?=?[10,?20,?30,?40]; ??@Output() ??pageChange:?EventEmitter?=?new?EventEmitter(); ??indexChange(index:?any)?{????this.pageChange.emit({'pageIndex':?index,?'pageSize':?this.pageSize}); ??} ??sizeChange(size:?any)?{????this.pageChange.emit({'pageIndex':?1,?'pageSize':?size}); ??} }

page.components.html

?? ??