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
