Angularjs1.x 项目结构

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

大部分的项目结构是以 directives , service, controller 为基础来搭建的项目架构的，但这里更偏向于以应用场景来进行项目架构，因此这里的文件夹结构可能与您之前遇到的结构不同，假设有不喜欢的小伙伴请仅仅看技术不讨论架构。假设认为好的能够在这个的架构基础上提出改进意见

项目描写叙述

项目以一个聊天室为场景的应用。实现用户列表，对话，朋友圈，基本设置等基础功能

项目拓展

实现聊天室功能后，接入电商模式，实现产品列表，下单，支付

项目结构

本项目以 angularjs 为核心框架，通过 gulp+webpack 进行打包和公布

结构例如以下

project (项目文件夹)
- dist （公布文件夹）
- node_modules （NODE 模块）
- src （源代码文件夹）
  - app （应用文件夹）
    - images （图片文件夹）
    - scss （scss 样式文件夹）
      - mixin
        
        _button.scss （mixin 文件）
      - app.scss （scss 统一调用文件）
    - pages （页面文件夹）
      - home （主页面）
      - chat （聊天页面）
      - contact （通讯录）
      - circle （圈子）
        
        circle.js
        
        circle.html
      - setting （基本设置）
    - sections （块文件夹）
      - public
        
        footer.js
        
        footer.html
    - services （factory,service,provider）
      - user
        
        user.js
      - func (通用函数 service 文件夹)
        
        base64.js
        
        jssdk.js
        
        md5.js
    - filters （过滤器文件夹）
      - range
        
        range.js
    - components （组件文件夹）
      - alert
        
        alert.js
        
        alert.html
      - button
        
        button.js
        
        button.html
      - …
    - font （字体源文件文件夹）
      - scss
      - svg
  - index.html （入口文件）
期望。麻雀虽小，五脏俱全，希望这种一个结构能让开发者更清晰的知道每一个应用场景所在的工作文件夹。以期达到高效便捷开发方式。

补充：项目准备在 GIT@OSC 开源，而且会跟着博文一步步的往下完好项目内容，由于不是事先准备，过程中肯定会有错误出现，因此希望小伙伴们多 FORK 以及 PUSH 内容上来（仅合并能自己主动合并的部分）。后台 REST 部分，准备採用 YII2.0 框架，不熟悉的小伙伴也能够不用管他，这是后端的事，搞前端的小伙伴仅仅须要处理好数据展示就可以，这里尽量採用 MOCK 数据来模拟