Rohit Rohit - 9 days ago 7
AngularJS Question

Angular JS not rendering HTML

I am new to Angular JS. I wrote a simple Angular code but the HTML is not rendering correctly or the expression is not getting evaluated. Please help with what i am missing. I am using angular.min.js minified(1.6).

<!DOCTYPE html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script>
function MyFirstCtrl($scope) {
var employees = ['Catherine Grant', 'Monica Grant',
'Christopher Grant', 'Jennifer Grant'];

$scope.ourEmployees = employees;
};
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<h2>Number of Employees: {{ ourEmployees.length}}</h2>
</body>
</html>

Answer

Set a root for your application with the ng-app directive and create a controller for your app from which you can handle the $scope:

var app = angular.module("ng-app", []);
app.controller("myCtrl", function($scope) {
  var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
  $scope.ourEmployees = employees;

});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ng-app">
<div ng-controller="myCtrl">
  <h2>Number of Employees: {{ ourEmployees.length}}</h2>
  </div>
</div>

Comments