youmeyoume 开发记录文档(一)

前端之家收集整理的这篇文章主要介绍了youmeyoume 开发记录文档(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

总纲

此项目分前端与后台两部分 前端为ag-cli 后端为lowdb

  1. cd backend
  2. npm install
  3. node app

在localhost:5000 查看json


  1. cd frontend
  2. npm install
  3. ng serve

在localhost:4200 查看项目


backend

注意事项

  • 需要用最新的lowdb 新版与旧版的语法完全不同 而且会报错
  • 需要掌握json-server lowdb lodash语法

frontend

创建命令

  1. ng new frontend
  2. cd frontend
  3. ng serve

安装ngx-bootstrap

  1. # version 3.x
  2. npm install ngx-bootstrap bootstrap --save
  3.  
  4. # .angular-cli.json 就这一行 记得重启服务器生效
  5. "styles": [
  6. "../node_modules/bootstrap/dist/css/bootstrap.min.css","styles.css"
  7. ],#开始测试
  8.  
  9. # src/app/app.module.ts
  10. import { AlertModule } from 'ngx-bootstrap';
  11. ...
  12.  
  13. @NgModule({
  14. ...
  15. imports: [AlertModule.forRoot(),... ],...
  16. })
  17.  
  18. # app.component.html
  19. <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一个文件

猜你在找的Angularjs相关文章