AngularJS與JavaScript（JS）的區(qū)別

一、設(shè)計(jì)思路的轉(zhuǎn)變

在JS中，我們常常首先設(shè)計(jì)好頁(yè)面，然后通過(guò)DOM操作去修改它。這種在jQuery中的做法，是因?yàn)閖Query被設(shè)計(jì)用來(lái)進(jìn)行內(nèi)容的擴(kuò)展和修改。但在AngularJS中，我們的設(shè)計(jì)思路需要轉(zhuǎn)變。我們必須在心中先設(shè)計(jì)好應(yīng)用的架構(gòu)，摒棄“我有一個(gè)DOM元素并想讓它做某件事”的想法，轉(zhuǎn)而以任務(wù)為導(dǎo)向，設(shè)計(jì)應(yīng)用，再設(shè)計(jì)視圖層。

二、不建議將AngularJS與jQuery混合使用

三、以架構(gòu)為中心的思考方式

單頁(yè)應(yīng)用是Web應(yīng)用的一種，不同于傳統(tǒng)的多網(wǎng)頁(yè)網(wǎng)站。我們需要以架構(gòu)為中心，將應(yīng)用劃分為獨(dú)立、可擴(kuò)展和可測(cè)試的部分。作為服務(wù)端和客戶端開(kāi)發(fā)者，我們需要思考如何將數(shù)據(jù)綁定、model層、關(guān)注點(diǎn)分離和依賴注入等概念融入我們的應(yīng)用中。

四、數(shù)據(jù)綁定

AngularJS的數(shù)據(jù)綁定特性令人矚目。它摒棄了DOM操作方式，自動(dòng)更新視圖。在jQuery中，我們常常通過(guò)響應(yīng)來(lái)修改視圖。而在AngularJS中，當(dāng)我們改變model層的數(shù)據(jù)時(shí)，視圖會(huì)自動(dòng)更新。

五、model層的區(qū)別

在jQuery中，DOM被視為一種model。但在AngularJS中，我們擁有完全獨(dú)立于視圖的model層，這有助于進(jìn)行數(shù)據(jù)綁定，保持關(guān)注點(diǎn)分離，并提高應(yīng)用的可測(cè)試性。我們可以按照需求管理這個(gè)model層。通過(guò)依賴注入（DI），我們可以自由地聲明組件并從這些組件中進(jìn)行實(shí)例化。盡管DI對(duì)于客戶端開(kāi)發(fā)者來(lái)說(shuō)可能是一個(gè)新概念，但從廣義的角度看，它是理所當(dāng)然的。

AngularJS與JS的區(qū)別在于其設(shè)計(jì)思路、與jQuery的混合使用、架構(gòu)思考方式、數(shù)據(jù)綁定以及model層的不同。理解這些區(qū)別有助于我們更好地掌握和使用AngularJS進(jìn)行Web應(yīng)用開(kāi)發(fā)。深入探索AngularJS的魅力：無(wú)需加載順序，無(wú)需關(guān)心文件位置

===============================

一、服務(wù)與模擬：無(wú)需與服務(wù)端實(shí)時(shí)交互

在AngularJS應(yīng)用中，我們經(jīng)常需要依賴應(yīng)用狀態(tài)和本地存儲(chǔ)的服務(wù)通過(guò)rest API執(zhí)行服務(wù)端存儲(chǔ)。但在測(cè)試階段，我們真的需要和真實(shí)的服務(wù)端通信嗎？答案是不必。在測(cè)試controller時(shí)，只需注入一個(gè)模擬服務(wù)即可。這個(gè)模擬服務(wù)能夠提供與真實(shí)服務(wù)相似的接口，但不必實(shí)時(shí)與服務(wù)端交互。Controller自身無(wú)需了解這種差異，從而確保測(cè)試的獨(dú)立性和高效性。

二、測(cè)試驅(qū)動(dòng)的開(kāi)發(fā)：重視測(cè)試的重要性

在許多使用過(guò)的jQuery插件中，真正擁有測(cè)試組件的并不多。原因在于jQuery在測(cè)試上的控制較為困難。AngularJS提供了不同的開(kāi)發(fā)體驗(yàn)。通過(guò)關(guān)注分離點(diǎn)，我們可以實(shí)現(xiàn)測(cè)試驅(qū)動(dòng)的開(kāi)發(fā)。在AngularJS中，我們可以專注于創(chuàng)建可測(cè)試、可復(fù)用的組件，而不是重復(fù)開(kāi)發(fā)。

三、指令的魅力：不同于jQuery的封裝方式

在AngularJS中，dom操作通常在指令中進(jìn)行。這不是簡(jiǎn)單的封裝jQuery代碼的方式。盡管某些指令可以像裝飾視圖一樣簡(jiǎn)單操作dom，但當(dāng)指令包含自己的模板和執(zhí)行邏輯時(shí)，需要以Angular的方式操作它。這意味著避免直接dom操作，轉(zhuǎn)而使用AngularJS提供的工具，如ngClass、ngBind等。這樣，指令更易于測(cè)試、復(fù)用和分發(fā)。

四、擁抱AngularJS，遠(yuǎn)離jQuery的束縛

許多AngularJS新手喜歡將大量jQuery代碼封裝成指令。雖然這種方式比直接dom操作要好，但仍然沒(méi)有充分利用AngularJS的優(yōu)勢(shì)。在AngularJS中，我們應(yīng)該盡量避免使用jQuery，因?yàn)樗赡軙?huì)阻止我們充分利用框架的特性和優(yōu)勢(shì)。當(dāng)我們需要執(zhí)行dom操作時(shí)，應(yīng)該首先問(wèn)自己是否真的有這個(gè)必要。盡量不使用jQuery，這樣可以避免增加不必要的工作量。

AngularJS與jQuery：兩大框架的比較

AngularJS作為一個(gè)JavaScript框架，目前在Web前端開(kāi)發(fā)中的使用率非常高。不同于jQuery，AngularJS提供了更豐富的功能和更強(qiáng)大的架構(gòu)支持。AngularJS強(qiáng)調(diào)組件化開(kāi)發(fā)、依賴注入和測(cè)試驅(qū)動(dòng)開(kāi)發(fā)等理念，使得前端開(kāi)發(fā)更加模塊化、可維護(hù)和可復(fù)用。而jQuery則更注重DOM操作，容易導(dǎo)致代碼耦合度高、難以維護(hù)。在選擇使用框架時(shí)，我們需要根據(jù)項(xiàng)目的需求和團(tuán)隊(duì)的技術(shù)棧來(lái)做出決策。源碼時(shí)代為你解析：前端開(kāi)發(fā)者啟動(dòng)AngularJS項(xiàng)目必備的二十款工具利器

============================

一、測(cè)試工具

在進(jìn)行AngularJS項(xiàng)目開(kāi)發(fā)時(shí)，測(cè)試是不可或缺的一環(huán)。為此，我們?yōu)槟憔x了以下幾款測(cè)試工具。

1. Karma：一個(gè)簡(jiǎn)單而強(qiáng)大的JavaScript測(cè)試工具，能在多個(gè)真實(shí)瀏覽器環(huán)境中執(zhí)行JavaScript代碼，為你提供完美的測(cè)試環(huán)境，方便你在手機(jī)和平板電腦上進(jìn)行應(yīng)用測(cè)試。

2. Protractor：一款端對(duì)端的測(cè)試框架，能在真實(shí)瀏覽器上運(yùn)行測(cè)試，模擬用戶的交互行為。

3. Jasmine：行為驅(qū)動(dòng)開(kāi)發(fā)測(cè)試框架，不依賴于瀏覽器、DOM或任何JavaScript框架，適用于任何Node.js項(xiàng)目或JavaScript運(yùn)行環(huán)境。

二、前端開(kāi)發(fā)工具

這些工具將幫助你在前端開(kāi)發(fā)過(guò)程中提高效率，簡(jiǎn)化操作。

1. Djangular：可重用的應(yīng)用，提供更佳的AngularJS集成。使用它，你可以輕松為每個(gè)應(yīng)用創(chuàng)建特定的AngularJS內(nèi)容。

2. Ment.io：引入mention部件和宏控件，不依賴jQuery，可作用于任何元素，支持可選文本輸入。

3. Angular Kickstart：加速AngularJS開(kāi)發(fā)，擁有可擴(kuò)展的構(gòu)建系統(tǒng)，簡(jiǎn)化開(kāi)發(fā)流程。

三、庫(kù)與模塊管理工具

對(duì)于項(xiàng)目的模塊化管理和庫(kù)的引用，以下工具將大有裨益。

1. AngularFire：輕松創(chuàng)建Angular應(yīng)用后臺(tái)，靈活的API、三種數(shù)據(jù)綁定方式以及快速開(kāi)發(fā)能力讓開(kāi)發(fā)變得更輕松。

2. Restangular：簡(jiǎn)化常見(jiàn)的HTTP請(qǐng)求，如GET、POST、DELETE、UPDATE，對(duì)于通過(guò)RESTful API進(jìn)行數(shù)據(jù)操作的Web應(yīng)用非常理想。

四、IDE與編輯器

一款好的編輯器或IDE能大大提高你的開(kāi)發(fā)效率。

1. Mocha.js：在Node.js和瀏覽器上運(yùn)行的豐富測(cè)試框架，支持異步測(cè)試，報(bào)告和映射靈活準(zhǔn)確。

2. SublimeText：對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，這是最好的文本代碼編輯器之一，讓編碼變得更簡(jiǎn)單。

3. Webstorm：智能代碼編輯器，支持JavaScript、Node.js、HTML和CSS等，適應(yīng)先進(jìn)技術(shù)趨勢(shì)。

五、其他實(shí)用工具

這些工具將在項(xiàng)目開(kāi)發(fā)的各個(gè)階段提供幫助。

1. Generator Angular：幫助你快速設(shè)置項(xiàng)目的默認(rèn)結(jié)構(gòu)，輸出讓你快速啟動(dòng)app開(kāi)發(fā)的模板。

2. NG-Inspector：Chrome和Safari的瀏覽器擴(kuò)展，幫助你開(kāi)發(fā)、調(diào)試和深入理解AngularJS應(yīng)用，易于識(shí)別和顯示Controllers和Directives中的scope。

3. Angular Seed：典型的AngularJS web app開(kāi)發(fā)框架，快速啟動(dòng)angular app的開(kāi)發(fā)環(huán)境。

4. Code Orchestra：所見(jiàn)即所得的前端開(kāi)發(fā)工具，自動(dòng)展示修改后的代碼。

5. Videogular：針對(duì)AngularJS的HTML5視頻播放庫(kù)，使在app中使用視頻或其他多媒體更為簡(jiǎn)單。

一、Angular工具介紹

Angular GetText是一個(gè)簡(jiǎn)單易用的翻譯工具，只需輸入英文文本并標(biāo)記需要翻譯的部分，它即可進(jìn)行快速翻譯。Angular Deckgrid則是一個(gè)輕量級(jí)的表格，它的展現(xiàn)樣式完全依賴于你在CSS中定義的樣式，提供了極大的靈活性。

二、AngularJS的UI組件庫(kù)

Angularjs UI是一個(gè)包含眾多UI組件的集合庫(kù)。它提供了許多有用的指令，幫助開(kāi)發(fā)者更快速地構(gòu)建Angular應(yīng)用。其中包括ui-router、ui-map和ui-calendar等指令，極大地簡(jiǎn)化了開(kāi)發(fā)過(guò)程。

三 走進(jìn)Mean世界

Mean是一個(gè)使用MongoDB、Node.js、Express和AngularJS的簡(jiǎn)單而完美的模板。它捆綁并配置了一些模塊，如Mongoose和Passport等，為開(kāi)發(fā)者提供了便捷的開(kāi)發(fā)環(huán)境。

四、前端開(kāi)發(fā)工具包Wijmo

Wijmo是新一代HTML5/JavaScript UI控件，它是一款大而全面的前端開(kāi)發(fā)工具包。這款工具包全面支持Angular 2，為開(kāi)發(fā)者提供了豐富的功能和強(qiáng)大的性能。

五、VS Code編輯器介紹

VS Code（Visual Studio Code）是微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)文本（代碼）編輯器。它幾乎是一個(gè)完美的編輯器，廣泛應(yīng)用于各種開(kāi)發(fā)場(chǎng)景。

源碼時(shí)代：AngularJS頁(yè)面遷移到微信小程序

一、頁(yè)面遷移攻略

想要將AngularJS開(kāi)發(fā)的頁(yè)面遷移到微信小程序，首先需要進(jìn)行頁(yè)面目錄的遷移。每個(gè)子模塊頁(yè)面應(yīng)轉(zhuǎn)換為Pages目錄下的一個(gè)子目錄，目錄命名應(yīng)與原子模塊名一致。將原來(lái)的通用資源如css、image、fonts等統(tǒng)一移至resource目錄下。

二、替換規(guī)則

在遷移過(guò)程中，需要遵循一定的替換規(guī)則。例如，將div統(tǒng)一轉(zhuǎn)換為View，將ng-show轉(zhuǎn)換為wx:if，將ng-click轉(zhuǎn)換為bindtap，將ng-repeat轉(zhuǎn)換為wx:for，以及對(duì)于ng-class中的樣式選擇性綁定，可以直接把條件綁定語(yǔ)句嵌入class屬性。

三、JS代碼遷移

在JS代碼的遷移過(guò)程中，可以將模塊級(jí)作用域使用的通用邏輯遷移到app.js中，通過(guò)app對(duì)象來(lái)引用。或者定義一個(gè)util模塊，實(shí)現(xiàn)動(dòng)態(tài)引入。對(duì)于原生與H5交互時(shí)使用的自定義，需要根據(jù)具體場(chǎng)景進(jìn)行處理。對(duì)于Angular子模塊代碼，可以直接遷移到小程序?qū)?yīng)的Page對(duì)象中。對(duì)于Angular特定語(yǔ)法的$對(duì)象（如$scope、$rootscope）的操作，需要做全局替換，確保代碼在小程序中正常運(yùn)行。

一、$rootScope的推薦引用

在應(yīng)用程序的構(gòu)建過(guò)程中，對(duì)于$rootScope的引用，我們推薦將其放入app對(duì)象中。這樣做的好處是能夠更好地組織和管理代碼，使得結(jié)構(gòu)更為清晰。您也可以選擇創(chuàng)建自定義的通用模塊，并動(dòng)態(tài)地引入$rootScope。這樣的做法有助于代碼的模塊化和復(fù)用性，提高開(kāi)發(fā)效率和代碼的可維護(hù)性。

章節(jié)二：數(shù)據(jù)模型的優(yōu)化存儲(chǔ)

二、數(shù)據(jù)模型的存儲(chǔ)與整理

在各頁(yè)面中建立的數(shù)據(jù)模型，我們建議直接放入.json文件中。這樣做的好處是便于數(shù)據(jù)的統(tǒng)一管理和維護(hù)。如果涉及到Angular特定語(yǔ)法的操作，您可以參考上述對(duì)于$rootScope的引用方式，將相關(guān)操作進(jìn)行替換和整合。通過(guò)這種方式，您的代碼將更為簡(jiǎn)潔、清晰，易于理解和維護(hù)。

章節(jié)三：從jsonp請(qǐng)求到wx.request的轉(zhuǎn)變

三、從jsonp到wx.request的轉(zhuǎn)變策略

在開(kāi)發(fā)中，我們推薦將原有的jsonp請(qǐng)求統(tǒng)一替換為wx.request。這種替換有助于提高代碼的可讀性和可維護(hù)性。需要注意的是，原來(lái)的鏈?zhǔn)綄?xiě)法需要改為參數(shù)型寫(xiě)法，以適應(yīng)wx.request的調(diào)用方式。盡管這種改變可能需要一些適應(yīng)，但長(zhǎng)遠(yuǎn)來(lái)看，這將有助于代碼的穩(wěn)定性和可拓展性。

章節(jié)四：頁(yè)面跳轉(zhuǎn)方式的更新

四、子模塊間頁(yè)面跳轉(zhuǎn)的優(yōu)化

在子模塊之間進(jìn)行頁(yè)面跳轉(zhuǎn)時(shí)，我們推薦將原有的$state.go統(tǒng)一替換為wx.navigateTo或wx.navigateBack。這種替換是為了更好地適應(yīng)微信小程序的開(kāi)發(fā)規(guī)范，提高代碼的可讀性和可維護(hù)性。使用wx.navigateTo和wx.navigateBack可以實(shí)現(xiàn)更為流暢、自然的頁(yè)面跳轉(zhuǎn)體驗(yàn)。

章節(jié)五：總結(jié)與展望

五、技術(shù)優(yōu)化的總結(jié)與展望

以上，我們針對(duì)幾個(gè)關(guān)鍵的開(kāi)發(fā)點(diǎn)進(jìn)行了詳細(xì)的闡述和推薦，包括$rootScope的引用、數(shù)據(jù)模型的存儲(chǔ)、jsonp請(qǐng)求到wx.request的轉(zhuǎn)變、以及子模塊間頁(yè)面跳轉(zhuǎn)方式的優(yōu)化。這些優(yōu)化措施旨在提高代碼的質(zhì)量、可讀性和可維護(hù)性，為開(kāi)發(fā)者帶來(lái)更為高效、便捷的開(kāi)發(fā)體驗(yàn)。未來(lái)，隨著技術(shù)的不斷進(jìn)步和更新，我們期待更多的開(kāi)發(fā)規(guī)范和工具出現(xiàn)，推動(dòng)開(kāi)發(fā)效率和用戶體驗(yàn)的不斷提升。