Я использую 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 не отображает продукт, но на продукте отображаются элементы цены и описания имени
вот моя структура каталогов: , когда я запускаю приложение из php или directy в браузере (используя xamp), я получаю следующее:
и вот мой вывод
Я получаю те же результаты, пользуюсь ли я угловым 1,4 или 1,5
Похоже, что он не видит ни app.js, ни angular.js (или там что-то еще отсутствует?) Я пробовал со ссылками, начинающимися с:
/расстояние
. /dist и
~/Расстояние
все с одинаковым результатом.
Посмотрите на 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, и оно будет работать.
Я не понимаю, почему вы назвали контроллер 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...
Я не верю, что все это нужно обернуть анонимной функцией.
РЕДАКТИРОВАТЬ На самом деле это хорошая практика для обертывания, о которой упомянул Шицу.
правильная угловая загрузка, возникли ли у вас ошибки в консоли
var ap = angular.module('store', []); app.controller('storeController', function() {
похоже, что у вас есть опечатка, это должно быть приложение в обоих случаях
Прежде всего, есть синтаксическая ошибка: 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, является хорошим моментом, но ваша упаковка в анонимной функции является хорошим моментом, поэтому сохраните ее!