项目的创建和配置

使用WebStorm可以直接创建AngularJS项目，且会自动帮助你配置好项目并自动下载AngularJS等库。但是我们这里将创建一个新的空项目（Empty Project），然后一步一步的将各个需要的内容填充进来，这样我们会对使用AngularJS开发有一个更好的了解。

在WebStorm中，选择File > New Project，然后选择Empty Project，在右边的Location设置好项目的位置，然后点击界面右下角的Create即可。

图2-1 创建项目

下面我们将一步一步的完善整个项目的结构。

创建基本的文件结构

首先建立一个public目录，并在public目录中建立js、css、img三个目录。如下图所示：

图2-2 创建目录

大家对于js/css/img三个目录的设置应该比较熟悉，他们分别用于存放对应的文件，img用于存放图片文件。

但是，为什么要把他们放置到public目录中呢？

public目录设置的意义

从字面意思即可理解，public目录是用来存放供外部用户访问的内容的根目录。非public目录下的内容，既是我们不期望用户通过网络链接直接可以访问到的内容。会有哪些内容呢？

  • 产品的文档
  • 一些项目配置文件（如bower的配置文件）
  • 测试文档

这些文件我们是绝对不希望用户可以直接访问到的，通过设置一个public目录，并在部署时将网站的根目录直接指向到public目录，即可保证目录外的内容不被暴露到网络当中。

另外，这样设置的主要原因是为了使用git将整个项目都管理起来。通过git版本控制的方式来保证项目代码的完整性和安全性。具体的git的操作方法就不在本文中叙述了。

配置并初始化bower

bower的配置可以通过手动创建文件或者命令行的方法来进行。我推荐使用命令行的方式来进行创建，这样可以更好的理解配置生成的文件的内容。如果不想通过命令行创建，也可以跳过下面命令行创建的部分，直接在下方生成的文件解析的部分，将文档内容拷贝过去。

打开命令行工具

WebStorm内置了命令行工具（调用系统的命令行功能），在左下角点击Terminal即可启用。

图2-3 命令行工具

初始化bower

在命令行下运行bower init，你将会看到如下的若干选项，并会自动的在项目的根目录生成一个bower.json。

注：以下的汉字部分都是额外加入的注释。

  1. //运行命令
  2. >bower init
  4. //第一次运行的时候会弹出，是否愿意提交匿名的统计信息。随意选择
  5. ? May bower anonymously report usage statistics to improve the tool over time? Yes
  6. //项目名称
  7. ? name learning_angularjs
  8. //项目说明
  9. ? description
  10. //主文件
  11. ? main file
  12. //项目的类型
  13. ? what types of modules does this package expose?
  14. //项目的关键字
  15. ? keywords
  16. //作者和联系方式
  17. ? authors Harry <harry@andtoo.net>
  18. //授权方式，如果您期望这是一个私人项目，可以输入No License
  19. ? license MIT
  20. //项目主页
  21. ? homepage
  22. //是否要把当前已经安装的模块设置为项目的依赖项？
  23. ? set currently installed components as dependencies? Yes
  24. //将常用的忽略文件项添加到列表？
  25. ? add commonly ignored files to ignore list? Yes
  26. //将项目设置为私有，防止其被误发布到网络上？
  27. ? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
  29. //以下是生成的配置文件的预览
  30. {
  31.   name: 'learning_angularjs',
  32.   authors: [
  33.     'Harry <harry@andtoo.net>'
  34.   ],
  35.   description: '',
  36.   main: '',
  37.   moduleType: [
  38.   ],
  39.   license: 'MIT',
  40.   homepage: '',
  41.   private: true,
  42.   ignore: [
  43.     '**/.*',
  44.     'node_modules',
  45.     'bower_components',
  46.     'test',
  47.     'tests'
  48.   ]
  49. }
  51. ? Looks good? Yes

命令运行完毕后，会在项目的根目录生成一个bower.json文件，里面的内容如下：

  1. //bower.json
  2. {
  3.   "name": "learning_angularjs",
  4.   "authors": [
  5.     "Harry <harry@andtoo.net>"
  6.   ],
  7.   "description": "",
  8.   "main": "",
  9.   "moduleType": [
  10.   ],
  11.   "license": "MIT",
  12.   "homepage": "",
  13.   "private": true,
  14.   "ignore": [
  15.     "**/.*",
  16.     "node_modules",
  17.     "bower_components",
  18.     "test",
  19.     "tests"
  20.   ]
  21. }

如果您不希望bower配置文件这么复杂，那么可以手工最简化的创建bower.json。

  1. //最简化bower.json
  2. {
  3.   "name": "learning_angularjs"
  4. }

只需要一个name字段即可让bower好好工作了。

.bowerrc配置文件

由于我们建立了public目录，并且项目的根目录与网站根目录不同，因此，我们需要新建一个额外的.bowerrc文件，告诉bower将组件库下载到特定的目录。

在项目根目录创建.bowerrc文件，并在其中加入如下内容：

  1. //.bowerrc
  2. {
  3.   "directory": "public/components"
  4. }

以上配置文件会告诉bower将文档下载到./public/components目录中。

配置完成

至此，我们对bower的配置已经全部结束！现在项目看起来应该长这个样子：

图2-4 Bower配置完成后