1.2 搭建AngularJS开发环境

1.2.1 选择集成开发工具

正如武侠小说中的剑客闯荡江湖时必须拥有一把锋利的宝剑一样，软件开发者也要配有一款好的开发工具，以提高工作效率，节省开发成本。目前软件市场Web前端开发工具层出不穷，当然适合自己的才是最好的，这里向大家推荐几款相对优秀并且适合AngularJS应用开发的工具。

1．WebStorm

WebStorm是JetBrains公司旗下一款Web前端开发工具，也是目前最受欢迎的前端开发工具之一，不论哪种IDE，它们的主要作用无非是代码补全提示、代码重构、代码定位、代码调试。与其他工具相比，WebStorm的主要优势如下：

● 智能的代码补全，支持JavaScript及HTML补全。代码补全包含了所有流行的JavaScript库，例如jQuery、YUI、Dojo、Prototype、Mootools、AngularJS等。

● 代码重构，支持重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除、包裹或者去掉外围代码等。

● 代码定位与错误修复，只需按住Ctrl键单击方法或者变量名，即可跳转到定义处，可以全项目查找方法或者变量并高亮显示，能够快速找到代码中的错误或者需要优化的地方，并给出修改意见。

WebStorm官方网站下载地址为http://www.jetbrains.com/webstorm/。安装完毕后软件界面如图1.1所示。比较遗憾的是，它是一款商业软件，出于学习的目的，读者可以使用试用版，但如果是企业应用开发，就需要到官方网站购买使用权，目前售价为129.00$ /年。

图1.1 WebStorm软件界面

2．Sublime Text

Sublime Text是一款跨平台的代码编辑器，提供了目前主流操作系统（例如Windows、UNIX/Linux、OS X等）的Release版本，支持多种编程语言的语法高亮，拥有优秀的代码自动补全功能，界面简约美观（软件界面如图1.2所示），深受开发者喜爱。

Sublime Text的强大之处在于插件扩展功能。它拥有大量的第三方扩展插件，用户可以根据个人喜好通过插件对编辑器功能进行定制。例如，安装了AngularJS代码提示插件后，可以对AngularJS应用中的关键字、内置指令、服务等进行代码补全。目前最新版本为Sublime Text 3，也是一款收费软件，但是可以无期限试用，且试用版无功能限制。

Sublime Text 3的官方下载地址为http://www.sublimetext.com/3。

图1.2 Sublime Text 3开发工具界面

3． Brackets

Brackets是大名鼎鼎的Adobe公司发行的一款免费、开源且跨平台的Web前端开发工具，支持Windows、Linux以及OS X等主流平台。

Brackets的特点是简约、优雅、快捷！它没有很多的视图或者面板，也没有太多花哨的功能，核心目标是减少在开发过程中那些效率低下的重复性工作，具有自动刷新浏览器、修改元素的样式后实时预览、强大的代码搜索功能等特性。和Sublime Text不同的是，Sublime Text可支持多种语言，而Brackets专为Web前端开发而生。

开源产品一直比较受大众青睐，因此本书将采用Brackets作为代码编辑器，对案例进行演示。读者可以从Brackets官方网站下载Brackets的安装包，官方网站地址为http://brackets.io/。

在本书写作过程中Brackets的最新版本为1.6，读者可进入Brackets官方网站，如图1.3所示，单击“Download Brackets 1.6”即可下载。Brackets程序主界面如图1.4所示。

图1.3 Brackets官方网站

图1.4 Brackets程序界面

Brackets除了具有上述优点外，更加让人兴奋的是插件扩展功能。Brackets本身并不支持AngularJS代码补全功能，但是可以通过安装插件的方式进行弥补。AngularJS代码补全插件安装步骤如下：

（1）单击File→Extension Manager..．菜单或右侧面板的图标，打开插件管理窗口，如图1.5所示。

图1. 5 Brackets插件管理界面

（2）在搜索框中输入“angular”关键字，在查询到的插件列表中单击AngularJS Code Hints插件右侧install按钮即可。

上面介绍的3款集成开发工具都是具有AngularJS代码补全功能的开发工具，读者可根据个人喜好进行选择。本书将使用Brackets进行案例演示。

1.2.2 下载与安装AngularJS

AngularJS的安装过程非常简单，通过<script>标签把AngularJS库文件引入当前页面中即可。可以通过两种方式来完成：一种是通过Google的CDN（内容分发网络）引入，但基于众所周知的原因，可能会受到网络限制；另一种是下载AngularJS的Release版本，然后引入页面中。读者可以从AngularJS官方提供的下载地址中获取所有版本的库文件。

注意

AngularJS官方网站下载地址为https://code.angularjs.org/。

在写作本书时，AngularJS 1.x最新稳定版本为1.5.5，所以本书使用1.5.5版本进行案例演示。读者可以从下载资源中获取AngularJS库文件或者从AngularJS官方网站下载。

获取到库文件后，在HTML页面中使用<script>标签引入即可，例如：

代码清单：ch01\ch01_01.html

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>ch01_01</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body>
        </body>
        </html>

1.2.3 代码调试工具

JavaScript代码调试一直是前端开发人员比较头疼的问题，近些年随着浏览器功能的增强，大部分浏览器都提供了调试工具，使得Web前端代码调试变得相对简单。Chrome和Firefox浏览器提供的开发人员工具功能相当强大，我们可以从控制台中清楚地看到报错信息，必要时还可以在代码中打上断点，对代码进行逐步跟踪。

以Chrome浏览器为例，假设我们有下面黑体代码所示的一段JavaScript代码。

代码清单：ch01\ch01_02.html

        <!doctype html>
        <html>
        <head>
            <meta charset="UTF-8">
            <tit.le>ch01_02</title>
        </head>
        <body>
            <script type="text/javascript">
                var result = num / 10;
            </script>
        </body>
        </html>

接下来我们可以在Chrome浏览器中运行ch01_02.html页面。打开开发人员工具，将会明确地看到一条错误信息（见图1.6）：

        Uncaught ReferenceError: num is not defined

它告诉我们错误的具体原因是num变量未定义，并指明报错代码的行数，从而使我们可以轻松地定位到错误并进行修正。

图1.6 Chrome浏览器调试工具

在本书中我们使用Chrome浏览器作为AngularJS代码调试工具，读者也可根据个人喜好进行选择。从下一节开始，我们将一起学习AngularJS框架的相关概念及使用方法。

上一章目录下一章