Menu
I created a test.html file to try and debug this issue.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app/controllers/MainController.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<h1>{{ siteHeader }}</h1>
<div ng-include="'assets/templates/header.html'"></div>
</body>
</html>
header.html (inside of assets/templates)
<div class="jumbotron">
<img id="logo" src="assets/img/logo.png" />
<br />
<h1>{{ siteHeader }}</h1>
</div>
When I open index.html in Chrome the first {{ siteHeader }} will load the site's title. None of the content of header.html (both siteHeader and the logo PNG) loads beneath it. When I open the same index.html file in Firefox or Safari the header.html content does appear beneath the first {{ siteHeader }}.
What am I doing wrong/missing?
590
I assume that you run the file from your local hard-drive. (file://). Chrome block scripts from reading files from file origin. This why Angular not success to read the template file and include it to the page.
You have 2 solution:, the simple one is to run chrome in allow file access mode. This can help you: How to launch html using Chrome at "--allow-file-access-from-files" mode?
The another solution is to create a simple http local server, and run the site from that server. You can run this server using php, nodejs, ruby, python, or anything else. This can helps you: Run Local Server
162
Angular won't work when running from a hard drive directly. You should try using Brackets editor. It uses Live Development and through that you can easily render Angular applications without running an additional server.
25
answered Feb 15 '26 02:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
