已实现的angularjs项目用requirejs进行模块化时遇到问题

发布于 2022-09-02 01:11:29 字数 2686 浏览 12 评论 0

其实就是对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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

水溶 2022-09-09 01:11:29

模块依赖注入错误了,检查下引用路径

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文