今天在這里分享分享我個人學(xué)習(xí)angular的知識點總結(jié)。在還沒有接觸到angular的時候,還真的不知道它到底有什么作用,直到我開始學(xué)習(xí)它,并且運用到它的時候,才知道angular這么強大。作為一個前端開發(fā)人員,我們要對新知識不斷地學(xué)習(xí),不斷的充電,對待新知識不斷地渴望,學(xué)習(xí)新技術(shù)是我們每一位程序員的必備功課,這樣我們才不會被潮流淘汰掉。希望今后的日子里,能和各位博友和大神們在技術(shù)上共勉!

什么是angularJS?

它是一個用于設(shè)計動態(tài)web應(yīng)用的結(jié)構(gòu)框架,首先它是一個框架,不是像Query這樣的什么類庫,它與jQuery不同之處在于,前者致力于MVC代碼解耦,采用的是model,controller以及view方式組織代碼,而后者是給你提供了很多的APi函數(shù)。那么什么是動態(tài)web應(yīng)用呢,官方的解釋是擴展HTML添加動態(tài)特性,和傳統(tǒng)的web系統(tǒng)不同的是,web應(yīng)用能為用戶提供豐富的操作,能夠隨用戶操作不斷更新視圖而不進(jìn)行url跳轉(zhuǎn),也就是我們所說的單頁面應(yīng)用程序 (Single Page Application),angular使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序變得更加容易,大家可以去看看網(wǎng)易音樂http://music.163.com/#,它其實就是一個單頁面操作的。在這里我自己也寫了一個頁面,也是實現(xiàn)的是單頁面的,托管到了Github上面了,大家有興趣的話可以下載來看看:https://github.com/blackManbaZhu/doubanApp/tree/master

效果地址:https://blackmanbazhu.github.io/doubanApp/#/in_theaters

angularJS的特點特性:

1、MVC架構(gòu)模式,然而,要說angularJS它是MVC模式,倒不如說它更像是MVVM模式,因為它采用了MVC的基本思想,而又不完全是MVC。讓我們來看看MVC的概念:

M: model 模型

1、存儲數(shù)據(jù)

V: view 視圖

1、展現(xiàn)數(shù)據(jù)給用戶

2、與用戶交互

C: Controller 控制器 調(diào)度者

1、請求數(shù)據(jù)(ajax操作)

2、將數(shù)據(jù)存儲到model中

3、將模型中的數(shù)據(jù)交給視圖顯示(通過$scope對象)

4、監(jiān)視模型的變化,做出相應(yīng)的動作

2、angular了里面還有一個就是雙向數(shù)據(jù)綁定,通過雙向數(shù)據(jù)綁定來消除DOM操作,在任何時候當(dāng)模型改變時視圖都會得到更新。

3、模塊化與依賴注入,也就是代碼模塊化,每個模塊的代碼都獨立擁有自己的作用域scope,模型model,控制器controller,然后每個模塊之間可以相互依賴,這樣大大的提高了代碼的重用性和靈活性,它還有一個比較好的模式是,它可以把一些操作放到客戶端去操作,服務(wù)端只提供數(shù)據(jù)來源,和其他客戶端不能完成的操作,這樣盡可能的減少服務(wù)端的負(fù)擔(dān)。

實踐:

接下來的話就讓我們用實踐去一步一步的去學(xué)習(xí)angular,我個人覺得寫一些demo練習(xí),比理解理論概念要學(xué)習(xí)的快一些,畢竟實踐是檢驗真理的唯一標(biāo)準(zhǔn)。通過一些小demo,讓我們更好的理解angularJS。在此,我申明一下,我寫的博客并不是教程,只是在學(xué)習(xí)過程中的知識點總結(jié),可能在其中有很多不足的地方,畢竟我的知識和理解能力也是有限的,希望大家能把不足指正出來,我們一起共同進(jìn)步和學(xué)習(xí)。

在使用之前,我們需要下載angularJS,然后把它引入到我們的項目中:

官方下載地址:https://angularjs.org/

使用npm下載:打開命令窗口,輸入命令npm install angular 直接下載到我們的項目中去。

首先讓我們先來看看angularJS的基本寫法:

先看代碼,代碼如下:

網(wǎng)友評論