current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have began learning AngularJS and decided to go with Angular-UI-Router for all of my routing needs, but unfortunately, I am unable to get the templateURL property of the $stateProvider to render. I have followed tutorials to the world's end, and cannot get templateURL to work (even when following the tutorial). Am I missing something?

All of the following documents are located within the same directory. I am opening the webpage directly in Chrome (I am not combining with node/express or any other service).

index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="app">

<nav>
<a ui-sref="home">Home</a>
<a ui-sref="about">About</a>
</nav>

<div ui-view></div>

</body>
</html>

app.js

var app = angular.module('app', ['ui.router']).

config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('home', {url: '/home', template: '<h1>HOME</h1>'})
        .state('about', {url: '/about', templateURL: 'about.html'});

}]);

about.html

<div><p>About</p></div>
share|improve this question
1  
Pretty sure the property name is templateUrl (case sensitive) –  Phil Sep 2 '14 at 1:45
    
This is the correct answer and I would vote on it if it was posted that way. Javascript is case-sensitive. –  Chad Robinson Sep 2 '14 at 2:25
    
Changed templateURL to templateUrl –  user3827533 Sep 2 '14 at 3:20
1  
If you're opening the page "directly in chrome" it sounds like you're opening it via the file:// protocol. Angular will try to fetch the template via http:// and that won't work due to browser security settings. Try setting up a webserver. –  ivarni Sep 2 '14 at 4:56
    
@ChadRobinson Just vote to close as a typo. –  Phil Sep 2 '14 at 5:08

1 Answer 1

up vote 0 down vote

You are almost there. Here is a working plunker you can use for testing.

The documentation for:

$stateProvider.state(stateName, stateConfig) (cite)

template, templateUrl, templateProvider

Three ways to set up your templates. Only use one per state (or view, see below)!

  • template String HTML content, or function that returns an HTML string
  • templateUrl String URL path to template file OR Function, returns URL path string
  • templateProvider Function, returns HTML content string

So, this is the updated state def:

$stateProvider
    .state('home', {url: '/home', template: '<h1>HOME</h1>'})
    .state('about', {url: '/about', templateUrl: 'about.html'});

Also, we can use the $urlRouterProvider.otherwise() to init some existing state:

// no state iwth url:'/' at the moment
// $urlRouterProvider.otherwise('/');
// init ui-router's existing state on "unknown" url
$urlRouterProvider.otherwise('/home');

Try to obaserve it here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.