AngularJS顯示為純文本

Question

我目前無法顯示有角度的JS，而且我不確定自己在做什么，因為它只在瀏覽器中顯示為純文本，而沒有從app2.js傳遞信息。
我已將所有依賴項正確放置在代碼中列出的位置中，因此我認為我的代碼可能有錯誤？
我的代碼如下。

<!DOCTYPE html>
<html ng-app="phonecatApp" lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="PhoneCat">
    <!-- AngularUI Styles -->
    <link rel="stylesheet" href="Content/ui-bootstrap-csp.css" />

</head>


<p>Total number of phones: {{phones.length}}</p>

    <body ng-controller="PhoneListController">

        <ul>
            <li ng-repeat="phone in phones">
                <span>{{phone.name}}</span>
                <p>{{phone.snippet}}</p>
            </li>
        </ul>

    </body>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app2.js"></script>
</html>

app2.js

// Define the `phonecatApp` module
var app = angular.module('phonecatApp', ['ui.bootstrap']);

// Define the `PhoneListController` controller on the `phonecatApp` module
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
    $scope.phones = [
      {
          name: 'Nexus S',
          snippet: 'Fast just got faster with Nexus S.'
      }, {
          name: 'Motorola XOOM™ with Wi-Fi',
          snippet: 'The Next, Next Generation tablet.'
      }, {
          name: 'MOTOROLA XOOM™',
          snippet: 'The Next, Next Generation tablet.'
      }
    ];
});

Answer 1

您將模塊定義為app ：

var app = angular.module('phonecatApp', ['ui.bootstrap']);

並在phonecatApp模塊上定義您的控制器。 因此更改為：

var phonecatApp = angular.module('phonecatApp', ['ui.bootstrap']);

Answer 2

我認為您在app2.js有錯誤。 您應該用phonecatApp.controller替換app.controller 。 因為您已經聲明了var app=...所以您應該使用app.controller 。 希望它能起作用！

Answer 3

模塊檢查一次命名問題。 用phonecatApp替換

AngularJS顯示為純文本

問題描述

3 個解決方案

解決方案1
3 已采納 2016-07-04 06:52:00

解決方案2
0 2016-07-04 07:00:21

解決方案3
0 2016-07-04 07:02:19

AngularJS顯示為純文本

問題描述

3 個解決方案

解決方案1 3 已采納 2016-07-04 06:52:00

解決方案2 0 2016-07-04 07:00:21

解決方案3 0 2016-07-04 07:02:19

解決方案1
3 已采納 2016-07-04 06:52:00

解決方案2
0 2016-07-04 07:00:21

解決方案3
0 2016-07-04 07:02:19