总体架构
项目文件结构如图
路由设计
总体结构如图:
VIP:
1.mainPanel处设置路由守卫:判断用户是否登录,登录之后才能进入主页,关键字:canActivate;
路由守卫是当用户满足了某些条件之后才可以离开当前页面或进入下一页面时使用,如根据用户权限设置可进入的页面模块等。
2.采用模块懒加载,关键字:loadChildren
3.头部面包屑导航栏
现在的面包屑导航还有一个问题:当机柜详情页面执行了编辑机柜的操作后,详情页刷新数据的代码过于臃肿,而且浏览器地址栏中url的机柜名称参数难以改变。
插件
UI组件:bootstrap、angularMaterial
js框架:echart、contextMenu
安装时要注意版本问题,最好在README.md文件中记录一下项目中所有安装插件的命令,方便其他同事阅读
npm install
npm install -g typescript@2.4.2
npm install -g @angular/cli@1.5.0
npm install --save bootstrap@3.3.7
npm install --save ngx-bootstrap@2.0.0-rc.0
npm install --save echarts@3.8.5
npm install --save ngx-echarts@2.0.1
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
npm install ngx-contextmenu
待续.....