AngularJS wont render into the html file

Question

Can anyone help me to identify the problems I might have?

It seems that I cannot use angular even though I have imported the library. When I refresh HTML this is what shows in the browser. It seems that the controller is not working at all. Also even when I try to do {{1+1}}. It won't do any calculations for me instead just showing "{{1+1}}". This has been bugging me for three days. Really appreciate someone can give me a tip.

This is my HTML file:

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

This is my controller:

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;

}]);

could you replace ng-Controller with ng-controller?

Eirini Graonidou
– Eirini Graonidou

2016-11-02 16:39:32 +00:00
Commented Nov 2, 2016 at 16:39 — Eirini Graonidou
– Eirini Graonidou, Commented Nov 2, 2016 at 16:39

Yitzchok Glancz · Accepted Answer · 2016-11-02 16:55:43Z

1

First declare the angular link before your JavaScript link

And also the variables person1, person2, person3 needs to be changed to ue1, ue2, ue3

edited Nov 2, 2016 at 16:55

answered Nov 2, 2016 at 16:41

Yitzchok Glancz

1,4101 gold badge11 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

X.Xin Over a year ago

thank you very much. it worked after changing the order

Able · Accepted Answer · 2016-11-02 16:48:35Z

0

You have to change the order of <script> declaration as below,

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

Also replace the ng-Controller with ng-controller

In addition to that verify the angular.min.js path, better to put the controller.js and angular.min.js in same folder to avoid path conflict.

answered Nov 2, 2016 at 16:48

Able

3,92212 gold badges61 silver badges89 bronze badges

1 Comment

Able Over a year ago

Welcome! if you like the answer pls accept the answer!

Collectives™ on Stack Overflow

AngularJS wont render into the html file

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related