Angular企业级开发(5)-项目框架搭建-阿里云开发者社区

开发者社区> 开发与运维> 正文

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 Seed

AngularSeed Github地址

1.1 angular-seed优点

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

1.2 angular-seed缺点

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

首页加载所有控制器代码文件

运行效果如下:
angular seed demo

单元测试
npm test

unit tests

End to End测试

npm start
npm run update-webdriver
npm run protractor

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

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

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

项目目录结果如下:
yeoman生成angular脚手架

运行效果如下:
Yeoman for AngularJS

2.1 yo angular脚手架的优点

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

2.2 yo angular脚手架的缺点

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

3.小结

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

本文转自快乐八哥博客园博客,原文链接http://www.cnblogs.com/liminjun88/p/6254087.html如需转载请自行联系原作者


快乐八哥

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章