摘要:在這篇文章中,我將告訴你如何用編寫(xiě)自定義指令。中的自定義指令讓我們來(lái)創(chuàng)建一個(gè)只為任何的塊,小部件或者人名在右邊添加標(biāo)題,子標(biāo)題和文本的指令。另外,設(shè)置了指令的使用級(jí)別給元素和屬性,分別使用和表示。
原文鏈接 : How to write custom AngularJS Directive using TypeScript?
原文作者 : Siddharth Pandey
譯者 : 李林璞(web前端領(lǐng)域)
譯者注:翻譯如有疏漏,歡迎指出!感謝!轉(zhuǎn)載請(qǐng)保留此頭部。
AngularJS 框架有很多強(qiáng)大的特性,其中指令(Directives)是廣為人知的。在這篇文章中,我將告訴你如何用 TypeScript 編寫(xiě)自定義 AngularJS 指令。首先,我將講一下關(guān)于指令的基本知識(shí),但如果你想直接看 TypeScript 代碼的,你可以跳過(guò)基本。
什么是指令?例子在較高層面上,指令是一個(gè) DOM 元素的標(biāo)記(像一個(gè)屬性,元素名稱(chēng),注釋或者 CSS 類(lèi)),它告訴 Angular 的 HTML 編譯器($compiler)去給 DOM 元素連接一個(gè)特殊的行為(例如通過(guò)事件監(jiān)聽(tīng)),或者甚至是改變這個(gè) DOM 元素和其子元素。
Angular 本身有一些內(nèi)建的指令,像 ngbind,ngModel和 ngClass。就像你創(chuàng)建控制器(controllers)和服務(wù)(services)那樣,你可以創(chuàng)建自己的指令給 Angular 使用。當(dāng) Angular 啟動(dòng)你的應(yīng)用時(shí),HTML 編譯器就會(huì)對(duì) DOM 元素進(jìn)行遍歷找到符合的指令。
-AngualrJS 文檔
看看ng-controller和ng-bind這些 AngularJS 框架自帶指令的使用方法:
標(biāo)準(zhǔn)化過(guò)程Hello
上面的代碼片段,有多種方式去標(biāo)記一個(gè)指令。AngularJS 的 HTML 編譯器負(fù)責(zé)決定哪個(gè)元素匹配哪個(gè)指令,一般通過(guò)區(qū)分大小寫(xiě)的 camelCase(駝峰式) 命名方法(如 ngModel)去使用指令。但是,因?yàn)?HTML 是不區(qū)分大小寫(xiě)的,一般我們使用小寫(xiě)形式的 短橫線-分隔 屬性寫(xiě)在 DOM 元素上(如ng-model)。
標(biāo)準(zhǔn)化過(guò)程如下:
前面的元素或?qū)傩允褂脦?b>x-或data-的形式。
將:,-或_這些分隔符轉(zhuǎn)化為camelCase(駝峰式)。
最佳實(shí)踐最好使用 短橫線-分隔 格式(如 ng-bind 對(duì)應(yīng) ngBind)。如果你想使用一個(gè) HTML 驗(yàn)證工具,可以使用 帶data前綴 的版本進(jìn)行替代(如 data-ng-bind 對(duì)應(yīng) ngBind)。上面展示的其他形式因遺留原因仍然可以使用當(dāng)還是建議避免使用它們。
指令的類(lèi)型AngularJS 的 HTML 編譯器如$compiler可以基于元素名,屬性,類(lèi)名,還有注釋去匹配指令。下面的例子展示了一個(gè)名為myDir的指令在一個(gè) HTML 模板里是怎么用多種方式去引用的:
最佳實(shí)踐
最好通過(guò)標(biāo)簽名或者屬性而不是注釋和類(lèi)名去使用指令。這樣做通常會(huì)更容易去決定哪個(gè)指令匹配給定的元素。
注釋指令通常在 DOM API 限制跨越多個(gè)元素創(chuàng)建指令的地方使用(如table元素)。AngularJS 1.2 采用了ng-repeat-start和ng-repeat-end作為解決這個(gè)問(wèn)題更好的方法,鼓勵(lì)開(kāi)發(fā)者盡量使用這個(gè)方法代替注釋指令。
TypeScript 中的自定義指令讓我們來(lái)創(chuàng)建一個(gè)只為任何的塊,小部件或者人名在右邊添加標(biāo)題,子標(biāo)題和文本的指令。這是一個(gè)很好的例子,因?yàn)樗梢栽诤芏嗟胤街赜枚铱梢宰鳛橐粋€(gè)有隔離作用域的指令在每個(gè)動(dòng)態(tài)加載的塊中作為信息展示。
來(lái)看看 HTML,Typescript 的代碼在其下方:
interface IHtWidgetHeaderScope { title: string; subtitle: string; rightText: string; allowCollapse: string; } //Usage: // // Creates: //class HtWidgetHeader implements ng.IDirective { static $inject: Array= [""]; constructor() { } static instance(): ng.IDirective { return new HtWidgetHeader(); } scope: IHtWidgetHeaderScope = { "title": "@", "subtitle": "@", "rightText": "@" }; templateUrl: string = "app/widgets/widget-header.html"; restrict: string = "EA"; } angular.module("app").directive("htWidgetHeader", HtWidgetHeader.instance); 利用 TypeScript 的特點(diǎn),創(chuàng)建一個(gè)定義了可在指令內(nèi)使用的作用域成員的接口(interface)。同樣地我們想創(chuàng)建一個(gè)指令的實(shí)例,我們就定義一個(gè)實(shí)現(xiàn)了IDirective的類(lèi)(class)。
要想知道類(lèi)型定義,看看這個(gè)令人吃驚的倉(cāng)庫(kù),它收集了幾乎所有流行的 JavaScript 庫(kù)。這些類(lèi)型定義可以讓我們得到任何編譯時(shí)錯(cuò)誤和 IDE 的智能支持。我使用 Visual Studio 和 Visual Code,它們都對(duì) TypeScript 有很好的支持。
這個(gè)指令不需要任何內(nèi)建的 angular 服務(wù)或任何依賴,所以 $inject 這個(gè)靜態(tài)成員只是一個(gè)空數(shù)組。如果依賴被列出來(lái)的話,框架就會(huì)根據(jù)這個(gè)變量的內(nèi)容去尋找然后依賴注入。
構(gòu)造器(constructor)不用做什么事情但我們還是需要一個(gè)靜態(tài)的 instance 方法去創(chuàng)建一個(gè)指令的實(shí)例。框架會(huì)在定義一個(gè)使用了模塊指令 API 的時(shí)候期望一個(gè)指令的實(shí)例。
這個(gè)類(lèi)的 scope 在這里非常重要,因?yàn)檫@個(gè)指令使用隔離的作用域,即它自身的成員變量可以在這個(gè)指令的模板當(dāng)中使用但并不繼承外層或其父級(jí)作用域的聲明。為了可讀性和可維護(hù)性,我們使用了 templateUrl 去指定模板的源碼。另外,restrict 設(shè)置了指令的使用級(jí)別給元素和屬性,分別使用 E 和 A 表示。
restrict 選項(xiàng)一般設(shè)置為:
"A":只匹配屬性名
"E":只匹配元素名
"C":只匹配類(lèi)名
"M":只匹配注釋
這些限制只要需要都可以結(jié)合:"AEC" 匹配屬性或元素或類(lèi)名。
現(xiàn)在可以像下面的代碼片段那樣使用這個(gè)指令:
這個(gè)指令可以在給到一個(gè)硬編碼或者動(dòng)態(tài)的 title,subtitle 或者 right-text作用域成員的情況下作為元素或者屬性使用。注意到后者和任何指令一樣都已經(jīng)被編譯器標(biāo)準(zhǔn)化。上面的代碼片段在一個(gè)模板里使用,該模板鏈接到一個(gè)含有 title,description 和 refreshedDateTimeInfo 變量的控制器,然后展示給用戶。給定一些標(biāo)記和設(shè)計(jì),就會(huì)像下面這樣:
如果你想學(xué)到更多有關(guān)如何整合 AngularJS 和 TypeScript 的知識(shí),可以看看我的 AngularJS 文章。如果你想學(xué)習(xí)其他一些特別的東西可以聯(lián)系我,我會(huì)嘗試寫(xiě)相關(guān)文章的。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/86448.html
摘要:在這篇文章里,我將介紹如何使用去編寫(xiě)的。一個(gè)新的子將被創(chuàng)建并作為變量注入到的構(gòu)造函數(shù)當(dāng)中。當(dāng)使用一個(gè)構(gòu)造函數(shù)就可以很好地解決問(wèn)題,因?yàn)楹瘮?shù)提升起到了很重要的作用。自定義接口類(lèi)型接著就可以在構(gòu)造器使用參數(shù)獲得強(qiáng)類(lèi)型和智能支持了。 原文鏈接 : How to write AngularJS controller using TypeScript?原文作者 : Siddharth Pande...
摘要:本書(shū)的這一部分將為隨后的章節(jié)打下基礎(chǔ),會(huì)涵蓋模板,模塊化,和依賴注入。本書(shū)的小例子中我們會(huì)使用未經(jīng)壓縮的,開(kāi)發(fā)友好的版本,在的上。作用域也可以針對(duì)特定的視圖來(lái)擴(kuò)展數(shù)據(jù)和特定的功能。 上一篇:【譯】《精通使用AngularJS開(kāi)發(fā)Web App》(一) 下一篇:【譯】《精通使用AngularJS開(kāi)發(fā)Web App》(三) 原版書(shū)名:Mastering Web Application D...
摘要:首先,我們需要在入口頁(yè)面的中配置根路徑然后創(chuàng)建一個(gè)路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁(yè)面中需要一個(gè)容器去承載上面代碼中的定義了用戶點(diǎn)擊后的路由跳轉(zhuǎn),定義該路由激活時(shí)的樣式類(lèi)。 剛實(shí)習(xí)的時(shí)候用過(guò)AngularJS,那時(shí)候真的是連原生JavaScript都不會(huì)寫(xiě),依樣畫(huà)葫蘆做了幾個(gè)管理后臺(tái)。然后突然換項(xiàng)目了,AngularJS就不寫(xiě)了,感覺(jué)前前后后接觸了一年多的Angula...
摘要:擁抱異步編程縱觀發(fā)展史也可以說(shuō)成開(kāi)發(fā)的發(fā)展史,你會(huì)發(fā)現(xiàn)異步徹底改變了這場(chǎng)游戲??梢赃@么說(shuō),異步編程已成為開(kāi)發(fā)的根基。這也是你應(yīng)盡早在上投入大量時(shí)間的一處核心知識(shí)點(diǎn),這其中包含和等重要概念。這也是最突出的一項(xiàng)貢獻(xiàn)。 原文地址:Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend ...
摘要:模塊和依賴注入細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)了,到目前為止所用到的例子都是使用的全局的構(gòu)造函數(shù)來(lái)定義控制器的。這非常的簡(jiǎn)單,只需使用如下參數(shù)來(lái)調(diào)用即可控制器的名字字符串類(lèi)型控制器的構(gòu)造函數(shù)全局定義的控制器構(gòu)造函數(shù)只適用于快速示例和原型開(kāi)發(fā)。 上一篇:【譯】《精通使用AngularJS開(kāi)發(fā)Web App》(三) 下一篇: 書(shū)名:Mastering Web Application Develop...
閱讀 654·2021-11-15 11:39
閱讀 2890·2021-10-08 10:04
閱讀 3252·2019-08-30 10:57
閱讀 3014·2019-08-26 13:25
閱讀 1895·2019-08-26 12:14
閱讀 2626·2019-08-23 15:27
閱讀 2987·2019-08-23 15:18
閱讀 1766·2019-08-23 14:26