Рендеринг AngularJS в виде открытого текста в HTML

#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 суффикс — к переменной представления контроллера, это прояснит, когда вы фактически получаете доступ к контроллеру или это просто переменная области видимости.