已实现的angularjs项目用requirejs进行模块化时遇到问题
其实就是对todoMVC项目用requirejs进行模块化。原本的angularjs是分别在controller、directive、service中分别定义了一个模块来代表这三者。
下面是directive:todoFocus.js
(function () {
'use strict'
angular.module('todoFocus',[]).directive('todoFocus',function ($timeout){
return function (scope,element,attrs){
scope.$watch(attrs.todoFocus,function (newVal){
if(newVal){
$timeout(function(){
element[0].focus();
},0,false);
}
})
}
})
})()
上面就是一个directive。
之后在app.js中
(function () {
'use strict';
angular.module('todomvc', ['todoCtrl', 'todoFocus', 'todoStorage']);
})();
我用requirejs模块化之后directive变成了这样:
(function () {
'use strict'
define(['angular'],function (angular) {
angular.module('todoFocus',[]).directive('todoFocus',function ($timeout){
return function (scope,element,attrs){
scope.$watch(attrs.todoFocus,function (newVal){
if(newVal){
$timeout(function(){
element[0].focus();
},0,false);
}
})
}
})
return 'todoFocus';
})
})()
然后app.js变成了这样:
(function () {
'use strict';
require(['angular'],function (angular) {
require([
'controllers/todoCtrl',
'directives/todoFocus',
'services/todoStorage'
],function (todoCtrl,todoFocus,todoStorage) {
angular.module('todomvc',[todoCtrl,todoFocus,todoStorage]);
angular.bootstrap(document, ['todomvc']);
})
})
})();
之后打开网页发现所有的js文件都加载出来了,但是并不能实现效果。。
是不是app.js不能这么写。没怎么用过requireJS/(ㄒoㄒ)/~~
贴一下我的文件路径
下面是我的main.js
(function (win) {
'use strict';
require.config({
paths: {
angular: '../node_modules/angular/angular'
},
shim: { //专门用来配置不兼容的模块
angular: {
exports: 'angular' //输出变量名,表示这个模块外部调用时的名称
}
},
deps: ['app'] //deps数组,表示该模块依赖app模块,所以要先加载app模块
});
})(window)
感觉我的路径没啥问题呀/(ㄒoㄒ)/~~
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
模块依赖注入错误了,检查下引用路径