angular組件開發

EddieChan 發布于2019-08-20 15:44 / 3427人閱讀

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

項目中經常會有一些公共組件，比如header，如果每個頁面都寫一遍的話顯得很冗余，而且不利于維護，這時候我們就會考慮將這些公共部分抽取出來，做成一個多帶帶的組件。

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

折騰了一下，才發現angular的組件開發主要依賴自定義指令（directive ）來實現。

主要使用到directive的幾個屬性，如下：

restrict：使用駝峰法來命名，用來限制指令通過特定的方式來調用，默認值為 EA

E 作為元素名使用，如

A 作為屬性使用,如

C 作為類名使用,如

M 作為注釋使用,如

scope: 指定作用域

false 默認值，共享父級作用域

true 繼承父級作用域并創建指令自己的作用域

{} 創建指令自己的獨立作用域，與父級毫無關系

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

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

controller：控制器

比如如果創建一個header組件，我們先新建一個文件夾header.html


  這里是標題
  返回
  這里是右邊的文字

接著新建directive.js

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

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

其實就跟平成引入插件一樣一樣的

創建index.html



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

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

GPU云服務器云服務器組件開發前端組件開發 vue組件開發大數據開發組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82451.html

前端知識點總結——Angular

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

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

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

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

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

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

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

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

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

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

摘要：以下是關于中一些模塊的概要以及它們與這篇文章的關聯性這個模塊實現了我們在這篇文章中討論的關于的幾個回調函數，同時它還會初始化一個策略類，這個類會作為連接和的橋梁。現在，Angular Elements 這個項目已經在社區引起一定程度的討論。這是顯而易見的，因為 Angular Elements 提供了很多開箱即用的、十分強大的功能：通過使用原生的 HTML 語法來使用 Angul...

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