Angular使用扩展【经常用到的一些库】

目录

1. mock后端服务

2. 安装material步骤&＃xff1a;

3. 使用Angular Flex-layout&＃xff1a;

4. 在Angular 8引入less及使用方法&＃xff1a; 

5. Angular overlay介绍

1. mock后端服务

在后端服务还没有准备好之前&＃xff0c;当前端需要向后端服务发出请求&＃xff08;GET/POST/PUT/DELETE&＃xff09;&＃xff0c;让后端更新数据&＃xff0c;并且返回给前端时&＃xff0c;可以造个假的。

可以安装一个json-server&＃xff0c;就可以作为服务器接受客户端的RESTful请求&＃xff08;GET/POST/PUT/DELETE&＃xff09;了。

npm install --global json-server

2. 安装material步骤&＃xff1a;

1. ng new my-app &＃xff08;创建好后可在默认端口4200打开&＃xff09;
2. npm install --save &＃64;angular/material &＃64;angular/cdk &＃64;angular/animations
3. 在全局CSS里&＃xff08;styles.css&＃xff09;添加&＃xff1a;&＃64;import "~&＃64;angular/material/prebuilt-themes/indigo-pink.css";
4. npm install --save hammerjs&＃xff0c;然后在app.module.ts里import &＃39;hammerjs&＃39;;
5. 在全局HTML里&＃xff08;index.html&＃xff09;添加&＃xff1a;
6. 在app.module.ts里引入component modules&＃xff0c;包括但不局限于&＃xff1a;import {MatButtonModule, MatCheckboxModule} from &＃39;&＃64;angular/material&＃39;;  import {BrowserAnimationsModule} from &＃39;&＃64;angular/platform-browser/animations&＃39;;
7. 完成

3. 使用Angular Flex-layout&＃xff1a;

1. npm install &＃64;angular/flex-layout
2. 在app.module.ts里引入&＃xff0c;import {FlexLayoutModule} from &＃39;&＃64;angular/flex-layout&＃39;;

CSS flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行&＃xff0c;这个属性允许你控制行的堆叠方向。

4. 在Angular 8引入less及使用方法&＃xff1a; 

1.  npm install less --save
2.  修改angular.json文件的2处&＃xff1a; 

"styles": ["./node_modules/&＃64;angular/material/prebuilt-themes/indigo-pink.css","src/styles.less"],

"schematics": {"&＃64;schematics/angular:component": {"styleext": "less"}

 3. 修改组件component下的ts文件的 styleUrls: [&＃39;./user-hint.component.less&＃39;]

4. 在组件component下的less文件引入 &＃64;import &＃39;../../styles.less&＃39;;

5. 完成

5. Angular overlay介绍

Overlay中文翻译过来意思是覆盖物&＃xff0c;它是Material Design components for Angular中针对弹出动态内容这一场景的封装&＃xff0c;功能强大、使用方便&＃xff0c;尤其在开发自己的组件库时&＃xff0c;可以让你少写许多代码&＃xff0c;可以说只要是弹出内容的场景基本都可以使用Overlay.
我们自己的组件库中弹出场景基本都已经使用Overlay&＃xff0c;如自定义Select、Cascader、Tree Select、Tooltip、Dialog等&＃xff0c;总结最重要的的两点好处&＃xff1a;

1. 让使用者不再进行繁琐的位置计算&＃xff0c;而简单通过参数配置就实现内容的定位&＃xff0c;而且关于位置的各种情况都有考虑到.
2. 组件的弹出内容都是用Overlay实现&＃xff0c;避免了各自实现的产生的不兼容&＃xff0c;如相互遮盖问题.

 如点击A组件弹出B组件&＃xff0c;那么要在【module】里设置B组件为入口文件&＃xff0c;如下&＃xff1a;

StatebarMenuComponent 是 弹出的overlay。

import { NgModule } from &＃39;&＃64;angular/core&＃39;;
import { CommonModule } from &＃39;&＃64;angular/common&＃39;;
import { StatebarComponent } from &＃39;./statebar-dashboard/statebar.component&＃39;;
import { FlexLayoutModule } from &＃39;&＃64;angular/flex-layout&＃39;;
import { StatebarMenuComponent } from &＃39;./statebar-menu/statebar-menu.component&＃39;;&＃64;NgModule({entryComponents: [StatebarMenuComponent],declarations: [ StatebarComponent, StatebarMenuComponent ],imports: [CommonModule,FlexLayoutModule,],exports: [StatebarComponent, StatebarMenuComponent],
})
export class StatebarModule { }