Angular routing not working in Chrome

Question

Im trying out AngularJS and have been watching Dan Wahlin's youtube video on it and can't get the routing to work in Chrome or IE. Everything works fine in FireFox, but that's it. It just gives a blank page. Anybody knows what might be wrong?

Here's the code:

Index.html

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
    <title></title>
    <script src="angular.min.js"></script>
    <script src="foo.js"></script>
</head>
<body>
        <!-- Placeholder for views-->
        <div data-ng-view=""></div>
</body> 
</html>

foo.js

var demoApp = angular.module('demoApp',[]);

demoApp.config(function($routeProvider){
    $routeProvider.when('/view1',{templateUrl: 'Partials/View1.html',controller: 'SimpleController'});
    $routeProvider.when('/view2',{templateUrl: 'Partials/View2.html',controller: 'SimpleController'});
    $routeProvider.otherwise({redirectTo: '/view1'});
});
var controllers = {};
controllers.SimpleController = function($scope){
    $scope.customers = [
        {name:'John Doe',city:'Phoenix'},
        {name:'Jane Doe',city:'New York'},
        {name:'Terrence Winter',city:'Los Angeles'},
        {name:'Barack Obama',city:'Washington DC'}
    ];
    $scope.addCustomer = function(){
        $scope.customers.push(
            {
                name: $scope.newCustomer.name, 
                city: $scope.newCustomer.city
            });
    };
}
demoApp.controller(controllers);

View1.html

<div class="container">
    <h3>View 1</h3>
    Name:
    <br>
    <input type="text" data-ng-model="filter.name"/>
    <br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'name'"> {{cust.name}} - {{cust.city}}</li>
    </ul>
    <br>
    Customer Name: <br>
    <input type="text" data-ng-model="newCustomer.name"/>
    <br>
    Customer City: <br>
    <input type="text" data-ng-model="newCustomer.city"/>
    <br>
    <button data-ng-click="addCustomer()">Add Customer</button>
    <br>
    <a href="#/view2">View 2</a>
</div>

View2.html

<div class="container">
<h3>View 2</h3>
<input type="text" data-ng-model="city"/>
    <br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:city | orderBy:'city'"> {{cust.name}} - {{cust.city}}</li>
    </ul>
</div>

Barkha · Accepted Answer · 2017-05-31 09:22:31Z

3

Chrome does not allow this as templates are loaded via AJAX. You can resolve this issue by setting up a simple http server using npm.

Go to your project folder in the nodejs command prompt. And type

npm install http-server -g

This will install http server on your machine.

Then start your server using the command

http-server

Now, run your files using the ip and port on which your server has started and there you go! Routing works in Chrome as well.

answered May 31, 2017 at 9:22

Barkha

312 bronze badges

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

Comments

Yann · Accepted Answer · 2013-07-18 15:18:14Z

2

If you tested it locally, it could be chrome preventing local html files of the views to be loaded. Do you have any errors in the console ?

answered Jul 18, 2013 at 15:18

Yann

2,2311 gold badge15 silver badges14 bronze badges

4 Comments

user1338871 Over a year ago

Ah, didnt think of checking the console.. Get this error message: "Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin." for View1.html.. What can I do to fix this?

Yann Over a year ago

You should open the page in a webserver. Upload it somewhere or use a local server (like MAMP for example) to open it. OTherwise chrome won't let you load local files for security reasons.

user1338871 Over a year ago

Great, got it to work by using Visual Studio instead of notepad. Thank you :)

Rafal Pastuszak Over a year ago

Btw, Grunt - gruntjs.com is a nice tool if you want to set up a testing server quickly :)

Rahul Sharma · Accepted Answer · 2017-02-15 11:34:35Z

0

Change your angular module as below:

var demoApp = angular.module('demoApp',["ngRoute"]);

edited Feb 15, 2017 at 11:34

Rahul Sharma

2,8932 gold badges29 silver badges41 bronze badges

answered Feb 15, 2017 at 10:45

sai krishna

11 bronze badge

Collectives™ on Stack Overflow

Angular routing not working in Chrome

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related