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

1.AngularJS Seed项目目录结构

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

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

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

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

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

AngularSeed Github地址

1.1 angular-seed优点

  • 提供一个基本的SPA应用的基本框架
  • 使用了npm来安装npm模块,集成bower安装第三方类库和插件
  • 集成单元测试和端到端测试环境
  • 采用Travis来做集成测试

1.2 angular-seed缺点

  • 只创建了2个视图和对应的控制器
  • 未提供创建服务、自定义指令和过滤器的代码
  • 代码未按需加载,首页把视图要用到的控制器代码全部加载进来

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

运行效果如下:

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

单元测试

npm test

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

End to End测试

npm start
npm run update-webdriver
npm run protractor

在项目不是很复杂的情况,Angular Seed提供框架能满足实际项目开发,而且本身集成测试,构建和发布一体的环境,适合新手或者项目不复杂的团队选用。

2.Yeoman生成脚手架项目目录

Yeoman团队也提供了一个angular生成器,开发团队可以通过yo angular生成一个angular项目脚手架,然后基于此脚手架来进行项目开发。

项目目录结果如下:

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

运行效果如下:

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

2.1 yo angular脚手架的优点

  • 提供一个基本的SPA应用的基本框架
  • 可以通过类似angular:filter命令创建不同的文件
  • 集成了单元测试
  • 集成了构建、测试和发布环境
  • 添加了样式文件

2.2 yo angular脚手架的缺点

  • 需要了解和使用yeoman,学习成本较高
  • 构建工具使用的是Grunt,可能部分团队更趋向使用Gulp

3.小结

目前使用AngularJS进行项目开发的团队和个人,基本上在项目框架搭建的时候会参考以上2种框架,实际在后期开发过程中,会发现这2个框架会有一些共同问题,比如文件按需加载,框架没有一开始就很好的支持路由等。所以很多个人或团队,都会基于这2个框架进行修改,以便更好的支持企业级项目开发。下一篇博客,会写到公司实际项目框架。

上一篇:[深度学习]实现一个博弈型的AI,从五子棋开始


下一篇:Scrapy定时执行爬取任务与定时关闭任务