AngularJS是一个Google优秀的开源的JS框架,可以从Github查看angular.js的相关源代码。如今,AngularJS在前端开发中如日中天,AngularJS具有很多优秀的特性,可以参考这篇文章10 Reasons Why You Should Use AngularJS。前段时间,开始自己着手搭建一个基于AngularJS的前端项目。在项目搭建的时候,遇到了各种各样的问题。接下来,本文就详细介绍一下我是如何创建一个AngularJS项目的。

AngularJS

遇到的问题

由于之前对AngularJS项目了解并不深,而且对于AngularJS的学习也只是官方文档。要自己从零开始搭建一个AngularJS项目还是有难度的。AngularJS项目是单页面应用(SPA),整个项目只有一个入口,如何在这个页面管理写的js和css文件,这与原来的前端项目开发有很大的不同。通常不同页面的依赖可以按需加载,但是单页面的应用意味着单个页面需加载整个项目的依赖。在学习AngularJS时,可以简单的在该页面引入所有的JS文件,这样肯定没有问题。作为项目开发,AngularJS一个重要的特性就是模块化开发,每个模块可能有很多单个的JS文件,如何管理这些JS文件,如果还像之前那样一个一个文件引入的话,这样管理起来就太麻烦了。而且考虑浏览器资源的请求,显然不是一个好的实践。首先可以想到的是按需加载JS文件,通过在网上查找相关资料,发现有通过AngularJS与RequireJS结合起来使用的,可以参考该项目angular-requirejs-seed。但是这种方法其实并不好,至少根据参考的项目来看,效果一般。后来发现了一个项目angular-app,这个项目通过使用GruntJS来进行项目构建,将所有的AnguarJS相关的应用模块整合到一个JS文件。这种方法借助Grunt实现对JS文件的统一管理,大大提升了开发效率。

开发时,还需要通过运行静态服务器来进行调试。由于使用GruntJS,可以通过插件来启动一个静态服务器,并且通过watch插件,实时监听项目文件的变化,自动更新。

项目的创建

项目结构

在项目根目录包含:

  • src:项目开发代码目录
    • app:AngularJS项目代码目录
      • app.js:AngularJS项目入口,主模块
      • index.html:项目主页面
      • module_name:泛指名称,根据具体模块命名,如:登录模块,通用模块、其他功能模块
    • assets:项目文件资源目录,如:图片、字体、css、js等资源
    • vendor:项目第三方库目录,如:jQuery、Bootstrap、AngularJS
  • dist:项目发布代码目录
  • test:项目测试代码目录
  • server-api:项目后台api接口的JSON测试数据
  • package.json:npm项目配置文件
  • gruntfile.js:GruntJS项目配置文件

上面列出了整个项目的基本结构,通过提前构建好项目结构可以使得在配置Grunt任务时变得简单。每个目录的文件类别十分清晰,使得Grunt可以根据不同文件处理相应任务。这里需要提出,项目的结构没有一个很统一的标准,根据自己的项目需要来创建。当然,由于用AngularJS写项目,我还是调研了一下比较主流的目录结构。而且找到了一些AngularJS项目开发指导资源,如:Angular Style Guide。这个开发指导应该是很有借鉴意义,毕竟是AngularJS使用先驱总结的宝贵经验。

项目配置

前面的文章,已经介绍过GruntJS的知识,这里就不再详细介绍。但是需要给出该项目所需的Grunt插件。

1
2
3
4
5
6
7
8
9
10
11
12
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-html2js');
grunt.loadNpmTasks('grunt-remove-logging');

具体每个插件的用法这里就不给出配置了,通过查询相应文档可以了解具体用法。主要是grunt-html2js插件,该插件可以将AngularJS中的html partials页面转换成AngularJS的template模块进行引用。

项目开发

项目开发代码主要在src目录,其中angularJS相关的代码位于app目录下,这里不详细介绍AngularJS的具体代码开发。项目开发时,建议通过模块化划分目录,不同模块下根据具体的Services、Controllers、Directives等服务进行划分。项目开发时,采用的是less来定义css样式,最后通过Grunt插件转换成具体的css样式。使用less的好处有很多,建议开发较大型项目的时候采用。关于测试,测试代码位于test目录,前端测试可以使用Karma进行测试。

总结

项目开发时,搭建项目框架只是第一步,这一步也是十分重要的。在确定开发一个项目时,应该考虑需要用到的技术,并且根据具体的技术采用具体的解决方案。并且考虑开发时如何提高效率,方便测试,项目未来的可扩展性以及代码健壮性。AngularJS对于我来说还是比较新颖,本次项目开发时也遇到了不少问题。本次项目开发使用AngularJS也是抱着能够学习新技术的热情。对于面向用户的项目,最好在使用一个新技术时,先考虑该项目是不是适合这种技术,不然往往会适得其反。学习还在继续,希望能够与相关领域的人员多多交流。