Javascript 在HTML中以明文形式呈现AngularJS_Javascript_Html_Angularjs

Javascript 在HTML中以明文形式呈现AngularJS

javascript html angularjs

Javascript 在HTML中以明文形式呈现AngularJS,javascript,html,angularjs,Javascript,Html,Angularjs,我正在学习关于代码学校的AngularJS教程，我的JavaScript不会呈现到HTML中这是HTML <html ng-controller="StoreController as store"> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> </head> <body> <div>

我正在学习关于代码学校的AngularJS教程，我的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>

角度仅以明文形式呈现

顶部缺少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>

我建议将

脚本

标记移到顶部，因为这样做可以加快html渲染速度，但这会导致角度应用程序中的丑陋占位符显示毫秒

并将-

Ctrl

后缀附加到控制器视图变量，这将在您实际访问控制器或它只是一个范围变量时清楚地显示出来

<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>

(function(){
var app = angular.module("store", []);

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

app.controller('StoreController',function(){
    this.product = gem;
});

)();