angular組件開發(fā)

EddieChan 發(fā)布于2019-08-20 15:44 / 3435人閱讀

摘要：項(xiàng)目中經(jīng)常會(huì)有一些公共組件，比如，如果每個(gè)頁面都寫一遍的話顯得很冗余，而且不利于維護(hù)，這時(shí)候我們就會(huì)考慮將這些公共部分抽取出來，做成一個(gè)多帶帶的組件。然而不是很熟悉啊怎么啵折騰了一下，才發(fā)現(xiàn)的組件開發(fā)主要依賴自定義指令來實(shí)現(xiàn)。

項(xiàng)目中經(jīng)常會(huì)有一些公共組件，比如header，如果每個(gè)頁面都寫一遍的話顯得很冗余，而且不利于維護(hù)，這時(shí)候我們就會(huì)考慮將這些公共部分抽取出來，做成一個(gè)多帶帶的組件。

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

折騰了一下，才發(fā)現(xiàn)angular的組件開發(fā)主要依賴自定義指令（directive ）來實(shí)現(xiàn)。

主要使用到directive的幾個(gè)屬性，如下：

restrict：使用駝峰法來命名，用來限制指令通過特定的方式來調(diào)用，默認(rèn)值為 EA

E 作為元素名使用，如

A 作為屬性使用,如

C 作為類名使用,如

M 作為注釋使用,如

scope: 指定作用域

false 默認(rèn)值，共享父級作用域

true 繼承父級作用域并創(chuàng)建指令自己的作用域

{} 創(chuàng)建指令自己的獨(dú)立作用域，與父級毫無關(guān)系

templateUrl：用來指定模板文件的url，如templateUrl: "header"

template：設(shè)置模板，如template:"這是一條指令"

controller：控制器

比如如果創(chuàng)建一個(gè)header組件，我們先新建一個(gè)文件夾header.html


  這里是標(biāo)題
  返回
  這里是右邊的文字

接著新建directive.js

angular.module("myHeader", ["zz.rule"])
  .directive("myHeader", function() {
    return {
      restrict: "A",
      templateUrl: "header",
      controller: function($scope, $element, $attrs) {
        // 返回上一頁
        $scope.goBack = function(event) {};
      }
    };
  })

好了，到這里一個(gè)組件就穿件好了，那么問題來了，怎么使用呢？

其實(shí)就跟平成引入插件一樣一樣的

創(chuàng)建index.html



angular.module("mymodel", ["myHeader"])

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

云服務(wù)器 GPU云服務(wù)器組件開發(fā) 前端組件開發(fā) vue組件開發(fā) 大數(shù)據(jù)開發(fā)組件

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

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

相關(guān)文章

前端知識點(diǎn)總結(jié)——Angular

摘要：前端知識點(diǎn)總結(jié)一概述基于命令行的開發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。在開發(fā)時(shí)，八大組成部分模塊組件模板自帶的標(biāo)簽指令綁定相關(guān)的的語法元數(shù)據(jù)告訴如何處理一個(gè)類。前端知識點(diǎn)總結(jié)——Angular 一、Angular概述基于命令行的開發(fā)方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 評論0 收藏0
Angular 2.x 從0到1 (一）史上最簡單的Angular2教程

摘要：官方支持微軟出品，是的超集，是的強(qiáng)類型版本作為首選編程語言，使得開發(fā)腳本語言的一些問題可以更早更方便的找到。第一個(gè)組件那么我們來為我們的增加一個(gè)吧，在命令行窗口輸入。引導(dǎo)過程通過在中引導(dǎo)來啟動(dòng)應(yīng)用。它們的核心就是。第一節(jié)：Angular 2.0 從0到1 （一）第二節(jié)：Angular 2.0 從0到1 （二）第三節(jié)：Angular 2.0 從0到1 （三）第一章：認(rèn)識Angular...

tuniutech 2019-08-20 13:58 評論0 收藏0
Angular 4 簡單入門筆記

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

whlong 2019-08-20 17:44 評論0 收藏0
前端每周清單半年盤點(diǎn)之 Angular 篇

摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
那些年初識Angular(1)

摘要：它包含多個(gè)屬性，這些屬性值叫做元數(shù)據(jù)。會(huì)根據(jù)元數(shù)據(jù)渲染組件，并執(zhí)行組件邏輯。元數(shù)據(jù)會(huì)告訴圖和將這個(gè)類處理成一個(gè)組件。元數(shù)據(jù)這段代碼表示這個(gè)組件可以通過這個(gè)標(biāo)簽來調(diào)用。那些年初識Angular 由于工作需要初識了Angular，由于個(gè)人在學(xué)習(xí)一門新語言的時(shí)候喜歡買一本相關(guān)的書籍自己鉆研，還記得自己的第一本Angular書籍是關(guān)于Angular2的學(xué)習(xí)，自此正式踏入Angular的學(xué)習(xí)。...

Flink_China 2019-08-02 11:36 評論0 收藏0
Angular Elements 及其運(yùn)作原理

摘要：以下是關(guān)于中一些模塊的概要以及它們與這篇文章的關(guān)聯(lián)性這個(gè)模塊實(shí)現(xiàn)了我們在這篇文章中討論的關(guān)于的幾個(gè)回調(diào)函數(shù)，同時(shí)它還會(huì)初始化一個(gè)策略類，這個(gè)類會(huì)作為連接和的橋梁。現(xiàn)在，Angular Elements 這個(gè)項(xiàng)目已經(jīng)在社區(qū)引起一定程度的討論。這是顯而易見的，因?yàn)?Angular Elements 提供了很多開箱即用的、十分強(qiáng)大的功能：通過使用原生的 HTML 語法來使用 Angul...

qingshanli1988 2019-08-22 18:45 評論0 收藏0