Angular学习笔记

网友投稿 845 2022-05-29

配置开发环境

开发工具

Node.js

VS Code / Intellij IDEA / WebStorm

搭建NPM私服

Angular学习笔记

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

     

页面调用

... 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 instanceof Date) {        value = value.toISOString();       }      params = params.set(key, value);     });    return params;   }

注意,不能写成这样:

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

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

CKEditor 4

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

Include CKEditor javascript files in your application

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 { }

usage

学习资料

Angular

Angular中文

TypeScript

TypeScript中文网

NPM Docs

RxJS

Learn Angular 5

Angular 4.x 修仙之路

NG-ZORRO

CKEditor Ecosystem

Angular HTTP Client - Quickstart Guide

Angular Architecture - Smart Components vs Presentational Components

---------------------------------

本文转自Jason_川川博客51CTO博客

前端开发

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:基于鲲鹏服务器使用华为云源zabbix5.0安装部署,监控,邮件报警,自动发现注册,分布式部署加代理等,一整套详细操作 使用proxy, SNMP监控
下一篇:ModelArts Notebook快速开源项目实战 — U2Net
相关文章