Skip to content

Commit ee9d378

Browse files
codeaholicguycodeaholicguy
committed
Add custom directive tutorial
1 parent c83c8e2 commit ee9d378

File tree

7 files changed

+172
-0
lines changed

7 files changed

+172
-0
lines changed

‎angular-custom-directives/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.idea
2+
angular-builtin-directive-p3.iml

‎angular-custom-directives/angular-forms-models.iml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<module type="WEB_MODULE" version="4">
3+
<component name="NewModuleRootManager" inherit-compiler-output="true">
4+
<exclude-output />
5+
<content url="file://$MODULE_DIR$" />
6+
<orderEntry type="inheritedJdk" />
7+
<orderEntry type="sourceFolder" forTests="false" />
8+
</component>
9+
</module>

‎angular-custom-directives/app.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* Created by hoangnn on 29/10/2015.
3+
*/
4+
(function () {
5+
6+
var app = angular.module('Store', []);
7+
8+
app.controller('StoreController', function () {
9+
this.products = products;
10+
});
11+
12+
app.controller("ReviewController", function () {
13+
this.review = {};
14+
15+
this.addReview = function (product) {
16+
product.reviews.push(this.review);
17+
};
18+
});
19+
20+
app.directive('productTitle', function(){
21+
return {
22+
restrict: 'E',
23+
templateUrl: 'product-title.html'
24+
};
25+
});
26+
27+
app.directive('productPanels', function(){
28+
return {
29+
restrict: 'E',
30+
templateUrl: 'product-panels.html',
31+
controller: function () {
32+
this.tab = 'description';
33+
34+
this.setTab = function (tab) {
35+
this.tab = tab;
36+
};
37+
38+
this.isSelected = function (tab) {
39+
return this.tab === tab;
40+
}
41+
},
42+
controllerAs: 'panel'
43+
};
44+
});
45+
46+
var products = [
47+
{
48+
name: 'Apple iPad Air 2 Wifi/4G 16G',
49+
price: 499,
50+
description: 'Một bước ngoặt trong thiết kế của Apple vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
51+
inStock: true,
52+
images: [
53+
{
54+
full: "images/ipad.png",
55+
thumb: "images/ipad.png"
56+
},
57+
{
58+
full: "images/ipad.png",
59+
thumb: "images/ipad.png"
60+
}
61+
],
62+
reviews: [
63+
{
64+
stars: 5,
65+
body: "I love this product!",
66+
author: "hoangn@codeaholicguy.com"
67+
},
68+
{
69+
stars: 1,
70+
body: "This product sucks",
71+
author: "bob@hater.com"
72+
}
73+
]
74+
},
75+
{
76+
name: 'Apple iPad Air 2 Wifi/4G 64G',
77+
price: 599,
78+
description: 'Một bước ngoặt trong thiết kế của Apple vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
79+
inStock: true,
80+
images: [
81+
{
82+
full: "images/ipad.png",
83+
thumb: "images/ipad.png"
84+
},
85+
{
86+
full: "images/ipad.png",
87+
thumb: "images/ipad.png"
88+
}
89+
]
90+
},
91+
{
92+
name: 'Apple iPad Air 2 Wifi/4G 128G',
93+
price: 699,
94+
description: 'Một bước ngoặt trong thiết kế của Apple vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
95+
inStock: true,
96+
images: [
97+
{
98+
full: "images/ipad.png",
99+
thumb: "images/ipad.png"
100+
},
101+
{
102+
full: "images/ipad.png",
103+
thumb: "images/ipad.png"
104+
}
105+
]
106+
}
107+
]
108+
109+
})();

‎angular-custom-directives/images/ipad.png

30.5 KB
Loading

‎angular-custom-directives/images/iphone.png

36.8 KB
Loading

‎angular-custom-directives/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html ng-app="Store">
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>angular-controller-example</title>
6+
7+
<!-- Vendor -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
9+
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
10+
crossorigin="anonymous">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
<body>
14+
15+
<div class="container">
16+
<div class="page-header">
17+
<h1>Store</h1>
18+
</div>
19+
<div class="panel panel-default" ng-controller="StoreController as store">
20+
<div class="panel-body" ng-repeat="product in store.products">
21+
<!--<h1 ng-include="'product-title.html'">-->
22+
<!--</h1>-->
23+
<h1>
24+
<product-title></product-title>
25+
</h1>
26+
27+
<div class="thumbnail">
28+
<img ng-src="{{product.images[0].thumb}}">
29+
</div>
30+
31+
<button class="btn btn-primary" ng-show="product.inStock">Thêm vào giỏ</button>
32+
33+
<hr>
34+
<product-panels></product-panels>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<!-- Vendor -->
40+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
41+
42+
<!-- Application -->
43+
<script src="app.js"></script>
44+
</body>
45+
</html>

‎angular-custom-directives/style.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.ng-invalid.ng-dirty {
2+
border-color: #FA787E;
3+
}
4+
5+
.ng-valid.ng-dirty {
6+
border-color: #78FA89;
7+
}

0 commit comments

Comments
 (0)