youmeyoume 开发记录文档(一)

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

总纲

此项目分前端与后台两部分 前端为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一个文件

原文链接:https://www.f2er.com/angularjs/146754.html

猜你在找的Angularjs相关文章