1.AngularJS官网seed目录结构

  • css/
  • img/
  • js/
    • app.js
    • controllers.js
    • directives.js
    • filters.js
    • services.js
  • lib/
  • partials/

或者可以是这样的:

2.按照业务逻辑划分

上面的这种结构对于一个简单的单页 app 来说是可行的,只是一旦代码中存在多个 Controller 或者 Service,就很难找到想要寻找的对象了。

我们可以对文件按照业务逻辑进行拆分,就像下面这样:

  • controllers/

    • LoginController.js
    • RegistrationController.js
    • ProductDetailController.js
    • SearchResultsController.js
  • directives.js
  • filters.js
  • models/
    • CartModel.js
    • ProductModel.js
    • SearchResultsModel.js
    • UserModel.js
  • services/
    • CartService.js
    • UserService.js
    • ProductService.js

3.模块化划分

这种结构把不同的业务功能拆分为独立的文件,条理清晰,但是仍有一定的局限性。最大的问题是一个业务功能的代码分布在controllers, models, servers 三个不同目录下,

要从中挑出正确的文件,建立起代码关联,还是有些麻烦。按照功能进行模块化划分目录结构,应该要更为合理一些:

  • cart/

    • CartModel.js
    • CartService.js
  • common/
    • directives.js
    • filters.js
  • product/
    • search/

      • SearchResultsController.js
      • SearchResultsModel.js
    • ProductDetailController.js
    • ProductModel.js
    • ProductService.js
  • user/
    • LoginController.js
    • RegistrationController.js
    • UserModel.js
    • UserService.js

这样也是适合 RequireJS 等模块加载器的自然直观的代码组织方式

4.类似于3进行模块化,不过这里每个模块都是一个独立的个体

--app
|--thirdParty
| |--moduleA
| | |--js
| | |--css
| | |--lib
| | |--subModuleC
| |
| |--moduleB
|
|--system
| |--moduleC

不要说蛋疼,不要说“这在页面上加载脚本的时候还得一个一个去找js和css的位置”。如果你用grunt之类的工具的话应该知道这根本不是问题。这样划分的好处在于,几乎任何一个文件夹都是一个完整的模块,你可以随便拷贝到任何地方去测试什么,或者在其他简单环境开发好了再丢到系统目录下。systemthirdParty这两个目录的划分是用来区分通用模块和业务逻辑模块的。其实这就是典型的服务器端框架目录划分。 不过实际应用中,这样目录结构还是有问题。特别是当你使用less的时候,如果你的less文件依赖thirdParty中的less库,那你在测试的时候就不得不保持住这个相同的目录结构。
解决方法是将thirdPatry放在system里。如果你的模块不多,也可以把模块平行放置。

5.

与按照类型划分文件不同,取而代之的,我们可以按照特性划分文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
app/
    app.js
    Feed/
        _feed.html
        FeedController.js
        FeedEntryDirective.js
        FeedService.js
    Login/
        _login.html
        LoginController.js
        LoginService.js
    Shared/
        CapatalizeFilter.js

这种目录结构使得我们能够更容易地找到与某个特性相关的所有文件,继而加快我们的开发进度。尽管将.html和.js文件置于一处可能存在争议,但节省下来的时间更有价值。

app.js依赖注入Ctrl,Dtve,Service.同一功能模块下的Ctrl放置在一个文件中,不同的Ctrl文件模块名称取相同的名称.

app.js中完成路由的设置

6.

文件目录结构

app/
common/ -->通用模块文件夹
controllers/ -->控制器文件夹
menu.js -->主菜单控制器
directives/ -->指令文件夹
action.js -->用于应用中定义链接的指令
services/ -->服务文件夹
acl.js -->授权服务代码
action.js -->用于提供给action指令使用的认证服务
auth.js -->认证服务代码
init.js -->模块的初始化文件
css/ -->项目的样式文件夹
img/ -->项目的图片文件夹
lib/ -->项目使用的第三方js库文件夹,包含requireJS,angularJS等
modules/ -->业务模块文件夹,里面按照每个模块一个独立的文件夹来存放
publish/
controllers/ -->模块下的控制器文件夹
dashboard.js -->控制器代码文件
templetes/ -->对应的视图文件夹
dashboard.html -->视图文件
init.js -->模块的初始化文件
route.js -->模块的路由配置文件
...
utils/ -->工具集合文件夹
loader.js -->用于加载模块的函数
...
app.js -->应用主模块文件
bootstrap.js -->requireJS的配置及应用构建引导文件
config.js -->应用的配置文件
index.html -->应用的入口文件
mock/ -->模拟后端服务

约定

每个模块(包含commom和modules下的每个文件夹)文件夹下,都应该包含init.jsroute.js2个文件,前者是用来构造该模块,后者用来提供该模块的路由数据。

requirejs+angularjs+ui-route

AngularJS官网seed目录结构的更多相关文章

  1. AngularJS+requireJS项目的目录结构设想

    AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default    放页面,不过 ...

  2. vue 源码学习(一) 目录结构和构建过程简介

    Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以 ...

  3. Vue学习官网和Vue的书籍 目录结构

    Vue基础知识学习网站[中文] https://cn.vuejs.org/v2/guide/ Vue路由知识学习网站[中文] https://router.vuejs.org/zh/guide/  V ...

  4. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  5. 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  6. AngularJS系列-翻译官网

    公司之前一直用的Web前台框架是Knockout,我们通常直接叫ko,有看过汤姆大叔的KO系列,也有在用,发现有时候用得不太顺手.本人是会WPF的,所以MVVM也是比较熟悉的,学ko也是很快就把汤姆大 ...

  7. 官网实例详解-目录和实例简介-keras学习笔记四

    官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras   版权声明: ...

  8. Knockout 官网学习文档目录

    官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...

  9. 【AngularJS学习笔记】开发时候的建议目录结构,基本开发步骤

    项目目录结构划分 Debug Node.JS的生成目录 Node_modules Node.Js的依赖项 Src 项目源文件 ----|framework  项目框架 --------|app --- ...

随机推荐

  1. JAVA 爬虫Gecco

    主要代码: Gecco(matchUrl="https://github.com/{user}/{project}", pipelines="consolePipelin ...

  2. git的color configura

    git color的配置 Git多颜色输出 Git默认的输出是单一颜色的,不仅不够美观,也不容易阅读.实际上,Git本身就支持用多种颜色来显示其输出的信息,只需在命令行中运行以下命令来修改git的设置 ...

  3. svn,git,scp,rsync,rake,ssh,wget,axel,aria2,nohup,grep,tail,siege,mitmproxy,ulimit,netstat,lsof

    scp 把本地文件上传到server上 scp -P 1234 config/cert/dev/client.pem dev@xx.xxx.xxx:/srv/rorapps/fgcc/config/c ...

  4. python之函数用法file()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法file() #file() #说明:file()内建函数它的功能等于open(),但 ...

  5. 成为JavaGC专家(3)—如何监控Java垃圾回收机制(转载)

    原文:http://www.importnew.com/3146.html 为什么需要优化GC 或者说的更确切一些,对于基于Java的服务,是否有必要优化GC?应该说,对于所有的基于Java的服务,并 ...

  6. CAS 5.1.x 的搭建和使用(三)—— 通过官方示例来熟悉客户端搭建

    CAS单点登录系列: CAS 5.1.x 的搭建和使用(一)—— 通过Overlay搭建服务端 CAS5.1.x 的搭建和使用(二)—— 通过Overlay搭建服务端-其它配置说明 CAS5.1.x ...

  7. surging+CentOS7+docker+rancher2.0 菜鸟部署运行笔记

    https://blog.csdn.net/q5934/article/details/82661250 目录 准备工作 开始干活 1.从github 获取surging源码 2.发布Surging. ...

  8. Python学习笔记015——readline与readlines的区别

    示例1 读取同样一个文件binary_read_1.txt. 春眠不觉晓,处处闻啼鸟. 夜来风雨声,花落知多少. 其中该文件内容被下段代码读出(注意,这里是采用的readlines) f = open ...

  9. Python 中的 sys.argv 用法

    sys.argv是获取运行python文件的时候命令行参数 下面的代码文件是a.py,当我不用IDE工具,只用命令行窗口运行的时候,进入文件所在目录,输入:python a.py 输出结果如下 imp ...

  10. mysql 查询昨天,今天、七天、30天的数据

    主要是时间戳转"1993-01-01 00:00:00"的时间格式,然后和当前时间比对CURDATE() 如果字段本身符合正常时间格式,则直接使用即可 今天的数据 SELECT * ...