AngularJS UI Router shows blank page with templateUrl

Question

I'm trying to split my application to views and starting out with Angular UI Router. I'm creating multiple views and if I use 'template', it prints fine, but when I use templateUrl with an external .html-file, I only get a blank page.

HTML:

<!DOCTYPE html>
<head>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>

<script src="searchApp.js"></script>

</head>

<body ng-app="searchApp">
<div ui-view>
</div>
</body>
</html>

searchApp.js:

var searchApp = angular.module('searchApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('index', {
    url: "/",
    views: {
      '': {
        templateUrl: 'testView.html'
      }
    }
  });

  $urlRouterProvider.otherwise('/');
}])

testView.html

This is a test.

Here's a Plunkr: https://plnkr.co/edit/4xQaHbx71mUNYRbTQntz

EDIT: This seems to work in Plunker, but doesn't work locally on my computer. Tried both on mac and win.

EDIT 2: All I can make of it is that UI Router templateUrl parameter doesn't work when ran straight from the File system but maybe needs a server to be able to open files? Is this so? Any way around it?

EDIT 3: SOLUTION: Seems that the page needs to be run through a server and not straight from file system when using templateUrl (or including any files in general) since they are fetched via Ajax. So - to use templateUrl, you must install a server on your local machine or continue coding on a server instead.

A server must be used with ui-router, since the template pages are fetched via ajax. — Claies

Robin-Hoodie Robin-Hoodie · Accepted Answer · 2016-05-22T20:04:32

This had nothing to do with UI-router, since an error was thrown that angular could not be found. You were using the wrong URL for loading Angular. Changing

"http://ajax.googleapis.com/ajax/libs/angularjs/...

to

https://ajax.googleapis.com/ajax/libs/angularjs/...

made things work.

https://plnkr.co/edit/rSbD4FBIFsnamiaMQLve?p=preview

AngularJS UI Router shows blank page with templateUrl

1 Answers