Juhana Pietari Lehtiniemi Juhana Pietari Lehtiniemi - 6 months ago 133
AngularJS Question

AngularJS UI Router shows blank page with templateUrl

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.

Answer

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