angular元件開發

2022-08-05 16:21:11 字數 887 閱讀 5318

專案中經常會有一些公共元件,比如header,如果每個頁面都寫一遍的話顯得很冗餘,而且不利於維護,這時候我們就會考慮將這些公共部分抽取出來,做成一個單獨的元件。

然而angular不是很熟悉啊~怎麼啵~

折騰了一下,才發現angular的元件開發主要依賴自定義指令(directive )來實現。

主要使用到directive的幾個屬性,如下:

restrict: 使用駝峰法來命名,用來限制指令通過特定的方式來呼叫,預設值為 ea

scope: 指定作用域

templateurl: 用來指定模板檔案的url,如templateurl: 'header'

template:設定模板,如template:'這是一條指令'

controller:控制器

比如如果建立一個header元件,我們先新建一個資料夾header.html

返回這裡是右邊的文字

接著新建directive.js

angular.module('myheader', ["zz.rule"])

.directive('myheader', function() ;}};

})

好了,到這裡一個元件就穿件好了,那麼問題來了,怎麼使用呢?

其實就跟平成引入外掛一樣一樣的

建立index.html

angular.module('mymodel', ["myheader"])

超級簡單有沒有,趕緊get起來

Angular

資料繫結肯定是 angularjs 最佳功能之一。你可以宣告繫結的模型到html元素。當模型發生變化時,檢視會自動更新,反之亦然。這可以減少...

Angular changeDetction

changedection 檢測程式內部狀態,然後反映到ui上。 引起狀態變化,引發檢查的驅動源 events,xhr,timers onp...

Angular(三)

資料繫結 angularjs應用程式中的資料繫結是模型和檢視元件之間的資料的自動同步。 angularjs實現資料繫結的方式可以將模型視為應用程式中的單一 。 檢視是模型在任何時候的投影。 當模型更改時,檢視反映更改,反之亦然。 經典模板系統中的資料繫結 大多數模板系統僅在一個方向繫結資料 它們將模...