捕鱼游戏网络版

書名： AngularJS入門與進階
作者名：江榮波
本章字數： 1915字
更新時間： 2020-11-28 23:44:27

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框架的相關概念及使用方法。

官术网_书友最值得收藏!

AngularJS入門與進階

1.2 搭建AngularJS開發環境

1.2.1 選擇集成開發工具

1.2.2 下載與安裝AngularJS

1.2.3 代碼調試工具