abstrakt：1.指令的定義從用戶的角度來看，指令就是在應(yīng)用的模板中使用的自定義HTML標簽。指令可以很簡單，也可以很復雜。AngularJS的HTML編譯器會解析指令，增強模板的功能。也是組件化未來的發(fā)展趨勢，目前HTML5中也加入了很多新標簽，但是在實際業(yè)務(wù)開發(fā)過程中，有很多復用的模板，加上復用的交互效果，可以將其編寫為AngularJS的指令，開發(fā)工程師可以在同一個項目，或多個項目中使用，實現(xiàn)開發(fā)一次，到
1.指令的定義
從用戶的角度來看，指令就是在應(yīng)用的模板中使用的自定義HTML標簽。指令可以很簡單，也可以很復雜。AngularJS的HTML編譯器會解析指令，增強模板的功能。也是組件化未來的發(fā)展趨勢，目前HTML5中也加入了很多新標簽，但是在實際業(yè)務(wù)開發(fā)過程中，有很多復用的模板，加上復用的交互效果，可以將其編寫為AngularJS的指令，開發(fā)工程師可以在同一個項目，或多個項目中使用，實現(xiàn)開發(fā)一次，到處使用的目標。
2.內(nèi)置指令和自定義指令
AngularJS內(nèi)部指令都是ng-diretivename這種，以ng-開頭。可以通過 https://docs.angularjs.org/api/ng/directive
查看AngularJS的指令。在實際開發(fā)中，常用的有以下幾個：
ngApp
ngController
ngClass
ngClick
ngShow和ng-hide
ngRepeat
ngSubmit
3.第一個指令
編寫一個第一個指令，輸出Hello AngularJS Diretive.
index.html
<html ng-app="app"><head><title>AngularJs First Diretive</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://code.angularjs.org/1.5.7/angular.js"></script> <script src="script.js"></script></head><body ng-controller="mainCtrl"> <hello-world></hello-world></body></html>
script.js
var app=angular.module('app',[]);app.controller('mainCtrl',function($scope){
$scope.message="Learning Angularjs";});angular.module('app').directive('userInfoCard',function(){
return {
template:"Hello World. I am an Angularjs Diretive.",
restrict:"EA",
replace:true
}})運行效果如下:
4.總結(jié)
在AngularJS中，指令非常的重要。指令是AngularJS和其他大多數(shù)JavaScript客戶端框架的區(qū)別所在，也是未來Web開發(fā)組件化趨勢所在。有了指令，無需編輯一大段代碼定義模型；有了指令，AngularJS的模型和視圖得到了建好，從而讓開發(fā)者可以快速高效的開發(fā)強大的應(yīng)用。
