亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

[譯] 如何使用 TypeScript 編寫自定義 AngularJS 指令？

CloudwiseAPM / 3356人閱讀

摘要：在這篇文章中，我將告訴你如何用編寫自定義指令。中的自定義指令讓我們來創(chuàng)建一個只為任何的塊，小部件或者人名在右邊添加標題，子標題和文本的指令。另外，設(shè)置了指令的使用級別給元素和屬性，分別使用和表示。

原文鏈接 : How to write custom AngularJS Directive using TypeScript?
原文作者 : Siddharth Pandey
譯者 : 李林璞（web前端領(lǐng)域）
譯者注：翻譯如有疏漏，歡迎指出！感謝！轉(zhuǎn)載請保留此頭部。

AngularJS 框架有很多強大的特性，其中指令(Directives)是廣為人知的。在這篇文章中，我將告訴你如何用 TypeScript 編寫自定義 AngularJS 指令。首先，我將講一下關(guān)于指令的基本知識，但如果你想直接看 TypeScript 代碼的，你可以跳過基本。

什么是指令？ 
在較高層面上，指令是一個 DOM 元素的標記（像一個屬性，元素名稱，注釋或者 CSS 類），它告訴 Angular 的 HTML 編譯器（$compiler）去給 DOM 元素連接一個特殊的行為（例如通過事件監(jiān)聽），或者甚至是改變這個 DOM 元素和其子元素。


Angular 本身有一些內(nèi)建的指令，像 ngbind,ngModel和 ngClass。就像你創(chuàng)建控制器（controllers）和服務(wù)（services）那樣，你可以創(chuàng)建自己的指令給 Angular 使用。當(dāng) Angular 啟動你的應(yīng)用時，HTML 編譯器就會對 DOM 元素進行遍歷找到符合的指令。


-AngualrJS 文檔
例子

看看ng-controller和ng-bind這些 AngularJS 框架自帶指令的使用方法：


  Hello
標準化過程

上面的代碼片段，有多種方式去標記一個指令。AngularJS 的 HTML 編譯器負責(zé)決定哪個元素匹配哪個指令，一般通過區(qū)分大小寫的 camelCase（駝峰式） 命名方法（如 ngModel）去使用指令。但是，因為 HTML 是不區(qū)分大小寫的，一般我們使用小寫形式的 短橫線-分隔 屬性寫在 DOM 元素上（如ng-model）。

標準化過程如下：

前面的元素或?qū)傩允褂脦?b>x-或data-的形式。

將:,-或_這些分隔符轉(zhuǎn)化為camelCase（駝峰式）。

最佳實踐

最好使用 短橫線-分隔 格式（如 ng-bind 對應(yīng) ngBind）。如果你想使用一個 HTML 驗證工具，可以使用 帶data前綴 的版本進行替代（如 data-ng-bind 對應(yīng) ngBind）。上面展示的其他形式因遺留原因仍然可以使用當(dāng)還是建議避免使用它們。

指令的類型

AngularJS 的 HTML 編譯器如$compiler可以基于元素名，屬性，類名，還有注釋去匹配指令。下面的例子展示了一個名為myDir的指令在一個 HTML 模板里是怎么用多種方式去引用的：
最佳實踐

最好通過標簽名或者屬性而不是注釋和類名去使用指令。這樣做通常會更容易去決定哪個指令匹配給定的元素。

注釋指令通常在 DOM API 限制跨越多個元素創(chuàng)建指令的地方使用（如table元素）。AngularJS 1.2 采用了ng-repeat-start和ng-repeat-end作為解決這個問題更好的方法，鼓勵開發(fā)者盡量使用這個方法代替注釋指令。

TypeScript 中的自定義指令

讓我們來創(chuàng)建一個只為任何的塊，小部件或者人名在右邊添加標題，子標題和文本的指令。這是一個很好的例子，因為它可以在很多地方重用而且可以作為一個有隔離作用域的指令在每個動態(tài)加載的塊中作為信息展示。

來看看 HTML，Typescript 的代碼在其下方：


  
{{title}}

  ({{subtitle}})
  

  {{rightText}}
  





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 的特點，創(chuàng)建一個定義了可在指令內(nèi)使用的作用域成員的接口（interface）。同樣地我們想創(chuàng)建一個指令的實例，我們就定義一個實現(xiàn)了IDirective的類（class）。

要想知道類型定義，看看這個令人吃驚的倉庫，它收集了幾乎所有流行的 JavaScript 庫。這些類型定義可以讓我們得到任何編譯時錯誤和 IDE 的智能支持。我使用 Visual Studio 和 Visual Code，它們都對 TypeScript 有很好的支持。

這個指令不需要任何內(nèi)建的 angular 服務(wù)或任何依賴，所以 $inject 這個靜態(tài)成員只是一個空數(shù)組。如果依賴被列出來的話，框架就會根據(jù)這個變量的內(nèi)容去尋找然后依賴注入。

構(gòu)造器（constructor）不用做什么事情但我們還是需要一個靜態(tài)的 instance 方法去創(chuàng)建一個指令的實例?？蚣軙诙x一個使用了模塊指令 API 的時候期望一個指令的實例。

這個類的 scope 在這里非常重要，因為這個指令使用隔離的作用域，即它自身的成員變量可以在這個指令的模板當(dāng)中使用但并不繼承外層或其父級作用域的聲明。為了可讀性和可維護性，我們使用了 templateUrl 去指定模板的源碼。另外，restrict 設(shè)置了指令的使用級別給元素和屬性，分別使用 E 和 A 表示。

restrict 選項一般設(shè)置為：

"A"：只匹配屬性名

"E"：只匹配元素名

"C"：只匹配類名

"M"：只匹配注釋

這些限制只要需要都可以結(jié)合："AEC" 匹配屬性或元素或類名。

現(xiàn)在可以像下面的代碼片段那樣使用這個指令：

這個指令可以在給到一個硬編碼或者動態(tài)的 title，subtitle 或者 right-text作用域成員的情況下作為元素或者屬性使用。注意到后者和任何指令一樣都已經(jīng)被編譯器標準化。上面的代碼片段在一個模板里使用，該模板鏈接到一個含有 title，description 和 refreshedDateTimeInfo 變量的控制器，然后展示給用戶。給定一些標記和設(shè)計，就會像下面這樣：

如果你想學(xué)到更多有關(guān)如何整合 AngularJS 和 TypeScript 的知識，可以看看我的 AngularJS 文章。如果你想學(xué)習(xí)其他一些特別的東西可以聯(lián)系我，我會嘗試寫相關(guān)文章的。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86448.html

相關(guān)文章

  • [譯] 如何使用 TypeScript 編寫 AngularJS 的 Controller？

    摘要：在這篇文章里，我將介紹如何使用去編寫的。一個新的子將被創(chuàng)建并作為變量注入到的構(gòu)造函數(shù)當(dāng)中。當(dāng)使用一個構(gòu)造函數(shù)就可以很好地解決問題，因為函數(shù)提升起到了很重要的作用。自定義接口類型接著就可以在構(gòu)造器使用參數(shù)獲得強類型和智能支持了。 原文鏈接 : How to write AngularJS controller using TypeScript?原文作者 : Siddharth Pande...

    alphahans 評論0 收藏0

  • 【譯】《精通使用AngularJS開發(fā)Web App》（二） --- 框架概覽，雙向數(shù)據(jù)綁定，MVC

    摘要：本書的這一部分將為隨后的章節(jié)打下基礎(chǔ)，會涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會使用未經(jīng)壓縮的，開發(fā)友好的版本，在的上。作用域也可以針對特定的視圖來擴展數(shù)據(jù)和特定的功能。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（一） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（三） 原版書名：Mastering Web Application D...

    geekidentity 評論0 收藏0

  • Angular 4 簡單入門筆記

    摘要：首先，我們需要在入口頁面的中配置根路徑然后創(chuàng)建一個路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉(zhuǎn)，定義該路由激活時的樣式類。 剛實習(xí)的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

    whlong 評論0 收藏0

  • [譯]學(xué)習(xí)如何去學(xué)習(xí) JavaScript - 5 個你應(yīng)該如何花在學(xué)習(xí) JS 上時間的建議

    摘要：擁抱異步編程縱觀發(fā)展史也可以說成開發(fā)的發(fā)展史，你會發(fā)現(xiàn)異步徹底改變了這場游戲?？梢赃@么說，異步編程已成為開發(fā)的根基。這也是你應(yīng)盡早在上投入大量時間的一處核心知識點，這其中包含和等重要概念。這也是最突出的一項貢獻。 原文地址：Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend ...

    wanglu1209 評論0 收藏0

  • 【譯】《精通使用AngularJS開發(fā)Web App》（四）--- 深入視圖，模板系統(tǒng)，模塊和依賴注

    摘要：模塊和依賴注入細心的讀者可能已經(jīng)發(fā)現(xiàn)了，到目前為止所用到的例子都是使用的全局的構(gòu)造函數(shù)來定義控制器的。這非常的簡單，只需使用如下參數(shù)來調(diào)用即可控制器的名字字符串類型控制器的構(gòu)造函數(shù)全局定義的控制器構(gòu)造函數(shù)只適用于快速示例和原型開發(fā)。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（三） 下一篇： 書名：Mastering Web Application Develop...

    zr_hebo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<