Skip to content

Commit 9433c00

Browse files
codeaholicguycodeaholicguy
committed
Add built-in directive p3
1 parent e2477ed commit 9433c00

File tree

8 files changed

+195
-0
lines changed

8 files changed

+195
-0
lines changed

‎angular-builtin-directive-p1/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.idea
2+
angular-buildin-.iml

‎angular-builtin-directive-p1/app.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
var products = [
13+
{
14+
name: 'Apple iPad Air 2 64G',
15+
price: 499,
16+
description: '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',
17+
inStock: true
18+
},
19+
{
20+
name: 'Apple iPhone 6s',
21+
price: 599,
22+
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á',
23+
inStock: false
24+
},
25+
{
26+
name: 'Apple iPhone 6s Plus',
27+
price: 699,
28+
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á',
29+
inStock: true
30+
}
31+
]
32+
33+
})();

‎angular-builtin-directive-p1/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="page-header"></div>
16+
<div class="panel panel-default col-md-12" ng-controller="StoreController as store">
17+
<div class="panel-body col-md-4" ng-repeat="product in store.products">
18+
<h1>{{product.name}}</h1>
19+
20+
<h2>$ {{product.price}}</h2>
21+
22+
<p>{{product.description}}</p>
23+
<button class="btn btn-primary" ng-show="product.inStock">Thêm vào giỏ</button>
24+
</div>
25+
</div>
26+
</div>
27+
28+
29+
<!-- Vendor -->
30+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
31+
32+
<!-- Application -->
33+
<script src="app.js"></script>
34+
</body>
35+
</html>

‎angular-builtin-directive-p3/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.idea
2+
angular-builtin-directive-p2.iml

‎angular-builtin-directive-p3/app.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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+
var products = [
13+
{
14+
name: 'Apple iPad Air 2 Wifi/4G 16G',
15+
price: 499,
16+
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',
17+
inStock: true,
18+
images: [
19+
{
20+
full: "images/ipad.png",
21+
thumb: "images/ipad.png"
22+
},
23+
{
24+
full: "images/ipad.png",
25+
thumb: "images/ipad.png"
26+
}
27+
]
28+
},
29+
{
30+
name: 'Apple iPad Air 2 Wifi/4G 64G',
31+
price: 599,
32+
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',
33+
inStock: true,
34+
images: [
35+
{
36+
full: "images/ipad.png",
37+
thumb: "images/ipad.png"
38+
},
39+
{
40+
full: "images/ipad.png",
41+
thumb: "images/ipad.png"
42+
}
43+
]
44+
},
45+
{
46+
name: 'Apple iPad Air 2 Wifi/4G 128G',
47+
price: 699,
48+
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',
49+
inStock: true,
50+
images: [
51+
{
52+
full: "images/ipad.png",
53+
thumb: "images/ipad.png"
54+
},
55+
{
56+
full: "images/ipad.png",
57+
thumb: "images/ipad.png"
58+
}
59+
]
60+
}
61+
]
62+
63+
})();

‎angular-builtin-directive-p3/images/ipad.png

30.5 KB
Loading

‎angular-builtin-directive-p3/images/iphone.png

36.8 KB
Loading

‎angular-builtin-directive-p3/index.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="page-header"></div>
16+
<div class="panel panel-default col-md-12" ng-controller="StoreController as store">
17+
<div class="panel-body col-md-4" ng-repeat="product in store.products">
18+
<h1>{{product.name}}</h1>
19+
20+
<div class="thumbnail">
21+
<img ng-src="{{product.images[0].thumb}}">
22+
</div>
23+
24+
<h2>$ {{product.price}}</h2>
25+
26+
<button class="btn btn-primary" ng-show="product.inStock">Thêm vào giỏ</button>
27+
28+
<section ng-init="tab = 1">
29+
<ul class="nav nav-pills">
30+
<li><a ng-click="tab = 1" href>Giới thiệu</a></li>
31+
<li><a ng-click="tab = 2" href>Cấu hình</a></li>
32+
<li><a ng-click="tab = 3" href>Đánh giá</a></li>
33+
</ul>
34+
<div class="panel" ng-show="tab === 1">
35+
<h4>Giới thiệu</h4>
36+
37+
<p>{{product.description}}</p>
38+
</div>
39+
<div class="panel" ng-show="tab === 2">
40+
<h4>Cấu hình</h4>
41+
42+
<p>None yet</p>
43+
</div>
44+
<div class="panel" ng-show="tab === 3">
45+
<h4>Đánh giá</h4>
46+
47+
<p>None yet</p>
48+
</div>
49+
</section>
50+
</div>
51+
</div>
52+
</div>
53+
54+
<!-- Vendor -->
55+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
56+
57+
<!-- Application -->
58+
<script src="app.js"></script>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)