angularJS1 ng-include相同html部分重用

阿新 • • 發佈：2019-02-10

angularJS1 ng-include指令相同html部分重用：
例如a.html中有一個共用的button，在b.html中也要用到，這時候，就用到了ng-include指令。
demo如下：

a.html

<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" 
 />
        <script type="text/javascript" src="js/angular.min-1.6.x.js"></script>
        <style>
            .container{width: 100%;height: auto;}
            .div_other{
                width: 100%;height: 300px;
                background-color: aliceblue;
                text-align: center 
;line-height: 300px;
            }
            .div_public{
                width: 90%;height: 100px;
                margin: 5%;background-color: aquamarine;
                border-radius: 5px;
            }
            .btn{
                width: 90%;height: 40px;
                margin: 5%;background-color 
: cornflowerblue;
                border-radius: 5px;
            }
        </style>
    </head>

    <body ng-app='myapp1' >

        <div class="container">

            <div class="div_other">一些其他的內容</div>

            <!--
                這一部分共用的部分放入一個單獨的html檔案中

                <div class="div_public">
                <p>假如：這是共用的html部分</p>
                <input type="button" class="btn" value="下一步"/>
            </div>

            -->

            <div ng-include="'btnpublic.html'"></div>

        </div>

    </body>

   <script type="text/javascript"  >
     var app = angular.module('myapp1', []);

   </script>
</html>

共用的html如下：
btnpublic.html
（這個不用在a.html中引入，直接在a.html中用

）
注意：雙引號中的單引號不能少。

<div class="div_public">
    <p>假如：這是共用的html部分</p>
    <input type="button" class="btn" value="下一步"/>
</div>

angularJS1 ng-include相同html部分重用

angularJS1 ng-include指令相同html部分重用：例如a.html中有一個共用的button，在b.html中也要用到，這時候，就用到了ng-include指令。 demo如下

angularjs1- ng-include

.text $scope yellow htm mod ctype ext tro div <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con

Angular(ng-include指令-嵌套)

div scope ctrl erl utf-8 外部 head .... -c html部分 .........................................................................................

Html部分

min search 完成 mount margin des ext 半徑完全 Html部分 E[attr]-------------------存在attr屬性即可 E[attr=val]--------------- 屬性值完全等於val E[attr*=val]

前端知識之HTML部分

前端知識之HTML部分1、web服務的本質瀏覽器發請求-->HTTP協議-->服務端接收請求-->服務端返回響應-->服務端把HTML文件內容發給瀏覽器-->瀏覽器渲染頁面之前學過用python方式實現C/S建立socket通信，瀏覽器與服務端實現通信是B/S架構服務端代碼

HTML部分生標簽

abcde abcdefg 下劃線 abcd 文本實現 bsp pos blog <kbd>標簽表示鍵盤輸入文本，鍵入<kbd>quit</kbd>來退出程序，鍵入<kbd>menu</kbd>來返回主菜單 &l

前端HTML部分簡單整理

baidu 長度有用中國 init 樣式表搜索關閉而是 web標準:web準備介紹 w3c：萬維網聯盟組織，用來制定web標準的機構（組織） web標準：制作網頁遵循的規範 web準備規範的分類：結構標準、表現標準、行為標準。結構：htm

Web前端-Html部分筆記（五）

HTML 表單一、表單概述 1、作用：用於為使用者建立 HTML 表單,用於向伺服器傳輸資料。表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和

Web前端-Html部分筆記（四）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。表格標籤

Web前端-Html部分筆記（三）

下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。列表標籤

Web前端-Html部分筆記（二）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。一、常用基

Web前端-Html部分筆記（一）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。由於是筆記

【PHP】從2個字串找到相同的部分，展示最長的字串

思路：最容易想到的方法，是把第一個字串按順序擷取，與第二個字串對比，存在則寫入陣列，最後再從陣列找到重複之中最長的那個輸出字串1：/a/b/c/?.oietr?e/f/g/zwty.cn 字串2：/a/b/c/awp.neeg/e/f/g/zxtn.cc $str1 = '/a/b/c/?

scrapy框架--管道類過濾專案相同ID部分

複製過濾器用於查詢重複專案並刪除已處理的專案的過濾器。假設我們的專案具有唯一的ID，但是我們的蜘蛛會返回具有相同id的多個專案： from scrapy.exceptions import DropItem class DuplicatesPipeline(object): d

AngularJs 的ng-include指令的使用

AngularJs通過指令ng-include來將頁面中共用的模組分離出來，這個功能和mvc裡面的分部頁的作用一樣的。先看檔案的結構：父頁面： <!DOCTYPE html> <html> <head> <meta charset="

關於Angular js的檔案引用和模板問題（ng-view,ng-include）

1.ng-view和ng-include的區別首先先說一下這兩個指令的區別，ng-view這個方法通過使用路由控制，可以方便的實現頁面組合。但這個方法也有一個重大缺點，就是一個html檔案中，只能有一個ng-view。雖然有變通之法。他是可以被ctl控制的。 n

html 部分標籤

本文主要講述以下內容： <iframe> <a>及偽協議 <form> <input> <table> 及 <colgroup> 可替換元素

angular路由與ng-options/ng-include指令

ng-options下拉列表指令 ng-options="fruit.name for fruit in main.fruitArr" fruit 是通過遍歷 main.fruitArr 取出的每一個物件 fruit.name 是取出 fruit物件中的 name屬性值

JSP複習----html部分

JSP複習—-html部分表單元素常用的表單元素有form，input，select，textarea標籤。今天主要回顧一下input標籤的相關屬性設定。 type屬性描述

前端知識點彙總（html部分）

cookie是客戶端瀏覽器快取技術，在傳送http請求的時候將對應的cookie一起傳送給伺服器；localstorage和sessionstorage也是客戶端快取技術，同屬於web storage，可以儲存的內容都比cookie大很多，不同的是localstorage不會隨著每個http請求都發送到ser

angularJS1 ng-include相同html部分重用

相關推薦