#javascript #html #angularjs
#javascript #HTML #angularjs
Вопрос:
Я следую учебнику AngularJS по Code School, и мой JavaScript не будет отображаться в HTML.
Вот HTML
<html ng-controller="StoreController as store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div>
<h1> {{store.product.name}} </h1>
<h2> $ {{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
и вот угловой
(function(){
var app = angular.module("store", []);
app.controller('StoreController',function(){
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
})();
Angular — это просто рендеринг в виде открытого текста
Ответ №1:
Вверху отсутствует ngApp.
<html data-ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="StoreController as storeCtrl">
<h1> {{storeCtrl.product.name}} </h1>
<h2> $ {{storeCtrl.product.price}} </h2>
<p> {{storeCtrl.product.description}} </p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
И ваша gem
переменная используется angular до того, как она фактически определена.
(function(){
var app = angular.module("store", []);
var gem = {
name: 'Dodecahedron',
price: 2.95,
description:"..."
};
app.controller('StoreController',function(){
this.product = gem;
});
)();
И я бы рекомендовал переместить script
теги наверх, потому что вы делаете это, чтобы ускорить рендеринг html, но это приведет к тому, что в приложениях angular ваши уродливые заполнители будут отображаться в течение миллисекунд.
И добавьте Ctrl
суффикс — к переменной представления контроллера, это прояснит, когда вы фактически получаете доступ к контроллеру или это просто переменная области видимости.