Thidasa Paranavitharana Thidasa Paranavitharana - 5 months ago 23
AngularJS Question

AngulaJS no output

I've started learning AngularJS using some tutorials on youtube.
In a tutorial there's this code but when I coded it , the browser won't show the properties.
Can anyone help me to solve it ?

This is my index.html

<!DOCTYPE html>
<html ng-app = "myModule">
<head>
<meta charset="utf-8"/>
<title>

</title>

<script src="angular/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>

<div ng-controller="myController">
<div>
First Name : {{ employee.firstName }}
</div>
<div>
Last Name : {{ employee.lastName }}
</div>
<div>
Age : {{ employee.age }}
</div>
<!-- <div>
{{message}}
</div> -->
</div>

</body>
</html>


And this is my script.js file

var myApp = angular.module("myModule",[]);
myApp.controller('myController', function($scope){

var employee = {
firstName : "abcd",
lastName : "efgh",
age : 24
};

$scope.employee = employee;
});


In the browser it displays like this

First Name :
Last Name :
Age :


Why don't it show the property details ? I mean "abcd" as the first name and so on ?

Answer

There is nothing wrong in your code everything seems working fine. Just refresh your page, it should work! Copied your code :-)

  var myApp = angular.module("myModule",[]);
myApp.controller('myController', function($scope){

        var employee = {
            firstName : "abcd",
            lastName : "efgh",
            age : 24    
        };

        $scope.employee = employee;
    });
<!DOCTYPE html>
<html ng-app = "myModule">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  
  <title>JS Bin</title>
</head>
<body>
   <div ng-controller="myController">
        <div>
            First Name : {{ employee.firstName }}
        </div>
        <div>
            Last Name : {{ employee.lastName }}
        </div>
        <div>
            Age : {{ employee.age }}
        </div>
        <!-- <div>
            {{message}}
        </div> -->
    </div>
</body>
</html>