Веб-страница простого приложения AngularJS перестает отображать код

Я пытаюсь пройти руководство по AngularJS на сайте codechool.com, но пока я прорабатываю его и обновляю свой браузер, чтобы увидеть свой прогресс, в какой-то момент в руководстве браузер всегда загружает пустую веб-страницу и не загружает кода больше. Я дважды пытался изучить руководство с самого начала, и оба раза это происходило в разные моменты.

Я должен продолжать делать что-то не так в моем коде. Кто-нибудь еще имел эту проблему или знает, как ее исправить?

Я видел здесь пару похожих вопросов, но ответы не помогли.

Вот HTML:

<!DOCTYPE html>
<html ng-app='store'>
<head>
<html lang = "en-US">
<link rel = "stylesheet/css" type = "text/css" href = "bootstrap.min.css" />
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-controller = "StoreController as store">
    <div ng-repeat = "product in store.products">
      <h1> {{store.product.name}} </h1>
      <h2> {{store.product.price}} </h2>
      <p> {{store.product.description}} </p>
      <button>Add to Cart</button>
    </div>

    <script type = "text/javascript" src = "app.js"></script>
  </body>
</html>

А вот и JS-файл:

(function (){
  const app = angular.module('store', [ ]);

  app.controller("StoreController", function(){
    this.product = gems;
  });

  const gems = [
    {
      name: "Dodecahedron",
      price: 2.95,
      description: 'Many sided gem. Would look great in a ring.',
    },
    {
      name: "Pentagonal Gem",
      price: 5.95,
      description: 'A gem shaped like a pentagon. More expensive and 
more shiny',
    }
  ];

})();

Почему до сих пор используют старую версию?

— 30.05.2018 20:18

javascript html angularjs

30.05.2018 20:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Две вещи: у вас есть несовпадающее имя переменной между вашим контроллером и вашим представлением, а затем внутри вашего ng-repeat вы включаете псевдоним вашего контроллера вместо прямого доступа к каждому из повторяющихся элементов.

Сначала измените this.product = gems; в вашем контроллере на this.products = gems;, а затем измените свой div ng-repeat на это:

<div ng-repeat = "product in store.products">
  <h1> {{product.name}} </h1>
  <h2> {{product.price}} </h2>
  <p> {{product.description}} </p>
  <button>Add to Cart</button>
</div>

30.05.2018 20:16

Другие вопросы по теме

Неверная последовательность вывода после вложенного вызова getJSON

Не могу добавить фоновое изображение в рельсы

Не удается отобразить <ul> при наведении курсора на другой <li>

Искать и заменять строку по всему сайту с помощью jQuery?

Google Chrome добавляет номер телефона с автозаполнением в раскрывающийся текст, не связанный с номером телефона

Я не могу заставить свой div использовать фиксированную высоту. Сделали обширные тесты

Два гибких слайдера на одной странице

Центрировать кнопку (выровнять по горизонтали) в HTML

Использование $ .get для загрузки элементов с другой страницы не работает для корневых элементов?

Как написать общую функцию javascript, изменяющую высоту

Веб-страница простого приложения AngularJS перестает отображать код

Ответы 1

Другие вопросы по теме

Похожие вопросы