Skip to content

Commit 6f18a53

Browse files
codeaholicguycodeaholicguy
committed
Add dependency and service tutorial
1 parent ee9d378 commit 6f18a53

File tree

13 files changed

+280
-0
lines changed

13 files changed

+280
-0
lines changed

‎angular-dependencies-services/.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-dependencies-services/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-dependencies-services/app.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Created by hoangnn on 29/10/2015.
3+
*/
4+
(function () {
5+
6+
var app = angular.module('store', ['store-products']);
7+
8+
app.controller('StoreController', ['$http', function ($http) {
9+
var store = this;
10+
11+
store.products = [];
12+
13+
$http.get('/products.json').success(function(data){
14+
console.log(data)
15+
});
16+
}]);
17+
18+
app.controller("ReviewController", function () {
19+
this.review = {};
20+
21+
this.addReview = function (product) {
22+
product.reviews.push(this.review);
23+
};
24+
});
25+
26+
})();

‎angular-dependencies-services/images/ipad.png

30.5 KB
Loading

‎angular-dependencies-services/images/iphone.png

36.8 KB
Loading

‎angular-dependencies-services/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
<product-galery></product-galery>
28+
29+
<product-buy-button></product-buy-button>
30+
31+
<hr>
32+
<product-panels></product-panels>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<!-- Vendor -->
38+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
39+
40+
<!-- Application -->
41+
<script src="app.js"></script>
42+
<script src="products.js"></script>
43+
</body>
44+
</html>

‎angular-dependencies-services/product-buy-button.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<button class="btn btn-primary" ng-show="product.inStock">Thêm vào giỏ</button>

‎angular-dependencies-services/product-galery.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="thumbnail">
2+
<img ng-src="{{product.images[0].thumb}}">
3+
</div>

‎angular-dependencies-services/product-panels.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<section>
2+
<ul class="nav nav-pills">
3+
<li ng-class="{active:panel.isSelected('description')}">
4+
<a ng-click="panel.setTab('description')" href>Giới thiệu</a>
5+
</li>
6+
<li ng-class="{active:panel.isSelected('specification')}">
7+
<a ng-click="panel.setTab('specification')" href>Cấu hình</a>
8+
</li>
9+
<li ng-class="{active:panel.isSelected('review')}">
10+
<a ng-click="panel.setTab('review')" href>Đánh giá</a>
11+
</li>
12+
</ul>
13+
<div class="panel" ng-show="panel.isSelected('description')">
14+
<h4>Giới thiệu</h4>
15+
16+
<p>{{product.description}}</p>
17+
</div>
18+
<div class="panel" ng-show="panel.isSelected('specification')">
19+
<h4>Cấu hình</h4>
20+
21+
<p>None yet</p>
22+
</div>
23+
<div class="panel" ng-show="panel.isSelected('review')">
24+
<h4>Đánh giá</h4>
25+
26+
<blockquote ng-repeat="review in product.reviews">
27+
<b>{{review.stars}} star(s)</b>
28+
{{review.body}}
29+
<cite>- {{review.author}}</cite>
30+
</blockquote>
31+
32+
<form class="form-horizontal" name="reviewForm"
33+
ng-controller="ReviewController as reviewCtrl"
34+
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
35+
<blockquote>
36+
<b>{{reviewCtrl.review.stars}} star(s)</b>
37+
{{reviewCtrl.review.body}}
38+
<cite>- {{reviewCtrl.review.author}}</cite>
39+
</blockquote>
40+
41+
<div class="form-group">
42+
<label class="col-sm-1 control-label">Email</label>
43+
44+
<div class="col-sm-6">
45+
<input ng-model="reviewCtrl.review.author" type="email"
46+
class="form-control ng-pristine ng-invalid" placeholder="Email" required>
47+
</div>
48+
</div>
49+
<div class="form-group">
50+
<label class="col-sm-1 control-label">Review</label>
51+
52+
<div class="col-sm-6">
53+
<textarea ng-model="reviewCtrl.review.body" class="form-control" rows="3"
54+
required></textarea>
55+
</div>
56+
</div>
57+
<div class="form-group">
58+
<label class="col-sm-1 control-label">Star</label>
59+
60+
<div class="col-sm-6">
61+
<select ng-model="reviewCtrl.review.stars" class="form-control" required>
62+
<option value="1">1 star</option>
63+
<option value="2">2 stars</option>
64+
<option value="3">3 stars</option>
65+
<option value="4">4 stars</option>
66+
<option value="5">5 stars</option>
67+
</select>
68+
</div>
69+
</div>
70+
<div class="form-group">
71+
<div class="col-sm-offset-1 col-sm-10">
72+
<button type="submit" class="btn btn-default">Gửi</button>
73+
</div>
74+
</div>
75+
</form>
76+
</div>
77+
</section>

‎angular-dependencies-services/product-title.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{{product.name}}
2+
<em class="pull-right">{{product.price | currency}}</em>

0 commit comments

Comments
 (0)