資訊專欄INFORMATION COLUMN
摘要：入門一前言目前來說相對于現(xiàn)在流行的高版本以及來說實屬是老套的前端框架了，當(dāng)然這都不重要，沒有完美的框架，只有不斷優(yōu)化的代碼。通過使用我們稱為指令的結(jié)構(gòu)，讓瀏覽器能夠識別新的語法。使用作為輸入，而不是字符串，是區(qū)別于其它的框架的最大原因。
AngularJs 入門（一） 前言
AngularJs目前來說相對于現(xiàn)在流行的高版本ng2、ng4,以及Vue2.0、React來說實屬是老套的前端框架了，當(dāng)然這都不重要，沒有完美的框架，只有不斷優(yōu)化的代碼。其實只是符合公司水平要求才這么整的啊。。話不多說，開搞吧。
一、什么是AngularJs
1、AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計的。HTML是一門很好的為靜態(tài)文本展示設(shè)計的聲明式語言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。
通常，我們是通過以下技術(shù)來解決靜態(tài)網(wǎng)頁技術(shù)在構(gòu)建動態(tài)應(yīng)用上的不足：
1> 類庫 - 類庫是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用。起主導(dǎo)作用的是你的代碼，由你來決定何時使用類庫。類庫有：jQuery等。
2> 框架 - 框架是一種特殊的、已經(jīng)實現(xiàn)了的WEB應(yīng)用，你只需要對它填充具體的業(yè)務(wù)邏輯。這里框架是起主導(dǎo)作用的，由它來根據(jù)具體的應(yīng)用邏輯來調(diào)用你的代碼?？蚣苡校簁nockout、sproutcore等。
AngularJS使用了不同的方法，它嘗試去補足HTML本身在構(gòu)建應(yīng)用方面的缺陷。AngularJS通過使用我們稱為指令(directives)的結(jié)構(gòu)，讓瀏覽器能夠識別新的語法。例如：
使用雙大括號{{}}語法進行數(shù)據(jù)綁定；
使用DOM控制結(jié)構(gòu)來實現(xiàn)迭代或者隱藏DOM片段；
支持表單和表單的驗證；
能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上；
能將HTML分組成可重用的組件。
還有很多事情，這里大概提一下。到了模塊介紹和具體項目中會詳細(xì)講解。
二、特性
1>雙向的數(shù)據(jù)綁定。
它能夠幫助你避免書寫大量的初始代碼從而節(jié)約開發(fā)時間。一個典型的web應(yīng)用可能包含了80%的代碼用來處理，查詢和監(jiān)聽DOM。數(shù)據(jù)綁定是的代碼更少，你可以專注于你的應(yīng)用。我們想象一下Model是你的應(yīng)用中的簡單事實。你的Model是你用來讀取或者更新的部分。數(shù)據(jù)綁定指令提供了你的Model投射到view的方法。這些投射可以無縫的，毫不影響的應(yīng)用到web應(yīng)用中。傳統(tǒng)來說，當(dāng)model變化了。
開發(fā)人員需要手動處理DOM元素并且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅(qū)動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。這個在用戶互動中更加復(fù)雜，因為開發(fā)人員需要處理和解析這些互動，然后融合到一個model中，并且更新View。這是一個手動的復(fù)雜過程，當(dāng)一個應(yīng)用非常龐大的時候，將會是一件非常費勁的事情。這里肯定有更好的解決方案！那就是AngularJS的雙向數(shù)據(jù)綁定，能夠同步DOM和Model等等。
2> 一個模板就是一個HTML文件。
但是HTML的內(nèi)容擴展了，包含了很多幫助你映射model到view的內(nèi)容。HTML模板將會被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導(dǎo)，即，directive（指令）。所有的指令都負(fù)責(zé)針對view來設(shè)置數(shù)據(jù)綁定。我們要理解AuguarJS并不把模板當(dāng)做String來操作。輸入AngularJS的是DOM而非string。數(shù)據(jù)綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區(qū)別于其它的框架的最大原因。使用DOM允許你擴展指令詞匯并且可以創(chuàng)建你自己的指令，甚至開發(fā)可重用的組件。最大的好處是為設(shè)計師和開發(fā)者創(chuàng)建了一個緊密的工作流。設(shè)計師可以像往常一樣開發(fā)標(biāo)簽，然后開發(fā)者拿過來添加上功能，通過數(shù)據(jù)綁定將會使得這個過程非常簡單。
3> 服務(wù)和依賴注入
AngularJS擁有內(nèi)建的依賴注入（DI）子系統(tǒng)，可以幫助開發(fā)人員更容易的開發(fā)，理解和測試應(yīng)用。DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負(fù)責(zé)找創(chuàng)建并且提供給我們。為了而得到核心的AngularJS服務(wù)，只需要添加一個簡單服務(wù)作為參數(shù)，AngularJS會偵測并且提供給你。
4>指令（Directives）
指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情？那么AngularJS可以做到。指令可以用來創(chuàng)建自定義的標(biāo)簽。它們可以用來裝飾元素或者操作DOM屬性?？梢宰鳛闃?biāo)簽、屬性、注釋和類名使用。然后，你可以使用這個自定義的directive來使用：使用一系列的組件來創(chuàng)建你自己的應(yīng)用將會讓你更方便的添加，刪除和更新功能。
5>模塊化設(shè)計
模塊是提供一些特殊服務(wù)的功能塊，比如本地化模塊負(fù)責(zé)文字本地化，驗證模塊負(fù)責(zé)數(shù)據(jù)驗證。一般來說，服務(wù)在模塊內(nèi)部，當(dāng)我們需要某個服務(wù)的時候，是先把模塊實例化，然后再調(diào)用模塊的方法。但Angular模塊和我們通常理解的模塊不一樣，Angular模塊只保留服務(wù)的聲明，服務(wù)的實例化是由服務(wù)注入器完成的，實例化之后服務(wù)就留在了服務(wù)注入器中，和模塊沒有關(guān)系了，這就是為什么我們使用的服務(wù)全部來自注入器的原因。每調(diào)用一次angular.boostrap()方法會創(chuàng)建一個新的Angular應(yīng)用和一個新的服務(wù)注入器，因此，每個應(yīng)用都對應(yīng)一個服務(wù)注入器，彼此互不沖突。
在angular中，模塊可以是對象、方法（如果是數(shù)組，數(shù)組的最后一個元素必須是方法，前面的元素都是方法按順序排列的參數(shù)名稱）。后面講的模塊屬性和方法，都屬于通過angular.module()定義的模塊對象。如果模塊是方法，是不需要經(jīng)過angular.module()定義的，只需寫入依賴數(shù)組（就是說依賴數(shù)組的元素可以是方法），模塊在加載依賴關(guān)系的時候直接執(zhí)行了。
注意：通過angular.module()方法定義的模塊是唯一的，如果重復(fù)定義就會覆蓋前面的定義。
高內(nèi)聚低耦合法則
1)官方提供的模塊：ng、ngRoute、ngAnimate、ngTouch
2)用戶自定義的模塊：angular.module("模塊名",[ ])
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92506.html
摘要：在跟著中文社區(qū)的入門教程一開始學(xué)習(xí)就發(fā)現(xiàn)了紕漏。。。啟動服務(wù)，運行命令，過程需要等待幾分鐘。中文社區(qū)此處使用命令，會報錯，錯誤提示翻看路徑確實沒有文件。所以改用命令即可解決錯誤成功啟動服務(wù)。 前言 眾所周知，AngularJS已成為前端的一大熱框架，AngularJS已然成為Web應(yīng)用開發(fā)世界里最受歡迎的開源JavaScript框架。但雖然AngularJS 2也發(fā)布了蠻久的但相關(guān)的學(xué)...
摘要：特此寫個流水賬總結(jié)，供自己以后羞恥的回顧。正逢月計劃辭職回家玩游戲過個暑假，結(jié)果在如今部門老大的忽悠下加入到了新東家。和組長兩人繼續(xù)沒晝夜的忙活，最終也按時交差，上了線。卷土重來，回報過去的一份念舊，期待的美好，個人選型入坑。 前言 2017年發(fā)生了太多的事情，結(jié)了婚，住進了新家，成功的播了種，當(dāng)上了準(zhǔn)爸爸。公司也蒸蒸日上搬進了高大上的寫字樓。前端的坑越來越大，都來不及填。特此寫個流水...
摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
摘要：下面圍繞的這樣的目的，即左右知乎網(wǎng)頁上屏幕截圖功能的實現(xiàn)前端掘金背景最近注意到知乎的屏幕截圖反饋功能，感覺非常不錯。正如你期望的，文中的闖關(guān)記之垃圾回收和內(nèi)存管理前端掘金題圖來源，授權(quán)基于協(xié)議。 微信小程序?qū)崙?zhàn)學(xué)習(xí) 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大場景? 微信小程序本質(zhì)上來說就是一個 HTML 5（移動網(wǎng)頁） 應(yīng)用，用view、scoll-view代替了div標(biāo)...
閱讀 1057·2021-11-15 18:11
閱讀 3177·2021-09-22 15:33
閱讀 3473·2021-09-01 11:42
閱讀 2671·2021-08-24 10:03
閱讀 3632·2021-07-29 13:50
閱讀 2939·2019-08-30 14:08
閱讀 1286·2019-08-28 17:56
閱讀 2268·2019-08-26 13:57
