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 数据来模拟

Angularjs1.x 项目结构相关推荐

Java Web项目结构
Java Web项目结构(一般) 1.Java src 2.JRE System Library 3.Java EE 6 Libraries 4.Web App Libraries 5.WebRoot ...
iOS SwiftUI篇-1 项目结构
iOS SwiftUI篇-1 项目结构介绍Xcode新建的SwiftUI模版项目结构.跟普通Storyboard模版项目的差异.SwiftUI项目的app启动流程.UIScene概念介绍.AppDe ...
boot sprint 项目结构_京淘项目03 08.28
JSP动态web资源,打war包 ##spring boot整合JSP 创建项目 spring SpringBoot整合web资源,, 在main文件下,新建webapp文件夹,,把WEBINF目录粘 ...
Android 项目结构说明
Android 项目结构说明创建Android项目后,期目录结构如图下面对图中的包和文件进行说明. 1.scr包在scr包中,保存的是应用程序的源代码,如Java文件和AIDL文件. 2.g ...
【转载】C#编码标准━━项目设置和项目结构
1．总是在4级警高上建立你的项目. 2．在发布版(Release)中,把警告当成错误来对待(注意这并不是 Visual Studio的默认选项).我们建议在调试版(Debug)中也这样设置,尽管这不是 ...
Flutter入门二——项目结构及配置文件简介
前言环境搭建完成之后,我们来看看Flutter:New Project后生成的项目结构. 具体环境搭建可以参考:w7上使用VSCode配置Flutter开发环境项目结构 pubspec.yaml配 ...
ASP.NET Core 2.0 : 三. 项目结构
ASP.NET Core 2.0 : 三. 项目结构原文:ASP.NET Core 2.0 : 三. 项目结构本章我们一起来对比着ASP.NET Framework版本看一下ASP.NET Cor ...
Orchard 的项目结构-解决方案文件夹的原理与使用
Orchard 的项目结构-解决方案文件夹的原理与使用参考文章: (1)Orchard 的项目结构-解决方案文件夹的原理与使用 (2)https://www.cnblogs.com/haogj/ar ...
Maven笔记（2）-- 常用命令和标准的Maven项目结构
http://www.cnblogs.com/luxh/archive/2012/11/06/2757441.html 1.常用命令 1)创建一个Project mvn archetype:gener ...

Angularjs1.x 项目结构

项目描述

项目拓展

项目结构

Angularjs1.x 项目结构相关推荐

最新文章

热门文章