Question

我正在尝试使用ngInclude加载一个标题模板，这对我的所有视图都是通用的。问题是我正在使用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>

这没有给出错误但也没有显示标题视图 - 我猜是因为没有加载模板。关于我在这里缺少什么的想法？

由于

Answer 1

事实证明，我只是忘了用单引号包裹路径......

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

AngularJS使用ngInclude和RequireJS

1 个答案: