2016-04-22 5 views
0

Ich benutze Winkel-und Winkel-Route. Die index.html sieht wie folgt aus:Skripte in ng-view funktioniert nicht (JQuery wird vor eckigen geladen), wenn von einer Datei referenziert

<!DOCTYPE html> 
 
<html lang="en" ng-app="Showcase"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>UCSD Showcase</title> 
 
    <base href="/showcase/"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> 
 
    <script src="routes.js"></script> 
 
    <script src="./js/bootstrap.min.js"></script> 
 
    <script src="js/initGlobalHelpers.js"></script> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="description" content="#########################################"> 
 
    <meta name="keywords" content="###############################################"> 
 
    <meta property="og:url" content="#"> 
 
    <meta property="og:site_name" content="CSES OSS"> 
 
    <meta property="og:image" content="############################################################################################"> 
 
    <meta property="og:description" content="#"> 
 
    <meta property="og:type" content="website"> 
 
    <meta name="twitter:site_name" content="CSS OSS"> 
 
    <meta name="twitter:site" content="################"> 
 
    <meta name="twitter:card" content="summary"> 
 
    <meta name="twitter:description" content="#"> 
 
    <meta name="twitter:image" content="#"> 
 
    <meta name="image" content="#"> 
 
    <link rel="stylesheet" media="all" href="./styles/style.css"> 
 
</head> 
 
<body> 
 
<ng-view></ng-view> 
 
</body> 
 
</html>

Und dann für meine Homepage, wenn ich

<h1>This is the home page</h1> 
 
<script src="home.html"></script>
bin mit

ich die eine Warnung

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/ . jquery.min.js:4

und ein Fehler

SyntaxError: Unexpected token < angular.js:13550

Allerdings, wenn ich das Skript ersetzen, die durch den Inhalt des Skripts, die wie die Suche endet im Grunde:

<h1>This is the home page</h1> 
 
<script> 
 
    console.log('Hi!'); 
 
</script>

Dann funktioniert es .

Warum passiert das und wie kann ich es beheben?

Antwort

2

Verwenden ngInclude statt html script-Tag

<div ng-include="'home.html'"></div> 

Siehe ngInclude docs here

+0

Ich versuchte dies. Hat nicht funktioniert. Ich bin immer noch verwirrt, wie dies home.js laden soll, weil die Dokumente sagen, dass es verwendet werden kann, um HTML zu injizieren (also wie können wir Javascript laden?) –