AngularJS不会渲染到html文件

时间:2016-11-02 16:36:51

标签: html angularjs node.js

任何人都可以帮我确定我可能遇到的问题吗?

即使我导入了库,似乎也无法使用角度。当我刷新HTML时,这是浏览器中显示的内容。似乎控制器根本不工作。即使我尝试{{1 + 1}}。它不会对我做任何计算而只是显示“{{1 + 1}}”。这已经困扰了我三天。真的很感激有人可以给我一个提示。

这是我的HTML文件:

    <!DOCTYPE html>
    <html ng-app="myApp">
       <head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <meta charset ="utf-8">
    <meta http-equiv="X-UA-Compatible" content= "IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="container" ng-Controller="AppCtrl">
    <h1>UE Call Home</h1>
        <table class ="table">
            <thead>
                <tr>
                    <th>HostIP</th>
                    <th>IMSI</th>
                    <th>IMEI</th>
                    <th>Model</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat = "device in ue">
                    <td>{{device.hostid}}</td>
                    <td>{{device.imsi}}</td>
                    <td>{{device.imei}}</td>
                    <td>{{device.model}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="javascript" src="Controller/controller.js"></script>
    <script type="javascript" src="angular.min.js"></script>
</body>

这是我的控制者:

var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
    console.log("Hello World!");
    ue1 ={
        hostip:"andrew",
        imsi:909090,
        imei:898989,
        model:8994
    };
    ue2 ={
        hostip:"nick",
        imsi:787878,
        imei:565656,
        model:8996
    };
    ue3 ={
        hostip:"dick",
        imsi:1212121,
        imei:2323232,
        model:9650
    };

    var ue =[person1,person2,person3];
    $scope.ue = ue;

}]);

2 个答案:

答案 0 :(得分:1)

首先在JavaScript链接之前声明角度链接

并且变量person1,person2,person3也需要更改为ue1,ue2,ue3

答案 1 :(得分:0)

您必须更改<script>声明的顺序,如下所示

<script type="javascript" src="angular.min.js"></script>    
<script type="javascript" src="Controller/controller.js"></script>

同时将 ng-Controller 替换为ng-controller

除此之外,请验证 angular.min.js 路径,最好将controller.jsangular.min.js放在同一文件夹中,以避免路径冲突。