Ich habe eine einfache Seite mit AngularJs erstellen. Wenn ich versuche, header.htm in index.html einzubinden, erscheint nichts im Browser.ng-include funktioniert nicht
index.html
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="">
<div ng-include="'views/header.htm'"></div>
</div>
</body>
</html>
header.htm
<h1>Header</h1>
Willkommen an Bord! Bitte stellen Sie einige Protokolle bereit, damit wir die Situation besser kennen. Überlegen Sie auch, How to Ask zu lesen.
Sie können Konsole Fehler in zeigen ...
Alt+CMD+J auf Mac OS, mit (nehme ich an) Ctrl+Alt+J auf WindowsAlt+CMD+K auf Mac OS , mit (ich nehme an) Ctrl+Alt+K unter WindowsNun zu meiner Antwort: Sie fordern views/header.htm so Ihre Dateistruktur wie folgt aussehen muss:
- index.html
- views
- header.htm
Ihre Website lokal zu testen, ein Tool wie http-server verwenden. Oder wenn Sie auf einem Mac oder Unix-basierten Computer arbeiten, können Sie einfach python -m SimpleHTTPServer in Ihrem Projektverzeichnis ausführen.
Hoffnung, die geholfen hat.
Dank bro Ich habe das versucht, bekomme ich einen Fehler in der Konsole angular.js: 12587 XMLHttpRequest kann Datei nicht laden: // /D:/angular/project/views/header.html. Cross-Ursprungsanforderungen werden nur für Protokollschemata unterstützt: http, data, chrome, chrome-extension, https. –
Ah, ich verstehe. Das Problem ist, dass Ihr Browser das Laden von lokalen Dateien durch Javascript nicht erlaubt. Um dies zu verhindern, verwenden Sie [http-server] (https://www.npmjs.com/package/http-server). Dieser Fehler sollte nicht mehr auftreten, wenn Sie dieses Tool verwenden oder wenn Sie es auf einen Server hochladen. – lumio
Wenn Sie Linux verwenden, versuchen Sie, zu Ihrem Projektverzeichnis zu navigieren und führen Sie den folgenden Befehl aus: 'python -m SimpleHTTPServer' – HARI
Sie haben Ihre Ordnerstruktur und mehr nicht über die Definition von header.html angezeigt. Versuchen Sie beim nächsten Mal, MCVE zu erstellen.
Ich habe eine fiddle erstellt, um zu zeigen, wie es funktioniert.
<div ng-controller="Ctrl">
<div ng-include ="'header.html'" onload='myFunction()'></div>
</div>
<!-- header.html -->
<script type="text/ng-template" id="header.html">
Content of Header html
</script>
function Ctrl($scope) {
$scope.myFunction = function() {
alert('header loaded');
}
}
Fehler in der Browserkonsole? –
Hope 'index.html' und der' views'-Ordner befinden sich auf der gleichen Ebene.Syntax weise sieht es gut aus –