Routing Issue in Angular js not able to Route

Question

I am not able to proceed with routing in angularjs i am getting the below Error "XMLHttpRequest cannot load file:///C:/Users/PRn1/Desktop/angular%20samples/home1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." i am using Chrome for testing it any help would be appreciated

here is the sample code

This is app.js

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

app.controller('myCtrl', function ($scope) {  
    $scope.message = "Thank you for visiting our website";  
})  

app.config(function ($routeProvider) {  
    $routeProvider  
        .when('/home', {  
            templateUrl: 'home1.html',  
            controller: 'myCtrl'  
        })  
        .when('/aboutUs', {  
            templateUrl: 'aboutus.html',  
            controller: 'myCtrl'  
        })  
        .when('/contactUs', {  
            templateUrl: 'Contactus.html',  
            controller: 'myCtrl'  
        })  
        .otherwise({  
            redirectTo: '/home'  
        });  
});

This is home.html

<html>
<head>
<!--Using CDN for angularjs and angular js routing-->  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>  

<!--Adding javaScript file for angularJs coding-->  
<script src="app.js"></script>  
</head>
<body>
<div ng-app="myApp">  
<div id="topLinks">  
<a href="#/home1">Home</a>  
<a href="#/aboutUs">About Us</a>  
<a href="#/contactUs">Contact Us</a>  
</div>  
<div ng-view>
</div>   
</div>
</body>

This is Home1.html

<div>  
    <h1>Welcome to Home page1</h1>  
    {{message}}  
</div>

This is Aboutus.html

<div>  
    <h1>Welcome to About us page</h1>  
    {{message}}  
</div>

This is contactus.html

<div>  
    <h1>Welcome to Contact us page</h1>  
    {{message}}  
</div>

Mridul Kashyap · Accepted Answer · 2016-08-02 09:13:15Z

1

Launch it from a server. Angular doens't allow Cross origin request. meaning, just double clicking the file and hoping it would work, will not. install a small server. Live-server is what i use.

answered Aug 2, 2016 at 9:13

Mridul Kashyap

7001 gold badge5 silver badges12 bronze badges

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

Comments

Natalia Cherniavskaia · Accepted Answer · 2016-08-02 09:17:24Z

1

You can't load files locally like this file:///C:/... you have to use http:// instead. Take a look at http-server, it allows you to quickly start a server.

answered Aug 2, 2016 at 9:17

Natalia Cherniavskaia

1836 bronze badges

Collectives™ on Stack Overflow

Routing Issue in Angular js not able to Route

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related