угловые выражения не оцениваются браузером

0

Я использую Angular в PHP. Я скопировал файл angular.js в проект и ссылаюсь на него. Ниже мой проект: (да, это из учебника CodeSchool).

Index.html(html5)

<!DOCTYPE html>
<html ng-app="store" >
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="dist/vendors/Twitter/css/bootstrap.min.css">
    <script type="text/javascript" src="dist/vendors/Angular/angular.js"></script>
    <title>Flatlanders Gems</title>
</head>
<body >

    <div ng-controller="storeController">
            <h1> {{storeController.product.name}} </h1>
            <h2> {{storeController.product.price}} </h2>
            <p> {{storeController.product.description}} </p>
    </div>

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

</body>
</html>

и мой app.js

(function () {
    var ap = angular.module('store', []);
    app.controller('storeController', function () {
        this.product = gem;
    });
    var gem = {
        name:'Dodecahedron',
        price: 2.95,
        description: '...'
    }
})();

Работа с кодом завершается в phpStorm. Интересно, что storeController не отображает продукт, но на продукте отображаются элементы цены и описания имени

вот моя структура каталогов: Изображение 174551, когда я запускаю приложение из php или directy в браузере (используя xamp), я получаю следующее:

и вот мой вывод Изображение 174551

Я получаю те же результаты, пользуюсь ли я угловым 1,4 или 1,5

Похоже, что он не видит ни app.js, ни angular.js (или там что-то еще отсутствует?) Я пробовал со ссылками, начинающимися с:

/расстояние
. /dist и
~/Расстояние
все с одинаковым результатом.

Теги:
phpstorm

4 ответа

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

Посмотрите на variable name вашего модуля в app.js file Вы добавляете ap но когда используете app для создания своего контроллера.

var ap = angular.module('store', []);
app.controller('storeController', function () {
    this.product = gem;
});

вместо

var app = angular.module('store', []);
app.controller('storeController', function () {
    this.product = gem;
});

или

var ap = angular.module('store', []);
ap.controller('storeController', function () {
    this.product = gem;
});

Поэтому исправьте свое имя var, и оно будет работать.

  • 0
    У меня была другая ошибка: мне не хватало () в конце моей анонимной функции. Это последняя строка app.js должна быть}) (); Спасибо всем вам за очень быстрый ответ. Я думаю, что все (кроме меня) заметили опечатку в определении модуля.
2

Я не понимаю, почему вы назвали контроллер storeController а затем использовали его для префикса вашего product связанной модели. Ваш объект модели - это product, который storeController в вашем контроллере storeController. Он должен выглядеть так:

<div ng-controller="storeController">
    <h1> {{product.name}} </h1>
    <h2> {{product.price}} </h2>
    <p>  {{product.description}} </p>
</div>

И в вашем javascript...

var app = angular.module('store', []);
app.controller('storeController', function () {

var gem = {
    name:'Dodecahedron',
    price: 2.95,
    description: '...'
}

this.product = gem;
});

Вы хотите создать экземпляр "драгоценного камня", прежде чем назначать его в свою область действия, или, еще лучше, просто назначьте его право на $scope.products.

$scope.product = {
    name:'Dodecahedron',
    price: 2.95,
    description: '...'
}

Кроме того, есть тип в вашем var app = angular...

Я не верю, что все это нужно обернуть анонимной функцией.

РЕДАКТИРОВАТЬ На самом деле это хорошая практика для обертывания, о которой упомянул Шицу.

2

правильная угловая загрузка, возникли ли у вас ошибки в консоли

var ap = angular.module('store', []); app.controller('storeController', function() {

похоже, что у вас есть опечатка, это должно быть приложение в обоих случаях

1

Прежде всего, есть синтаксическая ошибка: var ap должно быть var app в вашем js файле.

Кроме того, если вы не используете $scope, вам нужно использовать синтаксис "controller as", то есть в вашем html, напишите:

<div ng-controller="storeController as ctrl">
       <h1> {{ctrl.product.name}} </h1>
       <h2> {{ctrl.product.price}} </h2>
       <p> {{ctrl.product.description}} </p>
</div>

Если в вашем угловом модуле есть ошибки, ничего не будет работать. Попытайтесь исправить это и проверить журналы в консоли (нажмите F12 в chrome или firefox), как правило, угловой тип verbose.

Проблема с gem, упомянутая @Tuesdave, является хорошим моментом, но ваша упаковка в анонимной функции является хорошим моментом, поэтому сохраните ее!

Ещё вопросы

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