CODEWITHSUNDEEP
javascriptangularjs
KingJulian
KingJulian

Reputation: 973

How to inject / load Angular directive in an app

My main.js is in the root folder of app.

-app
 |_ routes.js
 |_ main.js
-components
 |_directives
   |_abc-directive.js

How do I define a directive that can be added from another folder.

I tried this:

abc-directive.js:

var abcDirective = function() {
    // directive code
}

main.js: 

app.main = angular.module('main', ['ngRoute', 'components.directives']);
app.main.directive('abcDirective', "<I don't want to define a directive here, 
                                      rather load from diff. folder>");

Upvotes: 0

Views: 93

Answers (2)

runTarm
runTarm

Reputation: 11547

Given that you load the main.js, which include the main module declaration, before the directive file.

You could register the directive in the directive file itself like this:

angular.module('main').directive('abcDirective', abcDirective);

Hope this helps.

Upvotes: 0

idursun
idursun

Reputation: 6335

You can define your controllers, directives in their own modules and add those modules as a dependency to you main module

abc-directive.js

var app = angular.module('directives.abcDirective', [])

app.directive('abcDirective', ...

main.js

var app = angular.module('mainApp', ['directives.abcDirective'])

You can use RequireJS to manage dependencies..

Upvotes: 1

Related Questions