angular8 应用构建指南

安装 angular 代码生成的客户端

npm install -g @angular/cli

创建项目

ng new chat-angular --minimal=true
ng new chat-angular --routing=true --skip-git=false --skip-install=false --skip-tests=true --style=scss --package-manager=pnpm
ng new chat-angular --routing=true --skip-git=false --skip-install=false --skip-tests=true --style=less --prefix=chat
其中：–minimal=true 表示最小安装(不会生成测试文件等等)
其他常用参数：

–routing=true 默认值：false。如果为true，则为初始项目生成路由模块
–skipGit=true 默认值：false。如果为true，则不初始化git存储库
–skipInstall=true 默认值：false。如果为true，则不安装依赖包
–skipTests=true 默认值：false。如果为true，则不会生成“spec.ts”测试文件
–style=scss 默认值：css。用于样式文件的文件扩展名或预处理器，常见的有css、less、scss等
–prefix 默认值：app。用于设置组件选择器的前缀

创建 module

ng g module modules/Index --routing
其中：–routing可选，表示生成路由

创建 component

ng generate component components/TopMenu --skipTests=true
其中：
–skipTests=true 表示不生成测试文件
–inlineStyle=true 表示内联样式
–inlineTemplate=true 表示内联模板
–no-spec 不生成测试文件
–flat 表示不创建单独的目录

创建 service

ng g service commons/auth

创建指令

ng g directive commons/page/sortable

创建管道

ng g pipe commons/gender

样式绑定

适合单个样式绑定：
<div [class.className]="条件表达式">...</div>
最强大的样式绑定：
<div [ngClass]="{'样式1': true, '样式2': false}">...</div>
<div [ngClass]="['样式1', '样式2']">...</div>
嵌入式的样式绑定：
<div [ngStyle]="{'color': someColor, 'font-size': fontSize}">...</div>

路由使用Hash模式(默认是HTML5 History 模式)

在 app.module.ts 的 provider 中引入：

1@NgModule({
2  ...
3  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
4});

使用 material 组件库

ng add @angular/material

添加 ng-matero(一个基于 Angular Material 搭建的中后台管理框架)

ng add ng-matero

使用 jquery

安装依赖：npm install jquery --save
安装 jquery 对应的类型描述依赖：npm install @types/jquery --save-dev
在 angular.json 的 scripts 数组中添加："./node_modules/jquery/dist/jquery.min.js"
在任意 ts 文件中加入：import * as $ from 'jquery'; 即可使用 jquery

使用 bootstrap4 (需要先安装 jquery)

安装依赖：npm i bootstrap -s
安装 bootstrap 对应的类型描述依赖：npm install @types/bootstrap --save-dev
在 angular.json 的 scripts 数组中添加："./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
在 angular.json 的 styles 数组中添加："./node_modules/bootstrap/dist/css/bootstrap.min.css"

使用 vscode 开发 angular 建议安装的插件

vscode 关闭自动更新提示：设置 update.mode 为 none

Debugger for Chrome
Path Intellisense
Angular Files
Angular Language Service
Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

使用 chrome 调试 angular 程序建议安装的插件

Augury

Angular8 应用构建指南

目录