CODEWITHSUNDEEP
angularjs
Pradeep
Pradeep

Reputation: 163

Routing Issue in Angular js not able to Route

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>

Upvotes: 0

Views: 61

Answers (2)

Natalia Cherniavskaia
Natalia Cherniavskaia

Reputation: 183

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.

Upvotes: 1

Mridul Kashyap
Mridul Kashyap

Reputation: 700

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.

Upvotes: 1

Related Questions