AngularJS ng-view not loading template file content

Question

I'm trying to set up a demo angular app but for some reason my partial (partials/test.html) content isn't loading into the layout file. Here's the index.html:

<!DOCTYPE html>
<html lang="en" ng-app="btq">
   <head>
      <meta charset="utf-8" />
      <title>NgView Test</title>
   </head>
   <body>
      <p>Some stuff on the page.</p>
      <div ng-view></div>
      <script src="js/angular.js"></script>
      <script src="js/app.js"></script>
   </body>
</html>

AngularJS is version 1.0.7. app.js contains the following:

'use strict';

// Declare app level module which depends on filters, and services
angular.module('btq', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/dashbaord', {templateUrl: 'partials/test.html', controller: 'DashboardCtrl'});
    $routeProvider.otherwise({redirectTo: '/dashboard'});
  }]);

/* Controllers */

angular.module('btq.controllers', []).
  controller('DashboardCtrl', [function() {

  }]);

I'm obviously missing something simple. Any help would be appreciated!

Ivan Chernykh · Accepted Answer · 2013-06-09 09:01:30Z

2

May be its because of "typo". You wrote "dashbaord" instead of "dashboard" here:

$routeProvider.when('/dashbaord' , ...

answered Jun 9, 2013 at 9:01

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

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

1 Comment

novon Over a year ago

There was definitely a typo, can't believe I didn't catch that. Thanks!

Dan · Accepted Answer · 2013-06-09 18:35:16Z

1

Change

angular.module('btq.controllers', [])

to

angular.module('btq')

otherwise this creates a second app in your app.js

edited Jun 9, 2013 at 18:35

answered Jun 9, 2013 at 9:07

Dan

63.5k18 gold badges113 silver badges122 bronze badges

3 Comments

novon Over a year ago

Doing so causes the partial content to not load. Leaving it as btw.controllers loads the partial content but also throws a Error: Argument 'DashboardCtrl' is not a function, got undefined

novon Over a year ago

Ah I see whats wrong, I needed to pass btq.controllers to the btq module like so: angular.module('btq', ['btq.controllers'])

Dan Over a year ago

That will work. That way you create two modules and inject the second module as a dependency in the first. Another option is to use one module for both. See my update, there was a typo in my answer. The second [] should not have been there.

Collectives™ on Stack Overflow

AngularJS ng-view not loading template file content

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related