Angular记录(11)

Angular记录(11)

开始使用Angular写页面

使用WebStorm：版本2018.3.5

官网资料

资料大部分有中文翻译，很不错

• 速查表：https://www.angular.cn/guide/cheatsheet
• 风格指南：https://www.angular.cn/guide/styleguide
• Angular 词汇表：https://www.angular.cn/guide/glossary
• 路由与导航：https://www.angular.cn/guide/router
• API 列表：https://www.angular.cn/api

项目原型

项目的新建

项目的关闭

WebStorm不支持同时打开两个项目

Webstorm配置eslint.tslint等

解决：IDEA导入svn项目报Can't use Subversion command line client:svn

项目的结构

页面情况

• 登录页：单独页面
• 首页：上面部分固定，下面是单独页面
• 生产管理--托盘管理：上面部分固定，左侧部分固定，右侧内容部分有3个界面：显示，新增，编辑

文件结构

• 文件结构一般是layout文件夹下面，多个模块文件夹，每个文件夹下面多个子文件
• 上面两个导航标签“生产管理”和“追溯管理”本身没有页面，这次就是不单独建文件夹了
• 所以就是layout文件夹下面有“生产管理”的4个文件夹和“追溯管理”的2个文件夹
• 页面有一写公共部分，一直是不变化的，比如头部，侧边栏，底部，，也就是上下左右都有一直不变的公共组件，放在共享文件夹shared下面的component文件夹下面

新建项目

使用“懒加载路由”，参考：路由与导航：https://www.angular.cn/guide/router#routing--navigation

CLI命令

ng generate：https://www.angular.cn/cli/generate

项目的模板

这种后台管理模板太常见了，做项目肯定是不需要自己一点点写的，找个现成的才是高效之路。

当然，之前还是自己学着搭建一下

Ant Design：https://ng.ant.design

路由配置

文档

• 路由器配置：https://www.angular.cn/api/router/Routes