1.AngularJS Seed项目目录结构
AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目。所以大多数团队会基于Angular-Seed项目来开发,本文首先分析angular-seed项目的目录结构。以及AngularJS团队为我们做了什么事情,提供了我们真实开发最需要的框架结构。
这个项目仅仅是一个典型的AngularJS网络应用程序的应用程序骨架。 您可以使用它来快速引导您的Angular webapp项目和搭建开发环境。
Angular Seed包含一个样例AngularJS应用程序,并且预配置为安装Angular框架和一系列用于即时Web开发满足的开发和测试工具。
仅仅编写了2个控制器,并且写了它们对应的视图。
1.1 angular-seed优点
- 提供一个基本的SPA应用的基本框架
- 使用了npm来安装npm模块,集成bower安装第三方类库和插件
- 集成单元测试和端到端测试环境
- 采用Travis来做集成测试
1.2 angular-seed缺点
- 只创建了2个视图和对应的控制器
- 未提供创建服务、自定义指令和过滤器的代码
- 代码未按需加载,首页把视图要用到的控制器代码全部加载进来
运行效果如下:
单元测试
npm test
End to End测试
npm start
npm run update-webdriver
npm run protractor
在项目不是很复杂的情况,Angular Seed提供框架能满足实际项目开发,而且本身集成测试,构建和发布一体的环境,适合新手或者项目不复杂的团队选用。
2.Yeoman生成脚手架项目目录
Yeoman团队也提供了一个angular生成器,开发团队可以通过yo angular
生成一个angular项目脚手架,然后基于此脚手架来进行项目开发。
项目目录结果如下:
运行效果如下:
2.1 yo angular
脚手架的优点
- 提供一个基本的SPA应用的基本框架
- 可以通过类似
angular:filter
命令创建不同的文件 - 集成了单元测试
- 集成了构建、测试和发布环境
- 添加了样式文件
2.2 yo angular
脚手架的缺点
- 需要了解和使用yeoman,学习成本较高
- 构建工具使用的是Grunt,可能部分团队更趋向使用
Gulp
。
3.小结
目前使用AngularJS进行项目开发的团队和个人,基本上在项目框架搭建的时候会参考以上2种框架,实际在后期开发过程中,会发现这2个框架会有一些共同问题,比如文件按需加载,框架没有一开始就很好的支持路由等。所以很多个人或团队,都会基于这2个框架进行修改,以便更好的支持企业级项目开发。下一篇博客,会写到公司实际项目框架。