总纲
此项目分前端与后台两部分 前端为ag-cli 后端为lowdb
cd backend
npm install
node app
在localhost:5000 查看json
cd frontend
npm install
ng serve
在localhost:4200 查看项目
backend
注意事项
- 需要用最新的lowdb 新版与旧版的语法完全不同 而且会报错
- 需要掌握json-server lowdb lodash语法
frontend
创建命令
ng new frontend
cd frontend
ng serve
安装ngx-bootstrap
# version 3.x
npm install ngx-bootstrap bootstrap --save
# .angular-cli.json 就这一行 记得重启服务器生效
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css","styles.css"
],#开始测试
# src/app/app.module.ts
import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(),... ],...
})
# app.component.html
<alert type="success">hello</alert>
注意:更改.angular-cli.json后 需要重启 ng serve
目录结构规划
ag的模块划分 基本有两种构想
一种是一个页面算一个模块 页面内再划分组件 因为就是一级结构 所以路由十分简单 其他公共组件调取share文件夹
另一种是以功能块为一个模块 如 将文章列表 文章详情 和他们的module service 放到一起 好处是路由清晰 封装后适合一个人开发一整块 不好的地方在于层层嵌套
我将采用第一种模块方式 理由是结构清晰 路由简约 功能单一
此项目的文件夹规则为:
各个子导航 以页面为单位 各占一个文件夹 每个页面有自己的share文件夹 里面是自有component和route
share文件夹 下属 pipe component config models services layout
user单独一个文件夹
auth一个文件夹