无法让 requirejs、angularjs 和 almond 一起工作
can't get requirejs, angularjs and almond to work together
我一整天都在为这个问题苦苦挣扎,好像只有我一个人有这个问题。
编译前一切正常,甚至在没有设置的情况下编译:
almond: true,
wrap: true,
即使使用这些设置,grunt 仍然可以正常运行。但是 angular 永远不会 bootstrapped!
如果我尝试通过以下方式在控制台中手动 bootstrap 它:
angular.bootstrap(文档,['wtvApp']);
它returns
Error: [$injector:modulerr] Failed to instantiate module wtvApp due to: Error: [$injector:nomod] Module 'wtvApp' is not available!
我希望能够提供单个文件而不是:
<script data-main="scripts/main" src="components/requirejs/require.js"></script>
我的 grunt.js 配置:(为了简化而删除了一些路径)
requirejs: {
dist: {
options: {
baseUrl: 'app/scripts',
name: '../components/almond/almond.js',
include: ['main.js'],
out: 'dist/scripts/main.js',
mainConfigFile: "app/scripts/main.js",
optimize: 'uglify2',
generateSourceMaps: true,
preserveLicenseComments: false,
useStrict: true,
wrap: true,
almond: true,
findNestedDependencies: true
}
}
},
main.js
require.config({
paths: {
jquery: '../components/jquery/dist/jquery',
angular: '../components/angular/angular',
modernizr: "../components/foundation/js/vendor/custom.modernizr",
async: "../components/async/lib/async",
underscore: "../components/underscore/underscore",
gapi: "https://apis.google.com/js/client.js?onload=load",
foundation: '../components/foundation/js/foundation/foundation',
foundationDatePicker: '../components/foundation-datepicker/js/foundation-datepicker',
ngCookies: '../components/angular-cookies/angular-cookies',
ngSanitize: '../components/angular-sanitize/angular-sanitize',
ngRoute: '../components/angular-route/angular-route',
services: '../scripts/services',
fixedservices: '../scripts/fixedservices',
controllers: '../scripts/controllers',
filters: '../scripts/filters',
resources: '../scripts/resources',
animations: '../scripts/animations',
directives: '../scripts/directives',
wtvApp: '../scripts/app',
},
shim: {
jquery: {
exports: '$'
},
angular: {
deps: ['jquery'],
exports: 'angular'
},
modernizr: { deps: ['jquery'] },
async: {
exports: 'async'
},
underscore: {
exports: '_'
},
foundation: { deps: ['jquery', 'modernizr'] },
foundation_orbit: { deps: ["foundation"] },
foundationDatePicker: { deps: ["foundation"] },
dante: { deps: ["jquery", "underscore", "sanitize"] },
ngCookies: { deps: ['angular'] },
ngSanitize: { deps: ['angular'] },
ngRoute: { deps: ['angular'] },
ngResource : { deps: ['angular'] },
ngAnimate : { deps: ['angular'] },
snap: { deps: ['angular'] },
ngSnap: { deps: ['angular', 'snap'] },
wtvApp: { deps: ['angular', 'foundation', 'ngCookies', 'ngSanitize', 'ngRoute', 'ngResource', 'ngAnimate' ] },
},
priority: [
'jquery',
'angular'
]
});
window.name = "NG_DEFER_BOOTSTRAP!";
define([
'jquery',
'angular',
'async',
'modernizr',
'underscore',
'gapi',
'wtvApp',
],
function ($, angular, async, modernizr,underscore) {
'use strict';
//when everything is loaded run wtvApp
$( document ).ready(function() {
angular.bootstrap(document, ['wtvApp']);
});
}
);
app.js
'use strict';
define('wtvApp',['jquery',
'angular',
'async',
], function () {
var wtvApp = angular.module( 'marketApp', [
'ngRoute',
'ngAnimate'
]);
wtvApp.config(
['$routeProvider',
function ($routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
//CART
.when('/cart',{
templateUrl: 'views/frontdesk/cart.html',
})
.when('/card',{
templateUrl: 'views/frontdesk/card.html',
})
//REDIRECT TO HOME
.otherwise({
redirectTo: '/'
});
}]);
wtvApp.run(['$route', '$location', '$rootScope', function ($route, $location, $rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation();
});
}])
return wtvApp;
});
您定义:
angular.module( 'marketApp', [
和Bootstrap:
angular.bootstrap(document, ['wtvApp']);
angular.bootstrap 取一个 DOM 节点和模块的 name。
你应该 bootstrap 如下:
angular.bootstrap(document, ['marketApp']);
解决了!!!
requirejs: {
dist: {
options: {
baseUrl: 'app/scripts',
include: ['main.js'],
out: 'dist/scripts/main.js',
mainConfigFile: "app/scripts/main.js",
optimize: "uglify2",
preserveLicenseComments: false,
generateSourceMaps: true,
useStrict: true,
almond: true,
wrap: true,
insertRequire: ['main.js'], // <-- added this
findNestedDependencies: true
}
}
},
经过深思熟虑,我终于找到了如何让它按照我想要的方式工作。
requirejs: {
compile: {
options: {
baseUrl: '.',
out: distDir + 'js/production.js',
name: bowerDir + 'almond/almond',
include: 'main',
mainConfigFile: 'main.js', // Ensures paths specified in requirejs.config are available
optimize: 'uglify2', // none / uglify2
uglify2: {
//Example of a specialized config. If you are fine
//with the default options, no need to specify
//any of these properties.
output: {
beautify: false // switch to true to see the full output
},
compress: {
sequences: false,
global_defs: {
DEBUG: false
}
},
warnings: true,
mangle: false // THIS is the main culprit as this does mess with angular modules
},
preserveLicenseComments: false,
generateSourceMaps: true,
useStrict: true,
almond: true,
wrap: true,
insertRequire: ['main'], // <-- added this
findNestedDependencies: true
}
}
},
我一整天都在为这个问题苦苦挣扎,好像只有我一个人有这个问题。
编译前一切正常,甚至在没有设置的情况下编译:
almond: true,
wrap: true,
即使使用这些设置,grunt 仍然可以正常运行。但是 angular 永远不会 bootstrapped! 如果我尝试通过以下方式在控制台中手动 bootstrap 它:
angular.bootstrap(文档,['wtvApp']);
它returns
Error: [$injector:modulerr] Failed to instantiate module wtvApp due to: Error: [$injector:nomod] Module 'wtvApp' is not available!
我希望能够提供单个文件而不是:
<script data-main="scripts/main" src="components/requirejs/require.js"></script>
我的 grunt.js 配置:(为了简化而删除了一些路径)
requirejs: {
dist: {
options: {
baseUrl: 'app/scripts',
name: '../components/almond/almond.js',
include: ['main.js'],
out: 'dist/scripts/main.js',
mainConfigFile: "app/scripts/main.js",
optimize: 'uglify2',
generateSourceMaps: true,
preserveLicenseComments: false,
useStrict: true,
wrap: true,
almond: true,
findNestedDependencies: true
}
}
},
main.js
require.config({
paths: {
jquery: '../components/jquery/dist/jquery',
angular: '../components/angular/angular',
modernizr: "../components/foundation/js/vendor/custom.modernizr",
async: "../components/async/lib/async",
underscore: "../components/underscore/underscore",
gapi: "https://apis.google.com/js/client.js?onload=load",
foundation: '../components/foundation/js/foundation/foundation',
foundationDatePicker: '../components/foundation-datepicker/js/foundation-datepicker',
ngCookies: '../components/angular-cookies/angular-cookies',
ngSanitize: '../components/angular-sanitize/angular-sanitize',
ngRoute: '../components/angular-route/angular-route',
services: '../scripts/services',
fixedservices: '../scripts/fixedservices',
controllers: '../scripts/controllers',
filters: '../scripts/filters',
resources: '../scripts/resources',
animations: '../scripts/animations',
directives: '../scripts/directives',
wtvApp: '../scripts/app',
},
shim: {
jquery: {
exports: '$'
},
angular: {
deps: ['jquery'],
exports: 'angular'
},
modernizr: { deps: ['jquery'] },
async: {
exports: 'async'
},
underscore: {
exports: '_'
},
foundation: { deps: ['jquery', 'modernizr'] },
foundation_orbit: { deps: ["foundation"] },
foundationDatePicker: { deps: ["foundation"] },
dante: { deps: ["jquery", "underscore", "sanitize"] },
ngCookies: { deps: ['angular'] },
ngSanitize: { deps: ['angular'] },
ngRoute: { deps: ['angular'] },
ngResource : { deps: ['angular'] },
ngAnimate : { deps: ['angular'] },
snap: { deps: ['angular'] },
ngSnap: { deps: ['angular', 'snap'] },
wtvApp: { deps: ['angular', 'foundation', 'ngCookies', 'ngSanitize', 'ngRoute', 'ngResource', 'ngAnimate' ] },
},
priority: [
'jquery',
'angular'
]
});
window.name = "NG_DEFER_BOOTSTRAP!";
define([
'jquery',
'angular',
'async',
'modernizr',
'underscore',
'gapi',
'wtvApp',
],
function ($, angular, async, modernizr,underscore) {
'use strict';
//when everything is loaded run wtvApp
$( document ).ready(function() {
angular.bootstrap(document, ['wtvApp']);
});
}
);
app.js
'use strict';
define('wtvApp',['jquery',
'angular',
'async',
], function () {
var wtvApp = angular.module( 'marketApp', [
'ngRoute',
'ngAnimate'
]);
wtvApp.config(
['$routeProvider',
function ($routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
//CART
.when('/cart',{
templateUrl: 'views/frontdesk/cart.html',
})
.when('/card',{
templateUrl: 'views/frontdesk/card.html',
})
//REDIRECT TO HOME
.otherwise({
redirectTo: '/'
});
}]);
wtvApp.run(['$route', '$location', '$rootScope', function ($route, $location, $rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation();
});
}])
return wtvApp;
});
您定义:
angular.module( 'marketApp', [
和Bootstrap:
angular.bootstrap(document, ['wtvApp']);
angular.bootstrap 取一个 DOM 节点和模块的 name。 你应该 bootstrap 如下:
angular.bootstrap(document, ['marketApp']);
解决了!!!
requirejs: {
dist: {
options: {
baseUrl: 'app/scripts',
include: ['main.js'],
out: 'dist/scripts/main.js',
mainConfigFile: "app/scripts/main.js",
optimize: "uglify2",
preserveLicenseComments: false,
generateSourceMaps: true,
useStrict: true,
almond: true,
wrap: true,
insertRequire: ['main.js'], // <-- added this
findNestedDependencies: true
}
}
},
经过深思熟虑,我终于找到了如何让它按照我想要的方式工作。
requirejs: {
compile: {
options: {
baseUrl: '.',
out: distDir + 'js/production.js',
name: bowerDir + 'almond/almond',
include: 'main',
mainConfigFile: 'main.js', // Ensures paths specified in requirejs.config are available
optimize: 'uglify2', // none / uglify2
uglify2: {
//Example of a specialized config. If you are fine
//with the default options, no need to specify
//any of these properties.
output: {
beautify: false // switch to true to see the full output
},
compress: {
sequences: false,
global_defs: {
DEBUG: false
}
},
warnings: true,
mangle: false // THIS is the main culprit as this does mess with angular modules
},
preserveLicenseComments: false,
generateSourceMaps: true,
useStrict: true,
almond: true,
wrap: true,
insertRequire: ['main'], // <-- added this
findNestedDependencies: true
}
}
},