Angular企业级开发(5)-项目框架搭建

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.AngularJS Seed项目目录结构

AngularJS官方网站提供了一个angular-phonecat项目，另外一个就是Angular-Seed项目。所以大多数团队会基于Angular-Seed项目来开发，本文首先分析angular-seed项目的目录结构。以及AngularJS团队为我们做了什么事情，提供了我们真实开发最需要的框架结构。

这个项目仅仅是一个典型的AngularJS网络应用程序的应用程序骨架。 您可以使用它来快速引导您的Angular webapp项目和搭建开发环境。

Angular Seed包含一个样例AngularJS应用程序，并且预配置为安装Angular框架和一系列用于即时Web开发满足的开发和测试工具。

仅仅编写了2个控制器，并且写了它们对应的视图。

AngularSeed Github地址

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个框架进行修改，以便更好的支持企业级项目开发。下一篇博客，会写到公司实际项目框架。