使用AngularJS构建单页面应用(一)

本文详细介绍了使用AngularJS开发项目时的文件目录结构,包括项目的整体布局、关键文件及其作用,并提供了模块化的文件组织建议。

之前一段时间在边学边用angularjs开发项目,现在前端这块要转移给其他队友,所以把一些必要的信息整理出来,这次主要是用文件的目录结构说起。

从最整体来看:

图片描述

tmp: 临时文件,存放和监视css的变化。
app: 开发时的工程文件。
bower_components: 项目所依赖的bower组件。
dist: 打包后的工程文件。
node_modules: 项目所依赖的node模块。
test: 测试文件,这里我没有写测试文件所以先不展示了。
.bowerrc , .editorconfig , jshintrc , .travis.yml 都是一些配置文件,不需要改动。
Gruntfile.js: 是grunt的配置文件,详情可以参考 http://www.gruntjs.net/docs/configuring-tasks/ 英语好的可以看原文 http://gruntjs.com/configuring-tasks,我这里是使用yeoman工具创建的。
bower.json: 是bower的配置文件。详情参考官网 http://bower.io/docs/creating-packages/
package.json: 是npm的配置文件。详情参考官网 https://docs.npmjs.com/files/package.json

查看 app 文件夹

图片描述

images: 存放图片
scripts: 存放js文件
styles: 存放css文件
test-data: 本地测试数据
views: 存放html文件
.buildignore.htaccess 是一些配置文件,不需要改动。
404.html: 404页面
favicon.ico: 图标
index.html: 首页
robots.txt: 网络爬虫排除标准。网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取。详情参考百科 http://baike.baidu.com/link?url=dzwbTcCXR0PO8_mFqbYMRl6797FmgoaCqzorVb...

查看 script 文件夹

图片描述

先按模块分,再按功能分。
其中Common存放一些通用的directivesserveices
Financical,Help,Login等都属于模块,这些概念和后台的MVC是非常相似的。在这里并没有把views也放进去,考虑还是分开好些。大家有不同意见欢迎指出,互相学习。

查看 dist 文件夹

图片描述

这个目录和开发目录差不多,主要是scripts里没有按模块和功能分开,而是合并压缩过的,可以直接部署。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值