在巴黎舉行的ng-europe大會(huì )上,Angular團隊為與會(huì )者介紹了即將到來(lái)的AngularJS 2.0版本的細節。
新版本對1.x版本進(jìn)行了重大的顛覆,當前還沒(méi)有任何遷移指南,此外它還是基于一個(gè)名為AtScript的新語(yǔ)言進(jìn)行開(kāi)發(fā)的。 對于熟悉Angular 1.X版本的開(kāi)發(fā)者來(lái)說(shuō),他們將看到一個(gè)完全不同的框架,并且必須學(xué)習一種新的架構。
在一堂關(guān)于版本2.0的變更的講座中,Igor Minar 和 Tobias Bosch介紹了新的模板語(yǔ)法: Add 這種新語(yǔ)法將數據綁定到元素的屬性(property)上,而不是特性(attribute)上。這就允許你使用以下語(yǔ)法: 看上去類(lèi)似于標準的HTML,但這個(gè)復選框元素不會(huì )暴露出checked特性。
新的模板引擎將數據綁定到元素的屬性上,即使這些屬性并非由DOM所暴露出的特性。 與新架構引起的其它劇變相比,新的模板語(yǔ)法只是一個(gè)相對較小的改動(dòng)。
與會(huì )者之一的Michael Bromley描述了一些新版本的一些破壞性改動(dòng),版本2.0取消了1.X中的以下概念 控制器(Controller) (Directive定義對象) $scope angular.module jqLite 關(guān)于jqLite的取消,Igor是這樣說(shuō)的: 在2.0中,我們不會(huì )在框架中使用任何DOM的封裝了,而是直接和原始的DOM打交道。自從我們啟動(dòng)項目以來(lái),DOM本身已經(jīng)得到了很大的改善,因此我們不再需要一個(gè)兼容層來(lái)幫助我們應付跨瀏覽器的問(wèn)題了。
所以我們可以直接操作原始的DOM。不過(guò)如果你想要使用jQuery,在你的組件中應用jQuery,那也完全沒(méi)問(wèn)題。
2.0版本的一個(gè)目標是改善Angular應用的開(kāi)發(fā)體驗,在第2天的主題演講上,AngularJS之父Mi?ko Hevery描述了如何通過(guò)使用AtScript來(lái)實(shí)現這一目標。 AtScript是TypeScript的一個(gè)超集,后者是由微軟創(chuàng )建的一門(mén)語(yǔ)言。
TypeScript為JavaScript加入了類(lèi)型,而AtScript進(jìn)一步擴展了這一思想,它為類(lèi)型加入了標注與動(dòng)態(tài)注入。 標注允許開(kāi)發(fā)者為某個(gè)類(lèi)加入“表達意圖”的能力。
因此,無(wú)需通過(guò)模板代碼的方式創(chuàng )建自定義directive,開(kāi)發(fā)者可以創(chuàng )建一個(gè)類(lèi),并告訴AngularJS“這是一個(gè)directive”。而動(dòng)態(tài)注入的能力允許框架在運行時(shí)檢查類(lèi)型信息。
不過(guò),AtScript的使用是可選的,開(kāi)發(fā)Angular 2.0應用并不一定要使用AtScript。Mi?ko說(shuō)道:由于現在的社區和類(lèi)庫都是使用純JavaScript開(kāi)發(fā)的,因此不強迫AtScript的使用是非常重要的目標。
而由于A(yíng)tScript可以直接編譯為EcmaScript 5(ES5),因此開(kāi)發(fā)者可以直接編寫(xiě)Angular 2.0。 在一次問(wèn)答講座上,開(kāi)發(fā)者們問(wèn)道Angular 1.3還將獲得多長(cháng)時(shí)間的支持。
Brad Green是這樣回答的: 比較合理的期望是,我們大約還需要1年半至2年時(shí)間以發(fā)布2.0的最終版本,這段時(shí)間內我們還會(huì )為1.3提供缺陷修復及安全補丁。 Angular團隊還暗示他們沒(méi)有為從Angular 1.X遷移到2.0提供遷移指南,但他們也不排除這種可能。
目前還沒(méi)有確切的發(fā)布日期,不過(guò)團隊基本達成了共識,會(huì )在2015年終最終完成版本2.0。 Brad Green還表示,Angular 2.0只會(huì )支持“最新的瀏覽器”,但沒(méi)有指出確切的版本。
他說(shuō)他們的團隊“在嘗試基于未來(lái)的標準進(jìn)行開(kāi)發(fā),而不是關(guān)注于現有的標準”。 開(kāi)發(fā)者們對于這次重大變更的感覺(jué)可謂是五味陳雜。
Hacker News的用戶(hù)zak_mc_kracken說(shuō)道: 雖然新版本依然叫做“Angular”,但它與之前的版本幾乎沒(méi)有多少相似之處,它完全是一個(gè)新的框架。一想到我對于A(yíng)ngular 1所掌握的全部知識都將成為過(guò)期的內容,就禁不住感到有點(diǎn)兒悲傷,但我也很期待對這個(gè)新的框架進(jìn)行一番研究。
如果它的革新性能夠達到Angular 1的一半,那我就會(huì )從中獲得很大的樂(lè )趣。 ng-europe大會(huì )的視頻曾被短暫地上傳到YouTube上,但很快就被刪除了。
未來(lái)的發(fā)展趨勢是前端后端只靠json數據來(lái)進(jìn)行通信:后端只處理和發(fā)送一段json數據到前端,然后計算和模板渲染都在前端進(jìn)行。而前端的改動(dòng)后,形成json數據然后傳回到后端。未來(lái)趨勢就是:后臺程序再也不做模板的任何處理
AngularJS
的作用簡(jiǎn)單說(shuō)就是就是把后臺的json值直接用html進(jìn)行渲染,然后html的操作又直接在形成json傳回后臺。
未來(lái)的后臺MVC,試圖不再是模板了,而是一段結構整齊標準的JSON,而這個(gè)JSON作為前臺的model直接在A(yíng)ngularJS直接使用。
或者說(shuō)后臺的試圖是前臺的模型,而整個(gè)前臺就是后臺的視圖。后臺程序再也不做模板的任何處理了。
Angular是框架的一種,不學(xué)也能開(kāi)發(fā)前端。學(xué)backbone或者ember也能開(kāi)發(fā)前端。沒(méi)有js的mvc,就光弄個(gè)jquery,也能開(kāi)發(fā)前端。
那到底要不要學(xué)?個(gè)人覺(jué)得就是要看發(fā)展趨勢。angular是否簡(jiǎn)化的前端開(kāi)發(fā),是否符合未來(lái)前端的開(kāi)發(fā)趨勢。以現在的js的發(fā)展程度來(lái)看,angular
是符合發(fā)展趨勢的,第一,解耦前端,第二,可以模塊化,第三可測試,第四天生支持json,第五依賴(lài)注入等等等,還有一些其他特性使得angular跟隨甚至是推動(dòng)了前端的開(kāi)發(fā)趨勢。
所以說(shuō)angular學(xué)習是有好處的:
1.了解前端的開(kāi)發(fā)趨勢
2.學(xué)習MV*的設計方法
3.學(xué)習模塊化編程
4.學(xué)習如何測試模塊
5.使用angular簡(jiǎn)化開(kāi)發(fā)流程
6.隨著(zhù)google的大力支持和逐漸流行,公司開(kāi)始使用angular,有些崗位需要有angular的知識才能工作。
angularjs 與 jquery 等傳統操作 dom 的思想有所不同,
對于 jquery 等,一般是先有完整 dom 然后在這些 dom 的基礎上進(jìn)行二次調教。
而 angularjs 等框架則是 根據 數據模型 以及其對應的 dom 模版,然后通過(guò)模版像搭積木那樣組合頁(yè)面。
顯然的,前者在 seo 上有天然優(yōu)勢;而后者,搜索引擎還只能拿到某個(gè)模版,而無(wú)內容。
暫時(shí)沒(méi)想到有什么特別好的解決方案,或許,對于內容頁(yè),可以繼續使用傳統方式,而只在需要更多交互的地方應用 angularjs,特別是在移動(dòng)端應用上。
同理適用于各種 前端的 mvc 框架,后端只要為前端提供數據接口,而不再需要為其拼接 html.
在巴黎舉行的ng-europe大會(huì )上,Angular團隊為與會(huì )者介紹了即將到來(lái)的AngularJS 2.0版本的細節。
新版本對1.x版本進(jìn)行了重大的顛覆,當前還沒(méi)有任何遷移指南,此外它還是基于一個(gè)名為AtScript的新語(yǔ)言進(jìn)行開(kāi)發(fā)的。 對于熟悉Angular 1.X版本的開(kāi)發(fā)者來(lái)說(shuō),他們將看到一個(gè)完全不同的框架,并且必須學(xué)習一種新的架構。
在一堂關(guān)于版本2.0的變更的講座中,Igor Minar 和 Tobias Bosch介紹了新的模板語(yǔ)法: 這種新語(yǔ)法將數據綁定到元素的屬性(property)上,而不是特性(attribute)上。這就允許你使用以下語(yǔ)法: 看上去類(lèi)似于標準的HTML,但這個(gè)復選框元素不會(huì )暴露出checked特性。
新的模板引擎將數據綁定到元素的屬性上,即使這些屬性并非由DOM所暴露出的特性。 與新架構引起的其它劇變相比,新的模板語(yǔ)法只是一個(gè)相對較小的改動(dòng)。
與會(huì )者之一的Michael Bromley描述了一些新版本的一些破壞性改動(dòng),版本2.0取消了1.X中的以下概念 控制器(Controller) (Directive定義對象) $scope angular.module jqLite 關(guān)于jqLite的取消,Igor是這樣說(shuō)的: 在2.0中,我們不會(huì )在框架中使用任何DOM的封裝了,而是直接和原始的DOM打交道。自從我們啟動(dòng)項目以來(lái),DOM本身已經(jīng)得到了很大的改善,因此我們不再需要一個(gè)兼容層來(lái)幫助我們應付跨瀏覽器的問(wèn)題了。
所以我們可以直接操作原始的DOM。不過(guò)如果你想要使用jQuery,在你的組件中應用jQuery,那也完全沒(méi)問(wèn)題。
2.0版本的一個(gè)目標是改善Angular應用的開(kāi)發(fā)體驗,在第2天的主題演講上,AngularJS之父Mi?ko Hevery描述了如何通過(guò)使用AtScript來(lái)實(shí)現這一目標。 AtScript是TypeScript的一個(gè)超集,后者是由微軟創(chuàng )建的一門(mén)語(yǔ)言。
TypeScript為JavaScript加入了類(lèi)型,而AtScript進(jìn)一步擴展了這一思想,它為類(lèi)型加入了標注與動(dòng)態(tài)注入。 標注允許開(kāi)發(fā)者為某個(gè)類(lèi)加入“表達意圖”的能力。
因此,無(wú)需通過(guò)模板代碼的方式創(chuàng )建自定義directive,開(kāi)發(fā)者可以創(chuàng )建一個(gè)類(lèi),并告訴AngularJS“這是一個(gè)directive”。而動(dòng)態(tài)注入的能力允許框架在運行時(shí)檢查類(lèi)型信息。
不過(guò),AtScript的使用是可選的,開(kāi)發(fā)Angular 2.0應用并不一定要使用AtScript。Mi?ko說(shuō)道:由于現在的社區和類(lèi)庫都是使用純JavaScript開(kāi)發(fā)的,因此不強迫AtScript的使用是非常重要的目標。
而由于A(yíng)tScript可以直接編譯為EcmaScript 5(ES5),因此開(kāi)發(fā)者可以直接編寫(xiě)Angular 2.0。 在一次問(wèn)答講座上,開(kāi)發(fā)者們問(wèn)道Angular 1.3還將獲得多長(cháng)時(shí)間的支持。
Brad Green是這樣回答的: 比較合理的期望是,我們大約還需要1年半至2年時(shí)間以發(fā)布2.0的最終版本,這段時(shí)間內我們還會(huì )為1.3提供缺陷修復及安全補丁。 Angular團隊還暗示他們沒(méi)有為從Angular 1.X遷移到2.0提供遷移指南,但他們也不排除這種可能。
目前還沒(méi)有確切的發(fā)布日期,不過(guò)團隊基本達成了共識,會(huì )在2015年終最終完成版本2.0。 Brad Green還表示,Angular 2.0只會(huì )支持“最新的瀏覽器”,但沒(méi)有指出確切的版本。
他說(shuō)他們的團隊“在嘗試基于未來(lái)的標準進(jìn)行開(kāi)發(fā),而不是關(guān)注于現有的標準”。 開(kāi)發(fā)者們對于這次重大變更的感覺(jué)可謂是五味陳雜。
Hacker News的用戶(hù)zak_mc_kracken說(shuō)道: 雖然新版本依然叫做“Angular”,但它與之前的版本幾乎沒(méi)有多少相似之處,它完全是一個(gè)新的框架。一想到我對于A(yíng)ngular 1所掌握的全部知識都將成為過(guò)期的內容,就禁不住感到有點(diǎn)兒悲傷,但我也很期待對這個(gè)新的框架進(jìn)行一番研究。
如果它的革新性能夠達到Angular 1的一半,那我就會(huì )從中獲得很大的樂(lè )趣。 ng-europe大會(huì )的視頻曾被短暫地上傳到YouTube上,但很快就被刪除了。
實(shí)在是不能對jquery的ajax方法和基于頁(yè)面dom的各種取值、傳值方法滿(mǎn)意(雖然jquery已經(jīng)解救過(guò)我一次了),剛好手上這個(gè)項目用jquery的方法寫(xiě)了一半,決定試試很久以前自學(xué)的angularJS,把現在項目中jquery得部分用angularJS重寫(xiě)一遍。
寫(xiě)的時(shí)候碰到很多問(wèn)題,因為剛開(kāi)始用,寫(xiě)法思路還是和寫(xiě)jquery相似,導致與在一個(gè)生成select option下拉框時(shí)花費了2個(gè)小時(shí)才最終搞定。 普通html select option, 需要該字段名稱(chēng)name,選線(xiàn)id,選項label a b c jquery的取選項得做法 select_id = $("#data_select option:selected").val(); jqueryde的思路大概是上面這樣的,但是使用了angularJS后,著(zhù)實(shí)讓我迷惑了 angularJS在select下使用ng-option 標簽生成選項實(shí)例 生成的html dom如下: x1 x2 x3 x4 。
看見(jiàn)這個(gè)輸出,我發(fā)現沒(méi)法把id寫(xiě)在option > value上 這豈不是無(wú)法獲取選項信息了?這不行,萬(wàn)萬(wàn)不行 。結果開(kāi)始了長(cháng)時(shí)間的google,還是沒(méi)有解決辦法,就只能生成這種只有label的option,這咋辦呢?難道要用ng-repeat生成option? {{framework_y.name}} 我甚至開(kāi)始這么嘗試了,但是我的理智戰勝了偷懶的邪念,決定通過(guò)ng-click取model里的值看一看,結果console.log出來(lái)一看,發(fā)現自己一個(gè)多小時(shí)都傻x了。
看看console里的結果: Object {bubble_name: "ab", bubble_description: "b", x: Object, y: Object, series: Object} bubble_description: "b" bubble_name: "ab" series: Object x: Object y: Object date: "2014-03-11 09:03:22" description: "" disable_flag: "1" id: "9" name: "y3" position: "1" team_id: "8" type: "y" __proto__: Object __proto__: Object angularJS根據model的名稱(chēng)早就把每個(gè)相關(guān)的input的值自動(dòng)放在Object中了 根本不在需要什么value='id',只要把model的object從接口中取出來(lái),放在html頁(yè)面上,、選中的option的全部數據angularJS自動(dòng)就幫我取到controller中得點(diǎn)擊事件中去了。
run方法用于初始化全局的數據,僅對全局作用域起作用。
舉個(gè)栗子吧:
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
m1.run(['$rootScope',function($rootScope){
$rootScope.name = 'hello';
}]);
console.log( m1 );
</script>
聲明:本網(wǎng)站尊重并保護知識產(chǎn)權,根據《信息網(wǎng)絡(luò )傳播權保護條例》,如果我們轉載的作品侵犯了您的權利,請在一個(gè)月內通知我們,我們會(huì )及時(shí)刪除。
蜀ICP備2020033479號-4 Copyright ? 2016 學(xué)習?shū)B(niǎo). 頁(yè)面生成時(shí)間:3.108秒