1

Created a very simple Angular ui-router files to test, I found out "templateUrl" ('contact' state in my example code) in the stateProvider not working with Chrome and IE, but works for Firefox, however, 'template'('home' state in my example code) property works in Chrome/IE/Firefox.

My test project only contains two html files under same folder:

index.html

<html>
<head>
    <script src="http://unpkg.com/angular@1.5/angular.js"></script>
    <script src="http://unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js"></script>
</head>

<body ng-app="main-app">
    <a ui-sref="home">Home</a>
    <a ui-sref="contact">Contact</a>
  </br>
    <ui-view></ui-view>
</body>
<script>
    var myApp = angular.module('main-app', ['ui.router']);
    myApp.config(function($stateProvider) {
        var homeState = {
            name: 'home',
            url: '/home',
            template: 'hello world!'
        }
        var aboutState = {
            name: 'contact',
            url: '/contact',
            templateUrl: 'contact.html'
        }
        $stateProvider.state(homeState);
        $stateProvider.state(aboutState);
    });
</script>

</html>

contact.html

Phone: 416-1113333
Cœur
  • 37,241
  • 25
  • 195
  • 267
Chin
  • 13
  • 2

1 Answers1

1

There is nothing wrong with your example, it seems you are trying to serve the app via file:// protocol but browsers like Chrome does not allow XHR calls when using the file:// protocol.

Here is the same example accessible via the HTTP server that works identically across browsers.

Another options would be:

  • embed templates in your index.html file using the <script> directive: http://docs.angularjs.org/api/ng.directive:script so your templates are downloaded with the main HTML file and it is no longer necessary to load them via XHR
  • change browser settings to allow XHR calls over the file:// protocol. For example, for Chrome follow this answer for a more details
Community
  • 1
  • 1
Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • 1
    Thanks Vadim!!! It works as exactly what you said. 1. Via a HTTP server(e.g. nodejs express). 2. OR keep accessing with file:// protocal, start chrome with parameter: --allow-file-access-from-files, e.g "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files – Chin Dec 10 '16 at 23:36