大家好纸镊，我是IT修真院北京分院第23期的學(xué)員郭婷婷，一枚正直純潔善良的WEB前端程序員概疆。
今天給大家分享一下逗威，修真院官網(wǎng)js任務(wù)5中涉及的angular 組件。
分享人：郭婷婷
1.背景介紹
在angular1.5的版本之前岔冀，都是以directive作為組件化的形式凯旭，所以根據(jù)官網(wǎng)任務(wù)的設(shè)置和目前的學(xué)習(xí)進度， 今天給大家主要介紹一下directive（指令）使套。
Directive（指令）是AngularJS中非常強大而有用的功能之一罐呼。它就相當(dāng)于為我們寫了公共的自定義DOM元素或CLASS屬性或ATTR屬性，并且它不只是單單如此侦高， 你還可以在它的基礎(chǔ)上來操作scope嫉柴、綁定事件、更改樣式等奉呛。通過這個Directive计螺，我們可以封裝很多公共指令，比如分頁指令瞧壮、自動補全指令等等登馒。 然后在HTML頁面里只需要簡單的寫一行代碼就可以實現(xiàn)很多強大的功能。一般情況下咆槽，需要用Directive有下面的情景：
1. 使你的Html更具語義化陈轿，不需要深入研究代碼和邏輯即可知道頁面的大致邏輯。
2. 抽象一個自定義組件罗晕，在其他地方進行重用济欢。
2.知識剖析
DIRECTIVE的定義
angular.module("app",[ ]).directive("helloWorld",function(){return{//通過設(shè)置項來定義};? ? ? ? ? ? ? ? ? ? })
directive()方法接收兩個參數(shù)：第一個參數(shù)為指令名稱，采用駝峰式命名法小渊； 第二個為指令定義方法法褥，需要返回一個對象（稱為指令定義對象DDO），用于描述指令的特征及指令對應(yīng)的處理邏輯酬屉。 我們可以向指令定義方法中注入一些依賴半等，例如$http揍愁、$rootScope等。
3.常見問題
DIRECTIVE的使用方法
4.解決方案
restrict屬性杀饵，（字符串）可選參數(shù)莽囤，該屬性用于約束我們自定義的指令可以以什么形式出現(xiàn)； 取值有：E(元素),A(屬性),C(類),M(注釋)切距，其中默認(rèn)值為A朽缎；這些標(biāo)志可以組合一起用，比如EA.表示即可以是元素也可以是屬性谜悟。
replace屬性：（布爾值）话肖，默認(rèn)值為false，該屬性用于指定是否使用template屬性定義的HTML模板內(nèi)容替換指令所在的HTML元素葡幸。
template屬性：該屬性用于指定AngularJS指令被替換成的HTML模板
templateUrl屬性：指定一個HTML文件作為指令模板最筒，效果和template屬性一致。
5.編碼實戰(zhàn)
6.擴展思考
指令定義對象的屬性template屬性可指定AngularJS指令被替換成的HTML模板蔚叨，在HTML模板中如何使用AngularJS表達式床蜘。
7.參考文獻
參考1：學(xué)習(xí)AngularJs:Directive指令用法
參考2：《AgularJS入門與進階》
8.更多討論
鳴謝
感謝大家觀看
BY : 郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-05-directvie.html
視頻鏈接 : https://pan.baidu.com/s/1dF8Ko9b 密碼: i559
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始蔑水，找個師兄邢锯，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏肤粱，學(xué)習(xí)的路上不再迷玫簦”。
這里是技能樹.IT修真院领曼，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化蛮穿，成長可見化庶骄，師兄1對1免費指導(dǎo)〖酰快來與我一起學(xué)習(xí)吧?单刁！
