CODEWITHSUNDEEP
angularjs
sezertunca
sezertunca

Reputation: 47

Angular JS route and directives, templateURL doesn't work

I am having an issue using templateURL.

I have the following code

  <!DOCTYPE html>
<html ng-app="testApp">
<head>
    <title>Angular Demo</title>
</head>
<body>  
<div class="container">
    <ul class="nav nav-pills">
        <li><a href="#/">Home</a></li>
        <li><a href="#/about">About</a></li>
    </ul>
</div>
<div ng-view>
</div>
<script src="scripts/libraries/angular.min.js"></script>
<script src="scripts/libraries/angular-route.min.js"></script>
<script type="text/javascript">
    var testApp = angular.module("testApp", ['ngRoute']);
    testApp.config(function($routeProvider) 
    {
    $routeProvider
    .when('/',
    {
    controller: 'TestController',
    template: '<h1>HOME</h1>'
    })
    .when('/about',
    {
    controller: 'TestController',
    templateURL: 'partials/about.html'
    })
    .otherwise ({redirectTo: '/'});    
    });

    var controllers = {};

    controllers.TestController = function($scope)
    {
    $scope.list = 
    [
    {fname: "John", sname: "Doe"},
    {fname: "John", sname: "Doe"}
    ];
    };

    testApp.controller(controllers);

</script>
</body>
</html>

about.html is in partials folder

template: "HOME" works fine, but templateURL doesn't bind the content of about.html to ng-view.

Let me know if you think I'm missing anything.

Thanks

Upvotes: 1

Views: 1544

Answers (1)

j.wittwer
j.wittwer

Reputation: 9497

Use
templateUrl: 'partials/about.html'

Not
templateURL: 'partials/about.html'

http://plnkr.co/LzYn0IxRtkV1xoKpcg5z

Upvotes: 2

Related Questions