AngularJS using ngInclude with RequireJS

Question

I'm trying to use ngInclude to load an header template which is common to all my views. Problem is I'm using RequireJS to lazy load my app.

So my code looks like:

index.html

<!doctype html>
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body ng-app="testApp">

    <header ng-include="views/common/header/header.html"></header>

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

    <script src="bower_components/requirejs/require.js" data-main="scripts/bootstrap.js"></script>
  </body>
</html>

bootstrap.js

require.config({
  paths: {
    angular: '../../bower_components/angular/angular',
    angularRoute: '../../bower_components/angular-route/angular-route',
    angularCookies: '../../bower_components/angular-cookies/angular-cookies',
    angularMocks: '../../bower_components/angular-mocks/angular-mocks',
    text: '../../bower_components/requirejs-text/text'
  },
  shim: {
    'angular' : {'exports' : 'angular'},
    'angularRoute': ['angular'],
    'angularCookies': ['angular'],
    'angularMocks': {
      deps:['angular'],
      'exports':'angular.mock'
    }
  },
  priority: [
    'angular'
  ]
});

//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';

require([
  'angular',
  'app',
  'angularRoute',
  'angularCookies'
], function(angular, app, ngRoutes, ngCookies) {
  'use strict';
  var $html = angular.element(document.getElementsByTagName('html')[0]);

  angular.element().ready(function() {
    angular.resumeBootstrap([app['name']]);
  });
});

app.js

/* global controllers:false */
define([
  'angular',
  'controllers/main',
  'common/header/HeaderModule'
], function (angular, MainCtrl, HeaderModule) {
  'use strict';

  return angular.module('testApp', [
    'testApp.controllers.MainCtrl',
    'testApp.Header',

    /*angJSDeps*/
    'ngCookies',
    'ngRoute'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });
});

HeaderModule.js

define([
  'angular',
  'common/menu/menuItems'
], function (angular, MenuItemsController) {
  'use strict';

  angular.module('testApp.Header', [])
      .controller('MenuItemsController',  MenuItemsController);
});

menuItems.js

define(['angular'], function (angular) {
  'use strict';

  angular.module('testApp.menu.controllers.MenuItemsController', [])
    .controller('MenuItemsController', function ($scope) {
      $scope.items = [
        'Menu1',
        'Menu2'
      ];
    });
});

header.html

<nav ng-controller="MenuItemsController">
  <ul>
    <li ng-repeat="item in items"><a href="">{{ item }}</a></li>
  </ul>
</nav>

This gives no error but also doesn't show the header view - I'm guessing due to the the template not being loaded. Any idea on what I'm missing here?

Thanks

Is there a reason why the ng-app directive is on the body element, but you're bootstrapping off of the html element? — Cuong Vo
– Cuong Vo, Commented Feb 9, 2014 at 16:23
I believe it's because of IE. This is based on yeoman's angular-require generator — jribeiro
– jribeiro, Commented Feb 9, 2014 at 16:26

jribeiro · Accepted Answer · 2014-02-09 17:18:13Z

3

As it turns out I just forgot to wrap the path with single quotes...

<header ng-include="'views/common/header/header.html'"></header>

answered Feb 9, 2014 at 17:18

jribeiro

3,50110 gold badges45 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

AngularJS using ngInclude with RequireJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related