AngularJS - simple partial not loading

Question

I'm unable to get my partial to load with angular 1.3. I've seen the common mistakes such as not loading angular-route.js, or specifying 'ngRoute' in my app module. I don't see any errors in the console. I've looked at all the 'partials not loading' posts, and they don't seem to apply here. Any idea what's going on here? Thanks!

index.html

<html ng-app="App">
<head></head>
<body ng-controller="MainController">

<div ng-view=""></div>

<script src="scripts/angular/angular.js"></script>
<script src="scripts/angular/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<body>
</html>

app.js

(function() {
var app = angular.module('App', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', 
            {
                controller: 'MainController',
                templateURL: './partials/test.html'
            })
        .otherwise({ redirectTo: '/' });
    });

}());

controllers.js

(function() {
    var MainController = function ($scope) {
        $scope.model = {
            message: 'Aaarrrgh!'
        };
    };
    MainController.$inject = ['$scope'];
    angular.module('App').controller('MainController',  MainController);    
}());

test.html (my partial)

<h1>{{model.message}}</h1>

Where I should see my content, I see an html comment:

<!-- ngView: -->

inspect the actual ajax request in network tab of console...see what clues it can give you — charlietfl
– charlietfl, Commented Oct 30, 2014 at 0:36
Using ng-controller with ng-view seems wrong. Just remove the ng-controller attribute from your <body> tag — Phil
– Phil, Commented Oct 30, 2014 at 0:41
To be clear, using ng-controller on a parent of an ng-view is not wrong. It's a very common implementation most often seen when you need an application level controller that is independent of whatever the active view is. In this example though, $routeProvider is already configured to inject MainController into the view, so the ng-controller="MainController" on the <body> tag seems redundant. — user2943490
– user2943490, Commented Oct 30, 2014 at 3:19

New Dev · Accepted Answer · 2014-10-30 03:46:00Z

2

Rename templateURL to templateUrl

answered Oct 30, 2014 at 3:46

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - simple partial not loading

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related