CODEWITHSUNDEEP
angularjsangularjs-directive
Edward Tanguay
Edward Tanguay

Reputation: 193352

What does the second parameter as array in an Angular directive do?

I'm trying to understand a customer directive in order to incorporate it in our AngularJS application.

The second parameter seems to be an area of a string and then main function:

mainApp.directive('uiCalendar', ['uiCalendarConfig', function(uiCalendarConfig) {
    return {
        restrict: 'A',
        scope: {eventSources:'=ngModel',calendarWatchEvent: '&'},
        controller: 'uiCalendarCtrl',
        link: function(scope, elm, attrs, controller) {

but all the examples of custom directives I have done so far have as the second parameter not an array but simple the main function, like this:

myApp.directive('mainCustomerPanel', function () {
    return {
        restrict: 'EAC',
        templateUrl: 'mainCustomerPanelTemplate',
        scope: {
            fullName: "@",
            getCustomerInfo: "&"
        },

I can see that the uiCalendarConfig is a function that is apparently called, but although I have included it as well in our application, it gives me the error:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.13/$injector/unpr?p0=uiCalendarConfigProvider%20%3C-%20uiCalendarConfig%20%3C-%20uiCalendarDirective
S/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:6:417

What exactly is this error telling me and what else do I need to do concerning the uiCalendarConfig function so that this custom directive works?

Upvotes: 1

Views: 965

Answers (3)

nomve
nomve

Reputation: 735

You can visit the URL from the error and it will give you an explanation what happened. But in short, the directive is dependent on uiCalendarConfig and it's missing. You are most likely including just the uiCalendar directive, but you need the whole module because the directive is dependent on at least the config.

You can use either an array or a function as the second parameter, but using an array, your function needs to be the last element in the array. What happens is that Angular will look at the defined dependencies in the array, find the instances of these services, values or whatever and call the function effectively injecting them in the function. You can get this done without an array, like so

.directive('directive', function(service1){} )

and Angular will try to find service1, but if you minify your code, it will fail. When you use an array, the strings don't get minified and it doesn't matter how your parameters are called in the function.

Upvotes: 1

LionC
LionC

Reputation: 3106

The array-parameter is a way(and should be the preffered way, as it prevents problems with minification) to declare dependencies, the last element being the function for the declared component and all others being names of services, factories, values etc that component depends on. They are injected into the function as parameters in the same order they appear in the array:

angular.module('someModule')
    .constant('squirrelApiUrl', 'http://squirrels.com/api');

angular.module('someModule')
    .factory('squirrelTransformer', function() {
        return function(squirrel) {
            return squirrel.superSize(); //whatever
        };
    });

angular.module('someModule')
    .service('squirrelService', ['squirrelApiUrl', 'squirrelTransformer', squirrelService]);

function squirrelService(squirrelApiUrl, squirrelTransformer) {
    //You can use the injected squirrelApiUrl and quirrelTransformer here
}

Note that with the array-syntax, the names of the injected parameter actually do not matter, but it is good practice to give them the same names for clarity.

The error that you are facing basically says, that uiCalendarConfig was not defined and thus cannot be injected - you are probably missing a file. For more info on Dependency Injection in Angular see the docs

Upvotes: 2

lucas
lucas

Reputation: 153

There errors is telling you that you didn`t inject dependency of "uiCalendarConfig" module which this directive depends on. You can read more about it here: https://docs.angularjs.org/guide/di

It is better if you use array notation, because it is necessary when you will be going to minimize your javascript code.

Upvotes: 1

Related Questions