使用 require 加载依赖

Question

我正在使用 AngularJS 构建应用程序。该环境中已经嵌入了几个模块，其中一些我使用 require 加载得很好。我正在尝试添加一个新的，但我无法正确执行步骤。

模组颜色-picker.js:https://github.com/Alberplz/angular-colorpicker-directive

这就是我正在尝试的，但不确定在哪里添加依赖项。如果我将它添加到第一个参数的数组中，我会得到 "Reference error: angular not defined"。我认为 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() 菜鸟，不明白如何判断这个新模块依赖于 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 加载依赖

Load dependency using require

color-picker

requirejs

angularjs