AngularJS using ngInclude with RequireJS

Я пытаюсь использовать ngInclude для загрузки шаблона заголовка, который является общим для всех моих представлений. Проблема в том, что я использую RequireJS для ленивой загрузки моего приложения.AngularJS using ngInclude with RequireJS

Так что мой код выглядит как:

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>

Это ги ves no error, но также не отображает вид заголовка - я предполагаю, что шаблон не загружается. Любая идея о том, что мне здесь не хватает?

Благодаря

источник

2014-02-09 jribeiro

есть причина, почему директива нг-приложение на элементе тела, но вы 're bootstrapping из html-элемента? –

Я считаю, что это из-за IE. Это основано на генераторе углового требования Йомена – jribeiro

Как оказался, я просто забыл, чтобы обернуть путь с одинарными кавычками ...

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

источник

2014-02-09 17:18:13 jribeiro

AngularJS using ngInclude with RequireJS

ответ

Смежные вопросы