初學者---AngularJS1 基礎詳解

時間  2019-11-13
標籤 初學者 angularjs1 angularjs 基礎 詳解 欄目 AngularJS 简体版
原文   原文鏈接
AngularJS 簡介
特色：
AngularJS 是一個 JavaScript 框架。它可經過 <script> 標籤添加到 HTML 頁面。
AngularJS 經過 指令 擴展了 HTML，且經過 表達式 綁定數據到 HTML。
在使用前須要導入文件：
做用 ：
  • AngularJS 把應用程序數據綁定到 HTML 元素。
  • AngularJS 能夠克隆和重複 HTML 元素。
  • AngularJS 能夠隱藏和顯示 HTML 元素。
  • AngularJS 能夠在 HTML 元素"背後"添加代碼。
  • AngularJS 支持輸入驗證。
01-1-【AngularJS表達式】
 一、AngularJS使用 {{}}綁定表達式。用於將表達式的內容輸出到頁面中。
表達式中能夠是文字、運算符、變量等，也能夠在表達式中 進行運算輸出結果。 
eg: <p>{{ 5+5+"Angular" }}</p>

若是Angular.js文件放在頁面下方，在頁面刷新的瞬間會看到{{}}表達式的原樣，因此能夠 使用ng-bind指令替表明達式。javascript

eg: 上式可改寫爲：<p ng-bind="5+5+'Angular'"></p>
01-2-【AngularJS的經常使用指令】
 AngularJS 指令是擴展的 HTML 屬性， 帶有前綴 ng-。
 一、 ng-app: 聲明AngularJS所管轄的區域。 通常寫在body或者html標籤上，原則上一個頁面只能有一個。 
eg: <body ng-app=""></body>
二、 ng-model: 指令把元素值（好比輸入域的值）綁定到應用程序的變量中。 
eg: <input type="text" ng-model="name" />
三、 ng-bind: 把應用程序變量中的值，輸出到頁面HTML視圖中。能夠與表達式{{}}互相替換。
eg: <div ng-bind="name"></div>
 
四、 ng-init: 初始化AngularJS應用程序中的變量值；
eg: <body ng-app="" ng-init="name='jredu'">
應用程序初始化時， name變量就附有初值。
 
02 - AngularJS中的MVC與做用域
一、【MVC三層架構】
Model(模型層)：應用程序中用於處理數據的部分。 (包括將數據保存或者修改到數據庫、變量、文件中)。
在AngularJS中,Model特指的是：應用程序中的各類數據。
 
View(視圖層)：用戶能夠看到的用戶顯示數據的頁面。
 
Controller(控制器)：控制器是連接View與Model的橋樑。 負責從View讀取數據，接受用戶的操 做輸入； 並將數據發送給Model層。 Model層對數據處理完畢以後，將結果返回給Controller，Controller再將結果返回給View層顯示。
示意圖： 
     ↗view → (數據) → Controller → (數據) →↘
 ↗                                           ↘
用戶                                     Model(處理數據)
 ↖                                          ↙
   ↖ view ← (結果) ← Controller ← (結果) ← ↙

 

二、建立一個AngularJS的模塊。即ng-app=""所須要綁定的部分。
var app = angular.module("myApp",[]);
須要接受兩個參數：
① 模塊名稱，即ng-app雙引號中須要綁定的名字。<body ng-app="myApp">
② 數組。 表示須要注入的模塊名稱，不須要注入其餘模塊可用空數組代替。
 
>>> AngularJS將經常使用的功能封裝到angular.js，建立主模塊時直接可使用，無需注入。
>>> 而一些應用較少的功能，須要導入對應的JS文件，而且在[]中注入進這個模塊，纔可以使用。
這就是AngularJS中的【模塊化開發】與【依賴注入】！
 
在AngularJS的模塊上，建立一個控制器，須要傳遞兩個參數：
① 控制器名稱，即ng-controller須要綁定的名稱。
<div ng-controller="myCtrl">
② 控制器的構造函數，構造函數能夠傳入多個參數。
>>> 若是要在函數中使用系統的內置對象，則必須經過函數的參數傳入，不然不能使用。
>>> AngularJS中的內置對象，都用$開頭，例如$scope,$rootScope
 
三、AngularJS的做用域
① $scope： 局部做用域，聲明在$scope上的屬性和方法。只能在當前Controller使用；（局部使用）
② $rootScope： 根做用域。聲明在$rootScope上的屬性和方法，能夠在整個ng-app所包含的範圍使用。（全局使用）
 
>>> 若是沒有使用$scope聲明變量，而是直接使用ng-model在HTML標籤中綁定的數據的做用域爲：
1.若是ng-model寫在某個Controller中，則這個變量會默認綁定到當前Controller的$scope上；
2.若是ng-model沒有寫在任何一個Controller，則這個變量會默認綁定到$rootScope上；
 
>>> AngularJS中的父子做用域！
一、AngularJS中，子做用 域只能訪問父做用域中的變量，而不能修改父做用域的變量；
二、爲了解決上述問題，能夠將父做用域中的變量聲明爲引用數據類型，例如對象等。 這樣能夠在子做用域中，直接修改對象的屬性，而不須要修改對象自己保存的地址。
 
舉例以下：
ng-app: 聲明AngularJS所管轄的區域
 
建立一個AngularJS的模塊。即ng-app=""所須要綁定的部分。
 
在AngularJS的模塊上，建立一個控制器，設置控制器的名稱以及控制器的構造函數。
 
運行頁面顯示結果爲：
自動捕捉顯示。
 
建立一個控制器用來對比，做用域的區別
全局輸入與變量綁定，輸入內容後效果以下：
 
 
03-AngularJS中的過濾器
過濾器可使用一個管道字符（ |）添加到表達式和指令中。
>>> 系統內置的過濾器
舉例應用：
一、uppercase，lowercase 大小寫轉換
{{ "lower cap string" | uppercase }} // 結果：LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} // 結果：tank is good
二、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
三、number 格式化（保留小數）
{{149016.1945000 | number:2}}
四、currency貨幣格式化
{{ 250 | currency }} // 結果：$250.00 {{ 250 | currency:"RMB ￥ " }} // 結果：RMB ￥ 250.00
五、filter查找
輸入過濾器能夠經過一個管道字符（|）和一個過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。
filter 過濾器從數組中選擇一個子集
// 查找name爲iphone的行 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'iphone'} }}
六、limitTo 截取
{{"1234567890" | limitTo :6}} // 從前面開始截取6位 {{"1234567890" | limitTo:-4}} // 從後面開始截取4位
七、orderBy 排序
// 根id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} // 根據id升序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}
自定義一：
>>>自定義過濾器，同時須要傳遞過濾參數。
* 調用過濾器示例：<p>{{12345678912 | hideTel:5}}</p>
* 傳入的參數5，將被過濾函數的num形參所接受 
.filter("hideTel",function(){
 return function(text,num){
num = num>0&&num<11?num:3;//設置默認替換長度
text = text+"";
var newText = text.substring(0,11-num)
+text.substring(11-num,11).replace(/\d/g,"*");
return newText;
}
})
運行顯示結果爲
自定義二：
自定義過濾器，實現根據 姓名篩選數據的功能。 
* >>> 調用示例：
* 請輸入姓名： <input type="text" ng-model="name" />
* <tr ng-repeat="item in classes | filterByName:name ">
*/
.filter("filterByName",function(){
return function(item,search){
if(!search) return item;
var arr = []
for(var i=0; i<item.length; i++){
var index = item[i].name.indexOf(search);
if(index>-1){
arr.push(item[i]);
}
}
return arr;
}
})

運行效果： filter查找默認全匹配，不能單項查找！
 
04-1-AngularJS中的服務Service
AngularJS 服務(Service)
AngularJS 中你能夠建立本身的服務，或使用內建服務。
什麼是服務？
在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
爲何使用服務?
在不少服務中，好比 $location 服務，它可使用 DOM 中存在的對象，相似 window.location 對象，但 window.location 對象在 AngularJS 應用中有必定的侷限性。
AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 對象更好。
 
【服務Service】
* 一、內置服務：
* >>> 要用服務，必需要把服務名經過controller的構造函數的參數注入進來！！！
* >>> 系統內置的服務，統一使用 $開頭， 服務中的屬性和方法統一使用$$開頭！！！ 自定義服務時，需注意與系統服務的寫法區分開；
*
* $location： 返回當前頁面的URL地址信息，是一個對象；
* $http： 向服務器發送請求，相似於JQuery中的Ajax；
* $timeout： 至關於 setTimeout();
* $interval： 至關於setInterval();
 
自定義服務（至關於聲明一個函數）
* 第一個參數是服務名：
* 第二個參數是自定義服務的構造函數。 咱們自定義的服務，本質是一個對象。
* 對象的屬性 ，能夠在構造函數中，使用this.屬性 表示；
* 對象的方法 ，能夠在構造函數中，使用this.方法 表示；
舉例以下：自定義服務：將十進制數轉化爲16進制 
.service("hexafy",function(){
this.gongneng = "將十進制數轉化爲16進制";
this.func = function(num){
return num.toString(16);
}
})

 
也可使用過濾器實現一樣功能 
.filter("filter1",function(){
return function(num){
return num.toString(16);
}
})
在過濾器中調用服務！！
也必須在聲明過濾器的外層構造函數中，注入服務名稱！！！
  
.filter("filter2",function(hexafy,$location){
return function(num){
return hexafy.func(num);
}
})
 
04-2-AngularJS中的服務Factory
【自定義服務Factory】
factory服務在使用上與service服務沒有太大差距。
惟一的不一樣點，是聲明服務時，factory服務是在函數中先聲明好一個 對象，而後使用return將對象返回。
而service服務，則是直接在函數中使用this將屬性和方法添加到對象上面。
 
eg: 
.factory("hexafy",function(){
var obj = {
gongneng : "將十進制數轉化爲16進制",
func : function(num){
return num.toString(16);
}
}
return obj;
})

//我的理解，obj對象在這裏相似與加工工廠，將屬性或者方法進行綁定添加。
 
04-3-AngularJS中的服務Provider
【 自定義服務provider】
一、 在AngularJS中，service服務、factory服務都是基於provider服務實現的；
二、 在定義provider時，可使用this.$get 方法，接受一個函數，函數裏面採用與factory徹底相同的寫法！！
.provider("hexafy",function(){ 
this.$get = function(){
var obj = {
gongneng : "333"
}
return obj;
}
}
// 有沒有感受到provoder的寫法更像是一個綜合雜糅的寫法。
三、在三種服務中，provider服務是惟一一個能夠寫進config配置階段的服務。
 
因此說，若是服務須要在配置階段，也就是在聲明controller以前執行的話，則可使用provider。 不然通常使用service或者factory.
 
.config() 表示配置階段 ，在聲明controller以前執行。 能夠用於聲明一些在controller中須要使用的全局變量、方法、服務等。
.config(function($provide){
// 在配置階段聲明provider服務，須要在config中注入 系統對象$provide 
$provide.provider("hexafy",function(){
this.$get = function(){
var obj = {
gongneng : "444"
}
return obj;
}
});
})
05-AngularJS中的$http.html
$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。
寫法以下：
$http({
method: 'GET', /*請求的方法*/
url: 'h51701.json' /*請求的地址*/
}).then(function(obj){
/*請求成功的回調函數*/
alert("請求成功！");
$scope.data = obj.data;
},function(){
/*請求失敗的回調函數*/
alert("請求失敗！");
});
 
看了有木有感受很眼熟啊，對，這貨和Ajax的寫法初前面部分很像，那咱們順便來回顧下Ajax的寫法吧：
JQuey Ajax寫法 
$provide.provider("hexafy",function(){
this.$get = function(){
var obj = {
gongneng : "444"
}
return obj;
}
});
})
05-AngularJS中的$http.html
$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。
寫法以下：
$http({
method: 'GET', /*請求的方法*/
url: 'h51701.json' /*請求的地址*/
}).then(function(obj){
/*請求成功的回調函數*/
alert("請求成功！");
$scope.data = obj.data;
},function(){
/*請求失敗的回調函數*/
alert("請求失敗！");
});

 

固然$http還有本身的簡寫方式，以下所示：
 
能夠直接簡寫爲get或者post方式： 
$http.get('/someUrl').then(successCallback, errorCallback);
$http.post('/someUrl', data).then(successCallback, errorCallback);
eg:
$http.get("json.php").then(function(){alert("請求成功")},function(){alert("請求失敗")});
06-AngularJS中的Select和表格
AngularJS 可使用 數組或對象建立一個下拉列表選項。
在 AngularJS 中咱們可使用 ng-option 指令來建立一個下拉列表，列表項經過對象和數組循環輸出，
1、使用數組做爲數據源
一、item表示數組中的每一項！
二、循環出的option中，value的值，默認爲item，即爲數組中的每一項。
三、option顯示出的內容(<option></option>標籤中的文字)是由 item.site for決定的！
即：
<select ng-model="site" ng-options=" item.site for item in sites"></select>
eg:
$scope.names = ["Google", "Runoob", "Taobao"];
2、以對象做爲數據源
一、 (key,value) 第一項表示對象的鍵，第二項表示對象的值；
二、 option的value，永遠都是對象的值！
三、 option顯示出的內容(<option></option>標籤中的文字)是由 ...for 決定的！也就是說 for前面是什麼，option標籤中就是什麼。
即： 
<option value=" value "> key/value(取決於for前面的內容) </option>
eg:
<p>選擇的網站是:</p>
<select ng-model="selectedSite" ng-options="key for (key, value) in sites">
</select>ie
<h1>你選擇的值是: {{selectedSite}}</h1>
 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
運行效果以下：
接下來要講的也是重點，咱們使用什麼來建立下拉列表呢？
【ng-options 和 ng-repeat】
一、ng-options使用時，是將指令添加在select上；
ng-repeat使用時，是將指令添加在option上；
 
二、 ng-options使用時，必須同步給select標籤綁定 ng-model；
ng-repeat使用時，不必定須要綁定ng-model
 
！！！ 三、 ng-options使用時，咱們只須要關心for前面的部分，即option標籤中顯示的文字；而option的value會自動分配，不禁咱們決定。 (使用數組做爲數據源時，value就是數組的每一項；使用對象做爲數據源是，value永遠都是對象的值)
ng-repeat使用，除了要指定option標籤中顯示的文字，還須要手動指定value中的內容，若是沒有指定則默認沒有value；
ng-repeat 指令是經過數組來循環 HTML 代碼來建立下拉列表，但 ng-options 指令更適合建立下拉列表，它有如下優點：
使用 ng-options 的選項的一個對象， ng-repeat 是一個字符串。
 
如下舉例區分：
1、ng-repeat: 
<select ng-model="selectedSite">
<option ng-repeat="key in sites" value="{{key.url}}">{{key.site}}</option>
</select>
<h1>你選擇的是: {{selectedSite}}</h1>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
運行顯示結果爲：
2、 ng-options
<p>選擇網站:</p>
<select ng-model="selectedSite" ng-options="key.site for key in sites">
</select>
<h1>你選擇的是: {{selectedSite.site}}</h1>
<p>網址爲: {{selectedSite.url}}</p>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
運行效果以下：
07-AngularJS中的DOM與事件
DOM
AngularJS 爲 HTML DOM 元素的屬性提供了綁定應用數據的指令。
ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。
ng-disabled="true/false";
傳入true表示禁用，傳入false表示可用
ng-disabled 指令綁定應用程序數據 "mySwitch" 到 HTML 的 disabled 屬性。
ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內容（value）。
若是 mySwitch 爲true, 按鈕將不可用:
ng-show 指令隱藏或顯示一個 HTML 元素。
ng-show 是否顯示
傳入true表示顯示，傳入false表示隱藏；
ng-hide 是否隱藏
ng-if: 是否移除元素。
當傳入true顯示，傳入false時移除。
效果與ng-show相同，可是ng-show和ng-hide只是隱藏元素，而ng-if是將元素從DOM中直接移除！！
ng-bind-html : 至關於innerHTML
而ng-bind 至關於 innerText
注意，要使用ng-bind-html，必須導入angular-sanitize.js文件進行安全驗證。同時須要在聲明模塊的時候，在數組中注入安全驗證模塊'ngSanitize'
ng-checked 設置複選框或單選框的選中狀態。
傳入true設置當前複選框被選中。
ng-class: 用於設置給元素添加class類。
可選值有如下幾種狀況：
① 能夠是字符串。表示直接給元素添加對應的class。 多個class之間，用空格分隔
② 能夠是對象。 對象的鍵表示class名字，對象的值爲true或false，當值爲true時表示添加對應的class
③ 能夠是數組。數組中的值能夠是字符串或對象，判斷規則同上。
ng-switch 根據變量的值，選擇不一樣的ng-switch-when來顯示。當沒有合適的選項時，顯示ng-switch-default 
eg:<div ng-class="'div div2'">這是一個div</div>
<label>
<input type="checkbox" ng-model="myClass" />給div添加樣式？
</label>
<div ng-class="{'div':myClass,'div1':!myClass}">這是一個div</div>
<div ng-class="[{'div':myClass,'div1':!myClass},'div3']">這是一個div</div>
事件
AngularJS 中的事件：
AngularJS中的事件只能觸發綁定在AngularJS做用域上面的屬性和方法。
 
<button ng-click="func()">點我彈個窗</button>
<button ng-mouseover="">點我彈個窗</button>
<button ng-mouseout="">點我彈個窗</button>
<input type="text" ng-keydown="keyDown()">
<input type="text" ng-foucus=""> <!--得到焦點-->
<input type="text" ng-blur=""><!--丟失焦點-->
<input type="text" ng-change=""><!--內容被改變-->
08-AngularJS中的表單和輸入驗證
[AngularJS的表單驗證]
 
一、表單中，經常使用的驗證操做：
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不經過的錯誤信息
 
二、 驗證時，必須給form和inpt，設置name屬性。
給form和input設置了name後，會自動將表單信息綁定到$scope做用域中。 因此，能夠直接使用formName.inputName.$驗證操做 獲得驗證結果。
例如：
formName.inputName.$dirty = "true"; 表示表單被填寫過！
formName.inputName.$invalid = "true"; 表示表單輸入內容不合法！
formName.inputName.$error.required = "true"; 表示設置了必填，可是沒有輸入
注意：
$error支持的驗證：
required/minlength/maxlength/partten/eamil/number/date/url等。。。
 
三、 爲了不AngularJS的驗證與HTML5的表單驗證衝突！！ 好比說 type="email" required等,H5也會進行驗證，那麼能夠 給form添加「novalidate」屬性，禁用HTML5的驗證功能
09-AngularJS中的動畫
在AngularJS中使用動畫：AngularJS 提供了動畫效果，能夠配合 CSS 使用。
 
一、導入 angular-animate.js
二、 若是頁面中沒有自定義app模塊，則能夠直接綁定系統模塊 ng-app="ngAnimate"
<body ng-app="ngAnimate">
若是頁面中有自定義的app模塊，則能夠在自定義模塊的數組中，注入ngAnimate。
angular.module("app",["ngAnimate"])
 
三、 當使用ng-show、ng-hide顯示或者隱藏元素的時候， 系統會自動添加或者移除.ng-hide這個class類；
 
四、 當使用ng-if/ng-switch/ng-repeat等其餘指令，須要分別設置顯示後和隱藏後的兩種class樣式：
顯示後的class： .ng-enter-active,.ng-leave{}
隱藏後的class： .ng-enter,.ng-leave-active{}
ngAnimate 作了什麼?
ngAnimate 模型能夠添加或移除 class 。
ngAnimate 模型並不能使 HTML 元素產生動畫，可是 ngAnimate 會監測事件，相似隱藏顯示 HTML 元素 ，若是事件發生 ngAnimate 就會使用預約義的 class 來設置 HTML 元素的動畫。
AngularJS 添加/移除 class 的指令:
  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch
ng-show 和 ng-hide 指令用於添加或移除 ng-hide class 的值。
其餘指令會在進入 DOM 會添加 ng-enter 類，移除 DOM 會添加 ng-leave 屬性。
當 HTML 元素位置改變時， ng-repeat 指令一樣能夠添加 ng-move 類 。
此外， 在動畫完成後，HTML 元素的類集合將被移除。例如： ng-hide 指令會添加一下類：
  • ng-animate
  • ng-hide-animate
  • ng-hide-add (若是元素將被隱藏)
  • ng-hide-remove (若是元素將顯示)
  • ng-hide-add-active (若是元素將隱藏)
  • ng-hide-remove-active (若是元素將顯示
  • 09-AngularJS中的路由
    在AngularJS中使用路由：
    1. 導入路由文件：angular-route.js
     
    2. 在主模塊中注入"ngRoute"。 rg:angular.module("app",["ngRoute"])
     
    3. 將超連接改寫爲路由格式。 --> "#/標記"
    <a href="#/">首頁</a> 首頁直接使用 #/ 表示
    <a href="#/page1">page1</a> 其餘頁面"#/標記" 表示
     
    4. 在config配置階段，注入$routeProvider，進行路由配置：
     
    5. 在頁面的合適位置，添加ng-view，用於承載路由打開的頁面：
    <div ng-view></div> 或 <ng-view></ng-view>
     
     
    【路由對象中接受的可選參數：】
    ① template： 自定義HTML模板，會直接將這段HTML記載到ng-view中；
    ② templateUrl： 導入外部的HTML模板文件。 爲了不衝突，外部的HTML應該是一個代碼片斷，即只保留body之內的部分。
    ③ controller： 在當前HTML模板上，執行的controller函數。會生出新的做用域$scope. 能夠接受字符串(聲明好的controller名字),也能夠直接接受函數。
     
    >>> 注意： 使用ng-view打開的頁面，controller中的做用域是屬於當前頁面做用域的子做用域！！ 依然符合Angular中父子做用域"能讀不能寫"的要求！
    >>> 因此： 若是須要在ng-view中修改當前做用域的變量，必須把這個變量聲明爲對象的屬性！！
     
    ④ redirectTo：重定向。通常用於.otherwise()中，用於重定向回首頁！
     
    AngularJS容許用戶自定義指令！！
    例如： <div ng-view></div> 或 <ng-view></ng-view>
    1. 使用.directive()聲明一個自定義指令；
    2. 定義指令時，指令名必須使用駝峯命名法； 而調用指令時，用"-"連接
    .directive("jiangHao") --> <jiang-hao><jiang-hao>
    .directive("jianghao") --> <jianghao><jianghao>
    3. 定義指令時，對象中使用的屬性：
    ① template: 調用指令時，生成的模板
    ② restrict: 用於聲明指令容許的調用方式：
    E->容許標籤名代表 A->容許屬性調用 C->容許類名調用 M->容許註釋調用
    默認值爲：EA
    若是須要註釋調用，必須再添加一個屬性：replace:true,並且註釋調用前必須添加"directive:" eg:<!-- directive: jiang-hao -->
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程