Не могу найти angularJS libs

0

Я новичок в развитии интерфейса и обучении 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 когда я открываю его на хром

Изображение 174551

2 ответа

2
Лучший ответ

Вы просто забыли включить директиву ngApp, как ngApp ниже:

angular.module('app', [])
...

<html ng-app="app">
  • 0
    Нет, это не имело никакого значения. Я обновил свой index.html а также опубликовал файл app.js чтобы показать, что у меня есть сейчас. Все тот же вывод.
  • 0
    Я даже попытался с базовым {{"test"}} выводом и ожидал получить test качестве вывода на html, но он не работал.
Показать ещё 1 комментарий
0

Вы забыли 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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню