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

609 查看

之前一段时间在边学边用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里没有按模块和功能分开,而是合并压缩过的,可以直接部署。