Load dependency using require

Question

I'm building an app using AngularJS. The environment already has several modules embedded in it, some of which I'm loading fine using require. I'm trying to add a novel one, and I can't get the steps right.

The module is color-picker.js: https://github.com/Alberplz/angular-colorpicker-directive

This is what I am trying, but not sure where to add the dependency. If I add it to the array in that first argument, I get "Reference error: angular not defined". I thought require() was supposed to resolve dependencies first before executing code.

<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>

This next code works, but I do need to load other modules that pertain to this environment to get other components of the app working.

    <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>

I'm a require() noob and don't understand how to tell require that this new module is dependent on Angular.

Raphael · Accepted Answer · 2018-08-16 18:28:04Z

0

Can you try this.

 <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>

answered Aug 16, 2018 at 18:28

Raphael

1,8162 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adam Larsen Over a year ago

No dice. I get that Uncaught ReferenceError: angular is not defined at color-picker.js:9

Raphael Over a year ago

can you share little more of the error log, if you have

Raphael Over a year ago

check this link stackoverflow.com/questions/19575410/…

Adam Larsen Over a year ago

This got me on the right path. Thank you so much. The environment has a call to require.config() higher up in the page, and once I added another path and its dependency, it worked. Angular is pulled in with that earlier call, so this works. I'm posting the full-ish code as a new answer.

Raphael Over a year ago

I am glad it helped :)

Adam Larsen · Accepted Answer · 2018-08-18 19:21:27Z

0

Since I don't control the whole page, I didn't realize that other dependencies were loading via an earlier call to require.config(). This is what got it all to work together.

<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>

answered Aug 18, 2018 at 19:21

Adam Larsen

851 silver badge7 bronze badges

Collectives™ on Stack Overflow

Load dependency using require

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related