AngularAMD無法讀取未定義的屬性“ bootstrap”

Question

我正在嘗試使用AngularAMD（帶有AngularJs的Requirejs實現）設置我的angularjs應用程序，但是有時我得到

無法讀取未定義的屬性“ bootstrap”（…）

main.js

 require.config({ paths: { //Angular 'angular': '/bower_components/angular/angular', 'angular-route': '/bower_components/angular-route/angular-route.min', 'angularAMD': '/bower_components/angularAMD/angularAMD.min', 'angular-slick': '/bower_components/angular-slick/dist/slick.min', 'angular-sanitize': '/bower_components/angular-sanitize/angular-sanitize', //Plugins 'jquery': '/bower_components/jquery/dist/jquery', 'materialize': '/bower_components/Materialize/dist/js/materialize.min', 'jquery-hammer': '/bower_components/Materialize/js/jquery.hammer', 'hammerjs': '/bower_components/Materialize/js/hammer.min', 'parallax': '/bower_components/parallax.js/parallax.min', 'slick': '/bower_components/slick-carousel/slick/slick.min', 'domReady': '/bower_components/requirejs/domReady', //Controllers 'HomeController': 'Components/Home/home.controller', }, shim: { angular: { exports: "angular", }, 'angular-route': ['angular'], 'angularAMD': ['angular'], 'angular-slick': ['angular', 'slick'], 'angular-sanitize': ['angular'], 'materialize': ['jquery', 'jquery-hammer', 'hammerjs'], 'parallax': ['jquery'], }, baseUrl: "src", deps: ['app'] }); }); 

app.js

 define(['angularAMD', 'angular-route', 'angular-sanitize', 'angular-slick'], function(angularAMD) { var app = angular.module("app", ['ngRoute', 'ngSanitize', 'slick']); app.config(function($routeProvider, $locationProvider) { $routeProvider.when("/", angularAMD.route({ templateUrl: 'views/Home/home.html', controller: 'HomeController', controllerAs: 'vm' })); $locationProvider.html5Mode(true); }); return angularAMD.bootstrap(app); }); 

我嘗試了許多不同的方法，但是似乎都沒有用，我在做什么錯？

注意：僅在頁面加載時才會發生。

Answer 1

好吧，由於我刪除了上一個問題，因此能夠解決此問題。 第一：這可能是我的神經症，但是在您的path數組之前添加baseUrl。

第二：（在您的app.js中），而不是

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when("/", angularAMD.route({
      templateUrl: 'views/Home/home.html',
      controller: 'HomeController',
      controllerAs: 'vm'
    }));
    $locationProvider.html5Mode(true);
  });
 return angularAMD.bootstrap(app);

做這個：

var app = angular.module("app", ['ngRoute', 'ngSanitize', 'slick']);
app.init = function () {
   angular.bootstrap(document, ['app']);
};
return app;

這會將其加載到DOM。 如果您有多個控制器，請執行以下操作。

require.config({
  baseUrl: "src",
  paths: {
    //Angular
    'angular': '/bower_components/angular/angular',
    'angular-route': '/bower_components/angular-route/angular-route.min',
    'angularAMD': '/bower_components/angularAMD/angularAMD.min',
    'angular-slick': '/bower_components/angular-slick/dist/slick.min',
    'angular-sanitize': '/bower_components/angular-sanitize/angular-sanitize',

    //Plugins
    'jquery': '/bower_components/jquery/dist/jquery',
    'materialize': '/bower_components/Materialize/dist/js/materialize.min',
    'jquery-hammer': '/bower_components/Materialize/js/jquery.hammer',
    'hammerjs': '/bower_components/Materialize/js/hammer.min',
    'parallax': '/bower_components/parallax.js/parallax.min',
    'slick': '/bower_components/slick-carousel/slick/slick.min',
    'domReady': '/bower_components/requirejs/domReady',
  },
  shim: {
    jquery: { exports: '$' },
    angular: {
      exports: "angular",
    },
    'angular-route': {
      deps: ['angular'],
      exports: 'angular'
    },
    'angularAMD': {
      deps: ['angular'],
      exports: 'angular'
    },
    'angular-slick': ['angular', 'slick'],
    'angular-sanitize':  {
      deps: ['angular'],
      exports: 'angular'
    },
    'materialize': ['jquery', 'jquery-hammer', 'hammerjs'],
    'parallax': ['jquery'],
  },
  deps: ['app']
});
require(['app', 'other_controller', 'other_controller'], function(app) {
  app.init();
});

最后請確保您的html中沒有ng-app。