標籤:

angularJs到底是幹什麼用的?

本人菜鳥,剛接觸angularJs,在網上找了一堆資料也沒明白angularJs是幹什麼的,有哪位大神能給我講講唄~謝謝~


實名反對 @林豐 的答案,顯然其沒有真正用過 Angular。

雖然誤導還沒開始用的人用處不大,不過還是反對任何形式的誤導。

1. ng-class完全不會使用。

&

ng-class中是一個Angular Execution Context,其求值結果要麼是1.字元串 2.對象 3.前兩者的數組。

可以直接使用對象,無需寫個字典查找。

ng-class = "{haha: ha, nohaha: !ha}"

對於每個Key-Value-Pair,當Value為truthy的時候Key就會成為Class。

2. ng-app從來不是必須的。

要設置ng-app,一般放在html節點上,比如說

Angular 1.X 的啟動方式為調用 angular.bootstrap ,當設置了 ng-app 指令後(其實ng-app根本不是指令,是寫死在AngularInit函數中直接用jQuery或JqLite找出寫了ng-app的DOM元素)Angular會自動幫你在指定元素上調用 angular.bootstrap ,簡單地說是一個(DSL的)自啟動的語法糖。

ng-app的缺陷是一個頁面只能啟動一個Angular Application,不過對於一般網頁足夠。

3. 完全偏離官方建議和任何可維護的代碼規範

a 所有的controller、directive、filter、service全部都要附加在模塊module上面。

Controller附加在module上還說得過去,但directive和filter和service都應該獨立封裝,不管是為單元測試還是為重用性。

4. 完全不了解Angular作用域

b 每一個controller都是獨立的作用域,它用於直接控制接管操作對應的html元素

對於每個directive,其scope可以指定三種可能的值:

false:繼續使用當前作用域。

true:在當前作用域上創建新的子作用域。

{/*一個對象*/}:具有給定屬性和綁定關係的獨立作用域。

ng-controller中的scope值是true,也就是在其父作用域(父DOM所在的作用域)上創建了一個新的子作用域,並非獨立作用域,子Controller對應的HTML模板中可以直接訪問父Controller的$scope中的內容,所有Controller對應的模板都能訪問$rootScope(ng-app所在的DOM,或bootstrap給定的DOM),何來獨立。

ngController不算單獨的括弧6行代碼,有空看一眼就好,應該不至於看不懂吧。

5. 數據交換需要Scope,但是不一定需要$scope

c $scope是html元素到controller之間的映射,你可以直接就看成controller要通過

$scope來操作 html元素。

簡單的controller自身變數傳遞完全可以通過Controller As來做,避免$scope污染(因為一點都不獨立)。

Controller:

angular.module(myApp).controller(MyController, [function() {
this.name = World;
}];

Template:

&
Hello {{ctrl.name}}!
&

並不需要$scope變數。

6. 從來沒有說Angular不應該操作DOM

angualr不要寫jQuery

從來說的是不要在Controller中操作DOM,操作DOM的東東手動封裝成Directive。

要是答主也就只寫Controller我也無話可說啦。


樓上概念或表述有不少問題。

1.什麼叫angularjs是一個前端的框架,用來編寫js代碼。jQuery也是用來寫js的。。。

他們都是js語言寫的前端工具,「用來寫js的」這種話總感覺是在描述一個編輯器。。

2.jQuery實質上就是提供了一些前端常用的,針對元素的處理的簡便寫法。先通過選擇器選到元素,然後再對其做一系列的操作,就是一個工具包而已。只不過選擇器返回了一個帶dom元素的jq對象,jq對象的每個方法又返回jq對象本身,因而支持了$(.x).xxx().yyy().bbbb()的寫法,在那個年代來說,是個創舉了。

3.簡單地說,AngularJS把原來常在後台實現的模板渲染,路由的功能都移到了前端,擴展了html使支持動態視圖,從根源上解決了html不適合動態視圖的問題。直接在html里綁定數據和邏輯,思路大不相同。

4.要看懂angular,去看https://docs.angularjs.org/guide這個,耐心看完了就懂了。

5.一個合格的程序員必須會翻牆,要麼就在牆外

6.下angular用bower,前端的包管理,下bower用npm


HTML是一種文檔格式,和word類似。從左到右,從上到下。

用jQuery可以很方便地操作dom節點,讓「文檔」動起來,做成app。但是仍然是文檔。

而angular是一套非常徹底的框架,讓程序員可以直接在HTML上寫app,不用管HTML是一種文檔格式了。


也只是用過而已,講講自己的理解

AngularJs是一個框架,框架的目的是有條理,可維護,易編程。

如果你的js代碼只不過寥寥幾十行大可不必用這樣的框架,讀懂幾十行代碼不需要費多大的勁,然而當你的代碼量達到成千上萬行如果沒有一定的條理相信自己維護起來都困難。

所以框架給了我們一定的結構或者更簡便的方法來維護我們的代碼……


這樣說吧,例如一個最傳統的沒有用到框架的Javaweb程序,用jsp做視圖層(view),servlet做控制層(control),javabean做模型層(model)。那麼一般來說html代碼都是寫在jsp文件裡面,用戶請求到jsp文件的時候,jsp渲染生成html代碼返回給瀏覽器。所以一個傳統的javaweb項目裡面會存在很多jsp文件。

說一個簡單的應用:如果你用到了AngularJS,那麼,這些jsp文件就可以不存在了,取而代之的可以是純html頁面文件,裡面使用AngularJS,從後台提供的介面(就是一個鏈接)獲取到數據(用json格式顯示),然後直接在瀏覽器展示(渲染)出來。而用戶在html頁面上的操作,又直接變成json格式的數據,再把數據通過後台提供的介面傳給後台處理。

原來都說因為html是代表靜態頁面的,所以如果要做動態頁面,就得用jsp、php、asp、.net這類語言,但是,有了AngularJS,可以讓html也可以具有動態頁面的特點了。

大概是這樣、


推薦閱讀:

前端每周清單半年盤點之 Angular 篇
React 與angular 性能測試對比?
你用AngularJS 做過項目後,下一個項目還用AngularJS嗎?

TAG:AngularJS |