3

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?

jh_
  • 411
  • 2
  • 5
  • 9
  • The only js file that you've included is MainController.js. Does is it include the definition of MyApp? Can you post the controller? – jbrown Jul 11 '16 at 18:11
  • attach the js script in your question, for better analysis – b0nn13 Jul 11 '16 at 18:04

2 Answers2

2

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

More Info:

Community
  • 1
  • 1
Aminadav Glickshtein
  • 23,232
  • 12
  • 77
  • 117
  • Thank you, this was exactly what I needed. I am on a Mac and the terminal open /Applications/Google\ Chrome.app --args --allow-file-access-from-files worked great. – jh_ Jul 12 '16 at 16:06
  • Don't do this! You're opening your machine to attacks. Instead run a local server. That flag is dangerous!! Leaves your file system open for access. Documents originating from anywhere, local or web, should not, by default, have any access to local file:/// resources. – Johnny May 21 '19 at 08:14
1

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.

mrkaluzny
  • 31
  • 1
  • 6