Dependency Injection คือ รูปแบบการออกแบบโปรแกรมที่เกี่ยวข้องกับ Component โดยการอ้างอิงไปยัง Component ที่ต้องการ เช่น Service, Directive เป็นต้น
ข้อดีของการใช้ Dependency คือ สามารถเรียกใช้งาน Module ที่เขียนแยกไว้ตามหน้าที่เฉพาะอย่าง
ไฟล์ bookstore.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<book-type></book-type>
<book-author></book-author>
<book-title></book-title>
</body>
</html>
อธิบาย :
- <book-type>,<book-author>,<book-title> คือ Custom Directive ที่สร้างขึ้น
ไฟล์ app.js
(function(){
var app = angular.module('myapp',[]);
app.directive('bookType',function(){
return{
restrict:'E',
templateUrl:'booktype.html',
controller:function(){
this.booktype = ['accounting','it','engineering'];
},
controllerAs:'Type'
};
});
app.directive('bookAuthor',function(){
return{
restrict:'E',
templateUrl:'bookauthor.html',
controller:function(){
this.bookauthor = ['Torben Lage Frandsen','Stephen Moffat','Steve Bark'];
},
controllerAs:'Author'
};
});
app.directive('bookTitle',function(){
return{
restrict:'E',
templateUrl:'booktitle.html'
};
});
})();
อธิบาย :
- สร้าง Directive ที่เป็น HTML Element ชื่อ bookType, bookAuthor, bookTitle ( อ่านเพิ่มเติมจากบทความ AngularJS with Custom Directive )
ไฟล์ booktype.html
<select>
<option ng-repeat="book in Type.booktype" value="{{book}}">
{{book}}
</option>
</select>
ไฟล์ bookauthor.html
<select>
<option ng-repeat="author in Author.bookauthor" value="{{author}}">
{{author}}
</option>
</select>
ไฟล์ booktitle.html
<input type="text" placeholder="Search for book">
<input type="submit" value="search">
อธิบาย :
- ไฟล์ booktype.html, bookauthor.html, booktitle.html เป็น HTML Template ที่สร้างแยกไว้เพื่อสะดวกในการเรียกใช้งาน
จากตัวอย่างด้านบน จะเห็นว่ามีการสร้าง Custom Directive ไว้ภายใน Module เดียว ซึ่งหากมีการสร้าง Directive อื่นๆ จำนวนมาก จะทำให้ยากต่อการจัดการ ดังนั้น จึงควรแยก Module สำหรับ book ออกมา เพื่อความสะดวกในการแก้ไขโค้ดภายหลัง โดยแก้ไขไฟล์ ดังนี้
ไฟล์ bookstore.html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="book-directive.js"></script>
</head>
อธิบาย :
- เพิ่มส่วน include javascript จากไฟล์ book-directive.js
ไฟล์ app.js
(function(){
var app = angular.module('myapp',['book']);
})();
อธิบาย :
- เพิ่ม dependency โดยอ้างอิงจากชื่อ module ของไฟล์ book-directive.js นั่นคือ ['book']
- นำส่วนของการสร้าง Directive ไปใส่ในไฟล์ book-directive.js
สร้างไฟล์ book-directive.js
(function(){
var app = angular.module('book',[]);
app.directive('bookType',function(){
return{
restrict:'E',
templateUrl:'booktype.html',
controller:function(){
this.booktype = ['accounting','it','engineering'];
},
controllerAs:'Type'
};
});
app.directive('bookAuthor',function(){
return{
restrict:'E',
templateUrl:'bookauthor.html',
controller:function(){
this.bookauthor = ['Torben Lage Frandsen','Stephen Moffat','Steve Bark'];
},
controllerAs:'Author'
};
});
app.directive('bookTitle',function(){
return{
restrict:'E',
templateUrl:'booktitle.html'
};
});
}
)();
จะเห็นว่า book-directive.js เป็น module ที่ทำงานเกี่ยวกับ book ทั้งหมด ทำให้สะดวกในการแก้ไขโค้ดภายหลัง
แม้จะเรียกใช้ Dependency ใน module แต่ยังคงต้อง include ไฟล์ javascript ของ module ที่ถูกอ้างอิงเสมอ โดย app.js เป็น Top-level module ที่ถูกเรียกใช้ผ่าน ng-app
