Why does not my html file load in this AngularJs Project?

Question

My code looks like this:

index.html

<!doctype html>
<html ng-app="myApp">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js">   </script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
<script src = "js/main.js"></script>
</head>
<body>
    <div>
        <div data-ng-view></div>
    </div>
</body>
</html>

main.js

var app = angular.module('myApp', ['ngRoute']);

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
        .when('/view1', {
            controller : 'SimpleController',
            templateUrl : 'templates/view1.html'
        })
        .when('/view2', {
            controller : 'SimpleController',
            templateUrl : 'templates/view2.html'
        })
        .otherwise({ redirectTo : '/view1' });
}]);



app.controller('SimpleController', function ($scope) {
    $scope.customers = [
        {name : "John Doe", city : "San Francisco"},
        {name : "John Bollinger", city : "Phoenix"},
        {name : "Jane Doe", city : "Washington"}
    ];
    $scope.addCustomer = function () {
        $scope.customers.push(
            {name : $scope.newCustomer.name,
             city : $scope.newCustome.city  
            }
        )
    }
});

In my js folder, I have another folder called templates. In this we have 2 html files.

view1.html

<div class="container">
  <h1>View 1</h1>
  Enter a name to search the list
  <input type="text" data-ng-model="custName" />
  <ul>
    <li data-ng-repeat="cust in customers | filter : custName | orderBy : 'name' ">
        {{ cust.name }} - {{ cust.city }}
    </li>
  </ul>

  <br />
  Customer name: <br />
  <input type="text" data-ng-model="newCustomer.name" />
  Customer city: <br />
  <input type="text" data-ng-model="newCustomer.city" />
  <br />
  <button data-ng-click="addCustomer()">Add Customer</button>
</div>

and finally...

view2.html

<div class="container">
  <h1>View 2</h1>
  Enter a name to search the list
  <input type="text" data-ng-model="custName" />
  <ul>
    <li data-ng-repeat="cust in customers | filter : custName | orderBy : 'city' ">
      {{ cust.name }} - {{ cust.city }}
    </li>
  </ul>
</div>

Any ideas why this isn't working? I tried fixing the issue with the ng-route but that didnt work either. When I open the file, the URL goes to index.html#/view1 indicating the route works, but the webpage is completely empty. None of the html elements load.

Edit: This is the error I get in developers mode:

XMLHttpRequest cannot load angular.js:8632 file:///E:/Learning%20AngularJs/templates/view1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Note, I do have another templates folder in the directory with index.html containing the 2 view html files.

see this: http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes — Zaki, Jan 11 '16 at 16:51

score 2 · Accepted Answer · answered Jan 11 '16 at 17:04

There is nothing wrong with your code. The problem is you need to host this in a web server i think you are trying to open it from file explorer

You can deploy this in IIS or any other webserver and try.

Or you can follow below steps

make sure you install node js

Open command prompt
Navigate to your root directory
Run the below commands npm install connect npm install serve-static
create a file called server.js. put below code

var connect = require('connect'), serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic('.')) app.listen(5000);
browse http://localhost:5000

It should work. I was able to do this using the code you have given

Why does not my html file load in this AngularJs Project?

1 Answers1