angular.js例がcodepenでは、地域の環境

<!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="#red">Red</a> 
<a href="#green">Green</a> 
<a href="#blue">Blue</a> 

<div ng-view></div> 

<script> 
var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     templateUrl : "main.htm" 
    }) 
    .when("/red", { 
     templateUrl : "red.htm" 
    }) 
    .when("/green", { 
     templateUrl : "green.htm" 
    }) 
    .when("/blue", { 
     templateUrl : "blue.htm" 
    }); 
}); 
</script> 

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p> 
</body> 
</html>

これ以上のスニペットはcodepen http://codepen.io/anon/pen/oYMrwyにコピー＆ペーストするときにそのそこで働くが、その動作していない、http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routingからコピーさで働いていません。何か不足していますか？angular.js例がcodepenでは、地域の環境

出典

2016-12-11 Ron Woltz

テンプレートもありますか？（main.htmlなど） –

いいえ私はテンプレートを持っていません –

blue.htmをまだ追加していません... –

まあ、代わりにこのコードを試してください。不足しているテンプレートをすべてインラインテンプレートに置き換えました。あなたは単にファイルが不足しています。

<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="#red">Red</a> 
<a href="#green">Green</a> 
<a href="#blue">Blue</a> 

<div ng-view></div> 

<script> 
var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/", { 
     template : "main" 
    }) 
    .when("/red", { 
     template : "red" 
    }) 
    .when("/green", { 
     template : "green" 
    }) 
    .when("/blue", { 
     template : "blue" 
    }); 
}); 
</script> 

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p> 
</body> 
</html>

出典

2016-12-11 11:20:53

しかし、templateUrlを使用したいと思います。 –

は、すべてのhtmlファイルを適所に持っています。 main.html、red.html、blue.html、green.htmlが必要です。このスニペットは、ルーティングが正常であることを示しています。 –

私はそれをローカルで試しましたが、それは来ていません –

angular.js例がcodepenでは、地域の環境

答えて

関連する問題