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

  • 相关阅读:
    flex兼容写法
    多行文字,最后一行省略号(适用于移动端)
    checkbox样式修改
    响应式布局
    微信常用的页面跳转
    css小技巧(清除滚动条)
    JS学习---PHP浅识
    qml 画页迁移
    list滚动条Scroll 偏移和长度计算公式总结
    qml listview关键字高亮
  • 原文地址:https://www.cnblogs.com/liminjun88/p/6254087.html
Copyright © 2020-2023  润新知