博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular学习笔记
阅读量:5830 次
发布时间:2019-06-18

本文共 9859 字,大约阅读时间需要 32 分钟。

配置开发环境

开发工具

  • VS Code / WebStorm

搭建NPM私服

推荐使用Nexus,概念和配置方法同Maven私服一致,分为proxy、hosted、group三类。

创建proxy如下:
Angular学习笔记
Remote URL:
hosted、group创建方法不再赘述。创建完毕后在home下创建.npmrc文件,其内填写group地址,如下:
registry=

NPM

Angular 7,Node.js版本要求8.x或10.x。Angular 8,Node.js版本要求10.9.0或以上。

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

查看nodejs、npm版本:

node -vnpm -v

更新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

Angular项目创建后,可运行以下命令查看package版本信息:

npm ls 列出所有package
npm view [package] 查看package发布的版本,如:
npm view ng-zorro-antd versions 列出所有ng-zorro-antd版本
npm view ng-zorro-antd 查看最新ng-zorro-antd版本信息
npm view ng-zorro-antd@7.5.0 查看ng-zorro-antd@7.5.0版本信息
进入node_modules/package目录下,运行npm version可查看安装的版本。

Angular CLI

安装Angular CLI

npm install -g @angular/cli@latest

注意:要用@latest

更新Angular CLI
Global package:

npm uninstall -g @angular/clinpm cache verifynpm install -g @angular/cli@latest

Local project package:

# use rmdir /S/Q node_modules in Windows Command Prompt# use rm -r -fo node_modules in Windows PowerShellrm -rf node_modulesnpm 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 appng generate
[options] Generates and/or modifies files based on a schematicng update
[options] Updates your application and its dependenciesng 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 changesng test
[options] Run unit tests in existing projectng 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 
Add support for a library to your projectng update
[options] Updates your application and its dependencies.ng generate library
create a library project within your CLI workspace

更新package

Angular每6个月发布一个主版本,可运行ng update更新package。

ng update
在Project根目录下运行ng update会显示需要更新的package,可以选择更新部分或全部package。

ng update    We analyzed your package.json, there are some packages to update:      Name                               Version                  Command to update     --------------------------------------------------------------------------------      @angular/cli                       6.2.8 -> 8.0.2           ng update @angular/cli      @angular/core                      6.1.10 -> 8.0.0          ng update @angular/core      @angular/core                      6.1.10 -> 7.2.15         ng update @angular/core      rxjs                               6.3.3 -> 6.5.2           ng update rxjs    There might be additional packages that are outdated.    Or run ng update --all to try to update all at the same time.

package.json中的version语法请参见

npm update

npm update

使用npm-check-updates是另一种package更新方式:

  • 安装npm-check-updates
    npm i -g npm-check-updates
  • 升级
    ncu -u
  • 安装新版本
    npm install

UI组件

UI组件,建议从Angular官网推荐的前几个中选择,它们都是开源/免费的:、、、、。

  • ag-Grid(The best Javascript grid in the world)
    数据表格组件,支持排序、筛选、编辑、选择、分组、聚合、旋转等许多强大的功能和操作
  • Amexio
    1. 130+ UI组件
    2. 支持拖拽
    3. 响应式网页设计
    4. 57个主题
    5. 支持图表、地图、仪表盘
  • Angular Material
    Angular官方组件库,提供表单控件、导航、布局、按钮、弹出窗口、数据表格等组件。
  • NG-ZORRO
    阿里出品的企业级UI组件,由阿里计算平台事业部、阿里云等不同部门的一些小伙伴在原业务组件的基础上共同构建而成,设计完全兼容并遵守的规范,并定期会与 Ant Design React 版本保持功能同步。NG-ZORRO符合国人使用习惯,国内用户较多。
    ng-zorro-antd 是 Angular 版本 Ant Design 的实现,这意味着只有 Ant Design 支持的交互、功能才会被 ng-zorro-antd 实现。
  • Awade Jigsaw
    中兴大数据UED团队出品

NG-ZORRO

  1. 初始化配置

进入项目文件夹,执行以下命令将自动完成ng-zorro-antd的初始化配置,包括引入国际化文件,导入模块,引入样式文件等

ng add ng-zorro-antd
  1. 定制主题

初始化项目时,运行ng add ng-zorro-antd --theme 会自动配置主题文件src/theme.less,编辑文件即可自定义主题。样式使用了Less作为开发语言。

  1. 代码演示

NG-ZORRO使用简单,文档、示例代码全面,摘录示例代码如下:

表单

import { Component, OnInit } from '@angular/core';import {  AbstractControl,  FormBuilder,  FormGroup,  Validators} from '@angular/forms';@Component({  selector: 'nz-demo-form-normal-login',  template: `    
`, 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 ] }); }}

效果图:

Angular学习笔记

  1. 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);
  1. 测试

使用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

  • 页面调用
...pageChanged(event: any): void {  this.getAirlines(event.pageIndex - 1, event.pageSize);}getAirlines(page: number, size: number): void {  this.airlineService.searchAirlines(this.airline, page, size)    .subscribe(data => {      this.airlines = data.content;      this.totalItems = data.totalElements;    });}...
  • HttpParams

其余方法略过,最终要调用HttpClient的get方法,需要封装查询参数、分页参数(后台使用Spring Data分页方法):

...this.http.get
('url', {params})...

封装方法如下:

import {HttpParams} from '@angular/common/http';import {DEFAULT_PAGE_SIZE} from '../vo/page';...  pageParams
(data: T, page?: number, size?: number): HttpParams { let params = new HttpParams() .set('page', page ? page.toString() : '0') .set('size', size ? size.toString() : DEFAULT_PAGE_SIZE.toString()); Object.keys(data).forEach(function (key) { let value = data[key]; if (value === '') { return; } if (value ×××tanceof Date) { value = value.toISOString(); } params = params.set(key, value); }); return params; }

注意,不能写成这样:

let params = new HttpParams();params.set('orderBy', '"$key"')params.set('limitToFirst', "1");

HttpParams是不可变的,上面写法将返回空值。

ExcelJS

是读写XLSX和CSV格式文件的开源组件,MIT License。相对于组件,ExcelJS更容易设置Excel样式。

安装ExcelJS:

npm install --save exceljs

ExcelJS写文件需使用:

npm install --save file-saver

然后在tsconfig.json中添加:

"paths": {  "exceljs": [    "node_modules/exceljs/dist/exceljs.js",    "node_modules/file-saver/dist/FileSaver.js"  ]}

使用示例:

import {Workbook} from 'exceljs';import * as fs from 'file-saver';...  const workBook = new Workbook();  const workSheet = workBook.addWorksheet('Sheet1');  workSheet.columns = [    {header: 'ID', key: 'id', width: 12},    {header: 'Name', key: 'name', width: 12},    {header: 'Email', key: 'email', width: 50}  ];    var rows = [    {id:1, name: 'Jason', email: 'jason@163.com'},        {id:2, name: 'Coco', email: 'coco@163.com'}    ];    worksheet.addRows(rows);  workSheet.getRow(1).eachCell((cell, colNumber) => {    cell.fill = {type: 'pattern', pattern: 'solid', fgColor: {argb: 'FF00CCFF'}, bgColor: {argb: 'FFFFFF00'}};    cell.font = {bold: true};  });  workSheet.getColumn('email').alignment = { vertical: 'bottom', horizontal: 'left' };  workBook.xlsx.writeBuffer().then(value => {    const blob = new Blob([value], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});    fs.saveAs(blob, 'test');  });...

CKEditor 4

开源WYSIWYG HTML编辑器,支持GPL, LGPL, MPL协议。用法如下:

  1. Include CKEditor javascript files in your application
  1. Install ng2-ckeditor
npm install --save ng2-ckeditor

3.Include CKEditorModule in your main module

import { CKEditorModule } from 'ng2-ckeditor';@NgModule({  // ...  imports:      [    CKEditorModule  ],  // ...})export class AppModule { }
  1. usage

学习资料

转载于:https://blog.51cto.com/7308310/2072564

你可能感兴趣的文章
前端基础之JavaScript
查看>>
自己动手做个智能小车(6)
查看>>
自己遇到的,曾未知道的知识点
查看>>
P1382 楼房 set用法小结
查看>>
分类器性能度量
查看>>
windows 环境下切换 python2 与 pythone3 以及常用命令
查看>>
docker 基础
查看>>
C语言中,指向函数的指针变量
查看>>
Go(3[切片])
查看>>
Mac 配置java 开发环境
查看>>
利用jmeter的集合点完成性能测试
查看>>
应用统计|移动端数据统计和分析最佳实践
查看>>
OpenCV简介
查看>>
lamp架构介绍
查看>>
vlan简述
查看>>
Confluence 6 XML 备份失败的问题解决
查看>>
Confluence 6 手动安装语言包和找到更多语言包
查看>>
Linux第一波命令
查看>>
PHP实现Redis单据锁,防止并发重复写入
查看>>
除了ROS, 机器人定位导航还有其他方案吗?
查看>>