CODEWITHSUNDEEP
angularjs
user1338871
user1338871

Reputation: 138

Angular routing not working in Chrome

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>

Upvotes: 2

Views: 10829

Answers (3)

Barkha
Barkha

Reputation: 31

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.

Upvotes: 3

sai krishna
sai krishna

Reputation: 1

Change your angular module as below:

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

Upvotes: 0

Yann
Yann

Reputation: 2231

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 ?

Upvotes: 2

Related Questions