Я новичок в развитии интерфейса и обучении angularJS. У меня есть следующая структура папок
.
├── angular.min.js
├── app.js
├── bootstrap.min.css
└── index.html
И вот мой 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" 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>
и мой файл app.js
(function(){
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gem;
});
var gem = [{
name: 'Azurite',
price: 2.95,
canPurchase: false,
soldOut: true;
}, {
name: 'Azurite 2',
price: 2.95,
canPurchase: false,
soldOut: true,
}]
})();
Когда я открываю эту страницу index.html на chrome, я не вижу, angularJS
директивы angularJS
заменялись реальной стоимостью. Я не размещал этот файл на любом сервере. По моему мнению, для html я могу просто сохранить все ресурсы в относительном пути, и html
файл мог их увидеть. то почему не здесь angularJS
способен его решить?
Вот мой вывод html
когда я открываю его на хром
Вы просто забыли включить директиву ngApp
, как ngApp
ниже:
angular.module('app', [])
...
<html ng-app="app">
Вы забыли ng-repeat: вы store.product
доступ к store.product
то время как у вас должен быть некоторый элемент-оболочка, такой как <div ng-repeat="product in products>
а затем напрямую обращаться к продукту: product.soldOut
или product.canPurchase
.
Попробуйте что-нибудь вроде:
<!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 ng-repeat="product in products>
<div class="product row" ng-hide="product.soldOut">
<h3>
{{product.name}}
<em class="pull-right">$ {{product.price}}</em>
</h3>
<button ng-show="product.canPurchase">Add to cart</button>
</div>
</div>
</body>
</html>
index.html
а также опубликовал файлapp.js
чтобы показать, что у меня есть сейчас. Все тот же вывод.{{"test"}}
выводом и ожидал получитьtest
качестве вывода на html, но он не работал.