Question

我正在使用AngularJS构建应用程序。该环境中已经嵌入了几个模块，其中一些我可以使用require很好地加载。我正在尝试添加一本新颖的书，但步骤不正确。

模块为color-picker.js：https://github.com/Alberplz/angular-colorpicker-directive

这是我正在尝试的方法，但不确定在哪里添加依赖项。如果在第一个参数中将其添加到数组中，则会出现“参考错误：角度未定义”。我以为require（）应该在执行代码之前先解决依赖关系。

<script>
    require(['angular', './js/color-picker.js', 'components/shared/index'], function (angular) {
        var app = angular.module('app', ['colorpicker']);

        app.controller('AppCtrl', ['$scope', function ($scope) {
            $scope.var3 = '#ff2e00';
            $scope.var4 = '#e6ff00';
            $scope.var5 = '#db00ff';
            $scope.var6 = '#1fd27f';
            $scope.var7 = '#008fff';
            $scope.var8 = '#ff2e00';
            $scope.var9 = '#e6ff00';
        }]);
    });
</script>

下面的代码可以工作，但是我确实需要加载与此环境有关的其他模块才能使应用程序的其他组件正常工作。

    <link rel="stylesheet" type="text/css" href="css/color-picker.min.css" />  

<script src="/scripts/lib/angular/angular.min.js"></script>
<script src="js/color-picker.min.js"></script>
<script>var app = angular.module('app', ['colorpicker']);</script>  
<script>
    app.controller('AppCtrl', ['$scope', function ($scope) {
        $scope.var3 = '#ff2e00';
        $scope.var4 = '#e6ff00';
        $scope.var5 = '#db00ff';
        $scope.var6 = '#1fd27f';
        $scope.var7 = '#008fff';
        $scope.var8 = '#ff2e00';
        $scope.var9 = '#e6ff00';
    }]);
</script>

我是require（）菜鸟，不知道如何告诉require这个新模块依赖于Angular。

Answer 1

可以尝试一下吗？

 <script>
        require(['angular', './js/color-picker.js', 'components/shared/index'], function (angular,colorpicker, index) {
            var app = angular.module('app', ['colorpicker']);

        app.controller('AppCtrl', ['$scope', function ($scope) {
            $scope.var3 = '#ff2e00';
            $scope.var4 = '#e6ff00';
            $scope.var5 = '#db00ff';
            $scope.var6 = '#1fd27f';
            $scope.var7 = '#008fff';
            $scope.var8 = '#ff2e00';
            $scope.var9 = '#e6ff00';
        }]);
    });
</script>

Answer 2

由于我无法控制整个页面，因此我没有意识到通过早期调用require.config（）来加载其他依赖项。这就是让它们一起工作的全部原因。

<script>
    require.config({
        paths: {            
            'colorpicker': './js/color-picker.min'
        },
        shim: {         
            'colorpicker': {
                deps: ['angular']
            }
        }       
    }); 

    require(['angular', 'underscore', 'colorpicker'], function (angular, _) {       
        var app = angular.module('app', ['colorpicker']);
    });
</script>

使用require的负载依赖性

2 个答案: