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.

Do you see any errors in developer tools - F12?

Zaki
– Zaki

2016-01-11 16:42:27 +00:00
Commented Jan 11, 2016 at 16:42 — Zaki
– Zaki, Commented Jan 11, 2016 at 16:42
Updated with error. @Zaki

darkhorse
– darkhorse

2016-01-11 16:49:32 +00:00
Commented Jan 11, 2016 at 16:49 — darkhorse
– darkhorse, Commented Jan 11, 2016 at 16:49
see this: stackoverflow.com/questions/27742070/…

Zaki
– Zaki

2016-01-11 16:51:26 +00:00
Commented Jan 11, 2016 at 16:51 — Zaki
– Zaki, Commented Jan 11, 2016 at 16:51

Umamaheswaran · Accepted Answer · 2016-01-11 17:04:50Z

2

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

answered Jan 11, 2016 at 17:04

Umamaheswaran

3,9083 gold badges33 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related