2016-11-30 6 views
0

私はw3schoolsのチュートリアルを行っていますが、そのスニペットの1つをコピーしました。ブラウザでページを表示しようとすると、読み込むのに30分かかります。また、機能は単に機能していません。このコードはw3schoolsでのみ動作するようです。彼らはcdnを提供しています(古いですが、まだ動作するはずです)。どんな支援も大歓迎です。ページは、GoogleのCDNからの角度のコアをダウンロードする必要があるとしてAngularjsが動作しないとページの読み込みが遅すぎる

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
 

 
<body ng-app="myApp"> 
 

 
<p><a href="#/">Main</a></p> 
 

 
<a href="#banana">Banana</a> 
 
<a href="#tomato">Tomato</a> 
 

 
<p>Click on the links to change the content.</p> 
 

 
<p>The HTML shown in the ng-view directive are written in the template property of the $routeProvider.when method.</p> 
 

 
<div ng-view></div> 
 

 
<script> 
 
var app = angular.module("myApp", ["ngRoute"]); 
 
app.config(function($routeProvider) { 
 
    $routeProvider 
 
    .when("/", { 
 
        template : "<h1>Main</h1><p>Click on the links to change this content</p>" 
 
    }) 
 
    .when("/banana", { 
 
        template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" 
 
    }) 
 
    .when("/tomato", { 
 
        template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

+0

正式な角のウェブサイトに従うことをお勧めします。彼らは素晴らしいチュートリアルを持っています。 – abhishekkannojia

+0

ありがとうございました。 :) – thetekkenmaster

+0

'ngRoute'スクリプトのインクルードがありませんhttps: – Laazo

答えて

1

ロード時間は、ネットワーク接続が原因です。それをローカルにロードして解決するかもしれません。

はしかし、私はあなたがそのようなコードを持って気づいた:

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

だから私はどのようにあなたのHTMLを訪問している、思ったんだけど?あなたはローカルホストサーバーを持っていますか、またはfile:///プロトコルを介して直接ですか?

回答が後である場合は、角度ルータのURLがfile:///プロトコル(これは404と推測される)のように自動的にプレフィックスされる可能性があるため、確かに動作しません。

+0

ありがとう!私はファイルプロトコルで自分のhtmlを見てきました。あなたが私のためにその部分を説明してくれてうれしいです。私はまだ初心者です。 – thetekkenmaster

+0

@thetekkenmaster次に、localhostにdevサーバを設定する方法を学ぶ必要があります。 AJAXを開発したい場合にも必要です。 – Leo

+0

私は助けていただきありがとうございます。私はlocalhost上でそれを見る方法を考え出した。私はxamppをダウンロードしました。すべてがうまくいきます。 – thetekkenmaster

0

使用した角度経路ファイルが無効です。有効なcdn URLを使用してください

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script> 
関連する問題