angular module namespace usage

Question

I would to understand the use of angular module more clearly and deeply. I have a folder of directives where each directive is on separate file.

My first file(first directive) has a declaration of

angular.module("Name",["Dep1","Dep2"]).directive(....)

My second file has a declaration of

angular.module("Name").directive(.....)

My third file has a declaration of

angular.module("Name").directive(.....)

and so on.

There for my references of files is like this.

<script src="FirstFile"></script>
<script src="SecondFile"></script>
<script src="ThirdFile"></script>

I have a couple of questions:

1.How can I get rid of angular.module("Name") declaration in every file?

why my first declaration have to be angular.module("Name",["Dep1","Dep2"]) with list of dependencies, can I call this file second in row?

Ant Kennedy · Accepted Answer · 2016-06-01 09:01:29Z

Typical best practice would would be to create a module.js or app.js file where you declare your module and any config() or run() actions

module.js

angular
  .module('MyModule', ['dependency1', 'dependecy2'])

directive1.js

angular
  .module('MyModule')
  .directive('Directive1' directive1Fn)

directive2.js

angular
  .module('MyModule')
  .directive('Directive2' directive2Fn)

index.html

<body>
  <div>...</div>
  <script src='angular.js'></script>
  <script src='module.js'></script>
  <script src='directive1.js'></script>
  <script src='directive2.js'></script>
</body>

If you do not wish to call angular.module(...) inside each declaration you can import the directive functions into your module.js and declare them there (but this depends on your toolchain as to how you would go about this) i.e.

var d1 = require('./directive1.js')
var d2 = require('./directive2.js')

angular
  .module('MyModule', ['dependency1', 'dependecy2'])
  .directive('Directive1' d1)
  .directive('Directive2' d2)

Matt Lishman · Accepted Answer · 2016-07-28 10:49:20Z

1

Your first file is declaring the angular module. When you pass a second parameter to the angular.module function, you are declaring it. Without the parameter, you are referencing it.

Declare module:

angular.module('moduleName', ['dep1', 'dep2'])

Reference module:

angular.module('moduleName');

A module can only been declared once.

Once it is declared, you can "attach" controllers and services etc. to it.

As for you second question, it is generally okay and considered good practice to reference the module in the way you do (angular.module("name")).

However, if you really don't want to, you can save it to a variable.

var myModule = angular.module('name');

myModule.directive('directiveName', ...);

edited Jul 28, 2016 at 10:49

answered Jun 1, 2016 at 8:56

Matt Lishman

1,8172 gold badges24 silver badges34 bronze badges

Comments

brk · Accepted Answer · 2016-06-01 09:00:20Z

1.How can I get rid of angular.module("Name") declaration in every file?

Possible way

var SomeNamespace = {};
SomeNamespace.myApp = angular.module("ngApName",[]);

In other files

SomeNamespace.myApp,directive(..)

You can also remove the name-space & create a simple

var x = angular.module('ngAppName',[])

and use x while creating this directive or controller or a service .

Basically you need to create a global variable.

why my first declaration have to be angular.module("Name",["Dep1","Dep2"])

This is because you angular in depenedent on other modules.

For example it can be ui-router or bootstrap-ui.

If your application is not dpenedent on other modules it can be an ampty array

angular.module("Name",[]);

CozyAzure · Accepted Answer · 2016-06-01 16:20:01Z

1

Welcome to AngularJs!

To answer your question:

You can always use object notation:

var app = angular.module("Name",["Dep1","Dep2"]);
//now your app has an instance of the angular modudle which you just initialized
app.directive("Directive1",function(...));
app.directive("Directive2",function(...));

Your first declartion will always have to include the arrays of dependencies. That is the syntax of angular to initialize a module. If you do this again another time, i.e initialize two angular modules with the same name, angular will throw you an error.

Read more on https://docs.angularjs.org/guide/module

edited Jun 1, 2016 at 16:20

answered Jun 1, 2016 at 8:55

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

Collectives™ on Stack Overflow

angular module namespace usage

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related