[英]Cannot read property 'offsetWidth' of undefined with Bootstrap Carousel
[英]AngularAMD cannot read property 'bootstrap' of undefined
我正在尝试使用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); });
我尝试了许多不同的方法,但是似乎都没有用,我在做什么错?
注意:仅在页面加载时才会发生。
好吧,由于我删除了上一个问题,因此能够解决此问题。 第一:这可能是我的神经症,但是在您的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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.