angular元件開發

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

專案中經常會有一些公共元件,比如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元件封裝

前言 在專案中我們常看到乙個頁面裡的 在很多頁面裡面用到,我們會把它封裝成乙個元件供多個頁面引用我們在頁面看到類似於下圖的標籤,就是引用的封裝好的元件 changepage event editbutton btnedit addopen addopen event,addmodal editdat...

Angular元件 投影

執行時動態改變元件模版的內容。沒路由那麼複雜,只是一段html,沒有業務邏輯。ngcontent指令將父元件模版上的任意片段投影到子元件上。1 子元件中使用指令來標記投影點 div class h2 我是子元件 h2 div 這個div定義在子元件中 div ng content ng conten...

angular 元件互動

angular是以元件化的形式來實現,因而元件互動是極為基礎且重要的,下面對其元件之間的互動方式一一介紹。1.通過輸入型繫結把資料從父元件傳到子元件。3.父元件監聽子元件的事件 4.父元件與子元件通過本地變數互動 注 用本地變數可使用在父元件模板裡面來讀取子元件的屬性或者使用其方法 5.父元件呼叫 ...