2016-08-02 5 views
0

angularjsでルーティングを進めることができません。以下のエラーが発生しました。 "XMLHttpRequestはファイルをロードできません:/// C:/ Users/PRn1/Desktop/angular% 20samples/home1.html Cross origin requestは、http、data、chrome、chrome-extension、https、chrome-extension-resourceのプロトコルスキームでのみサポートされています。私は任意のヘルプ、それをテストするためにChromeを使用していますはここAngular jsでのルーティングの問題

をいただければ幸いサンプルコードでは、これは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' 
     }); 
}); 

これは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> 

である

ですこれはHome1.html

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

これはこれはcontactus.html

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

答えて

1

サーバーから起動し、それをあるAboutus.html

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

です。角の始点からの要求は許容されません。つまり、ファイルをダブルクリックして、それがうまくいくことを期待しているだけでは、意味がありません。 小さなサーバーをインストールします。 Live-serverは私が使っているものです。

1

あなたはこのファイルのように、ローカルファイルをロードすることはできません:/// C:/ ...あなたがHTTPを使用する必要があります://代わりに。 http-serverを見ると、すぐにサーバーを起動できます。