Angularjs Beispiel funktioniert nicht in codepen und in lokaler Umgebung

<!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>

Der obige Ausschnitt aus http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing kopiert wird, sein dort arbeiten, aber wenn in codepen http://codepen.io/anon/pen/oYMrwy kopiert und seine Arbeit nicht. Fehle ich etwas?Angularjs Beispiel funktioniert nicht in codepen und in lokaler Umgebung

Quelle

2016-12-11 Ron Woltz

Haben Sie auch die Vorlagen? (main.html, etc ...) –

Nein Ich habe nicht die Vorlagen –

Ich habe blue.htm hinzugefügt noch funktioniert es nicht ... –

Nun ... versuchen Sie diesen Code stattdessen. Ich habe alle fehlenden Vorlagen durch Inline-Vorlagen ersetzt. Sie vermissen einfach die Dateien.

<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>

Quelle

2016-12-11 11:20:53

Aber ich möchte TemplateUrl verwenden. –

dann haben Sie alle HTML-Dateien an Ort und Stelle. Sie müssen main.html, red.html, blue.html und green.html gefunden haben. Dieses Snipset zeigt nur, dass Ihr Routing in Ordnung ist. –

Ich probierte es lokal, es kommt nicht –

Angularjs Beispiel funktioniert nicht in codepen und in lokaler Umgebung

Antwort

Verwandte Themen