***** 1.3 *****
***** app.js *****
var app = angular.module('gemStore', []);
***** index.html *****
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>{{"Hello, Angular!"}}</h1>
</body>
</html>
***** 1.4 Our First Controller *****
***** app.js *****
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
***** index.html *****
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="product row">
<h3>
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
</div>
</body>
</html>
***** 1.5 & 1.6 *****
***** index.html *****
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="product row" ng-hide="store.product.soldOut">
<h3>
{{store.product.name}}
<em class="pull-right">${{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
</body>
</html>
***** 1.7 *****
***** app.js *****
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
var gems = [
{ name: 'Azurite', price: 2.95 },
{ name: 'Bloodstone', price: 5.95 },
{ name: 'Zircon', price: 3.95 },
];
})();
***** index.html *****
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="product row" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">${{product.price}}</em>
</h3>
</div>
</body>
</html>
No comments:
Post a Comment