Superb Saif Superb Saif - 4 months ago 7
Javascript Question

simple angularjs application not working in chrome

I am trying a simple application but it is not supported in google chrome browser.
I am trying to call html within html page. I am using ng-include directive. This code is working in other browsers like firefox.
Here is my code:
test.html

<!doctype html>
<html>
<head>
<script src="angular.min.js"></script>
<script src="newscript.js"></script>
<link href="styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<div ng-include="'Etable.html'"></div>
</div>
</body>
</html>


Etable.html

<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{employee.name}} </td>
<td> {{employee.gender}} </td>
<td> {{employee.salary}} </td>
</tr>
</tbody>
</table>


newscript.js

var app = angular
.module("myModule",[])
.controller("myController", function ($scope) {
var employees = [
{ name: "Ben", gender:"Male", salary:5000 },
{ name: "Ten", gender:"Female", salary:4000 },
{ name: "Zen", gender:"Male", salary:3000 },
{ name: "Aen", gender:"Female", salary:7000 }
];
$scope.employees = employees;
});

Answer

You need to run your application on a server. If you are using npm then install npm install http-server and start the server in your project folder by following command http-server.
And start your application on localhost.