如何用angular+bower+grunt+nodejs搭建项目架构

  1. 云栖社区>
  2. 博客列表>
  3. 正文

如何用angular+bower+grunt+nodejs搭建项目架构

城池cc 2016-01-14 14:08:12 浏览4705 评论1

摘要: 前端这两年技术飞速发展,各种优秀框架层出不穷。本文不是讨论各框架的比较,也不讨论为什么要用angular,而不用backbone;不讨论为什么用requirejs,而不用browserify,seajs等。

前端这两年技术飞速发展,各种优秀框架层出不穷。本文不是讨论各框架的比较,也不讨论为什么要用angular,而不用backbone;不讨论为什么用requirejs,而不用browserify,seajs等。

一个成熟项目架构中应该具有哪些功能

_

  • 快速的项目生成器——快速生成项目主体架构,单步实现controller,单步实现view,实现根据router自动生成view,controller
  • 静态资源的管理——基于bower
  • css动态编译——基于sass,compass实现css嵌套写法,跨浏览器实现css前缀等。
  • 解耦,基于模块开发——基于requirejs
  • mv*框架——基于angular实现view-model双向绑定。
  • 代码管理——git管理代码版本,git submodule实现公共模块引入。
  • 本地mock数据——基于express扩展,可支持get及post请求模拟
  • 打包压缩上线——基于npm模块进行打包压缩,修改后时时刷新页面

项目生成器

项目生成器我已经发布为npm公共模块(纯属沟通学习用,不涉及任何公司产品代码),地址是:

https://www.npmjs.org/package/generator-webbp

注意:因为项目生成器中默认你系统支持sass,compass编译所依赖的环境,如果项目中最后跑步起来,请确认是否因为这个原因导致。当然有任何问题,欢迎找我讨论。

  • 快速生成项目架构:
yo webbp

  根据提示操作即可。生成后,打开项目目录,1. npm install 2.grunt 即可自动打开浏览器看到项目

  • 单步生成controller
yo webbp:controllers detail.about.contact

  即可生成如下文件:

|controllers
   |detail
      |about.js
      |contact.js
    detail.js

  其中detail.js中会自动加载about.js及contact.js

*单步生成view

yo webbp:views detail.about.contact

  生成如下文件:

|views
   |detail
      |about.html
      |contact.html
    detail.html

*生成routes,可自动关联view及controller

yo webbp:routess detail.about.contact

  此命令会自动调用controller,及view命令。

而生成routers代码为:

define(['./states', '../cons/simpleCons'],
    function (stateModule, simpleCons) {
      stateModule.config(
          ['$stateProvider', '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {
              $stateProvider.state("detail", {
                abstract: true,
                resolve: {
                  instanceBasicPromise: [ '$stateParams', function( $stateParams){

                  }]
                },
                url: "/detail",
                controller: 'detailController',
                templateUrl: simpleCons.VIEW_PATH + 'detail.html'
              })

                .state("detail.about", {
                  url: "/about",
                  views: {
                    detail: {
                      templateUrl: simpleCons.VIEW_PATH + 'detail/about.html',
                      controller: 'detail.aboutController'
                    }
                  }
                })  

            }
          ]);
    })

  其中controller及view文件都会自动生成。

静态资源的管理——基于bower

项目中引入的angularjs,jquery,bootstrap等基于bower进行依赖管理。

另外,我还发布了一个基于angular-form的扩展叫simple-form,地址是:https://github.com/cc17/angular-simple-form
是目前为止我觉得使用最方便的angular-form,基于form的model配置,并实现form-data表单提交数据和view的双向绑定。谁用谁知道,有问题欢迎提bug给我。关于simple-form我也单独写了一篇文章,请移步
http://www.atatech.org/articles/23529

css动态编译——基于sass,compass实现css嵌套写法,跨浏览器实现css前缀等

这个已经不属于新姿势了,大家都知道为什么要用这个。如果你不知道这个,你肯定知道less吧

  • 实现嵌套写法
.block-a{
  .block-b{
      .block-c{}
  }
}
  • 实现跨浏览器写法

该死的浏览器各种前缀,真是要醉了的节奏啊。用compass只要这么写就会编译成各浏览器识别的css,是不是很奇妙。

div{
  @include border-radius(4px);
}
  • 跟写js一样写css,定义变量是不是很爽

具体怎么用,大家去google吧。这个很简单。 

解耦,基于模块开发——基于requirejs 

很高兴的是前端代码越来越多了,我们再也不是只会切页面的美工了,很不幸的是我们永远不知道自己几点下班了。哎

这么多代码,我们再也不能只在一个 bigbig.js文件里放置了。怎么办呢,对分开,解耦,模块化开发。 a.js, b.js ,c.js,怎么处理依赖? seajs,requirejs,还有个browserify等等,你还可以自己写个简单的。具体应该用那个,不讨论,我就用requirejs。

mv*框架——基于angular实现view-model双向绑定

都说不要重复造轮子了,还是有各种牛逼的新框架造出来。也就说说而已,不创新,哪有技术的发展。各种框架优劣也不讨论,我的生成器是基于angular的。还要支持ie6,7的我只能说句抱歉了。使用angular有什么好处:双向绑定,依赖注入,mvc,directive声明式的扩展html标签。。。太多了。用了之后你才惊讶发现,擦,原来写好多行的代码 ,几行就搞定。妈妈再也不用担心我加班了——不过实际上,我们也没早下班哈。

代码管理——git管理代码版本,git submodule实现公共模块引入

git,svn有什么区别呢?

1.GIT是分布式的,SVN不是
2.GIT把内容按元数据方式存储,而SVN是按文件
3.GIT分支和SVN的分支不同
4.GIT没有一个全局的版本号,而SVN有:
5.GIT的内容完整性要优于SVN
另外github上有太多好东西,所以git用的人是越来越多了。

另外git还有个submodule的东西挺好用的。假如你有多个子项目,需要将通用的组件提取出来,submodule很适合。

本地mock数据——基于express扩展,可支持get及post请求模拟

前后端分离,协同合作开发,提高效率,但是有个问题,我们需要本地模拟后端的数据接口。在不会nodejs之前,我用的是wamp框架,本地启动server服务。现在nodejs发展这么迅速,各种自动化工具都可以基于nodejs开发。所以我在这个代码生成器中基于express扩展,实现对get和post请求mock。另外还可以模拟接口延时。

  • 本地mock get 和 post数据

 |--tests
     |-- home.json

然后在

|--services
   |--homeService.js

调用http服务,接口url是 /home.json即可
*模拟 延迟接口
可在 /server/route.js中修改模拟接口延时的url以及延迟时间。

打包压缩上线——基于npm模块进行打包压缩,修改后时时刷新页面

最后一个问题,项目开完后,需要打包压缩上线。这也是自动化的,我们只需要在生成的项目中grunt build,最后把这个build文件发布到线上服务器即可。

总结:其实说了很多废话,总的来说,我希望这个项目模板生成器可以满足你80%以上开发需求。simple-form也希望大家试用下,给我提bug。就这样把,越写越不想写,因为感觉涉及的知识点太多,如果往下写就没边了。

【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击

网友评论

1F
白桦树

很喜欢

城池cc
文章3篇 | 关注3
关注
业内领先的面向企业的一站式研发提效平台(研发效能),通过项目流程管理和专项自动化提效工具,能... 查看详情
提供海量、安全和高可靠的云存储服务。RESTful API的平台无关性,容量和处理能力的弹性... 查看详情
快速、完全托管的TB/PB级数据仓库解决方案,向用户提供了完善的数据导入方案以及多种经典的分... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
双12

双12