Naming convention for angular module dependencies

Question

I just started learning AngularJS and got chance to look different angular examples. I have a question regarding angular.module dependencies. How can we know the name of dependencies to be used and from where (or which directory) angular inject those dependencies ?

for example

var clientApp = angular.module('clientApp', ['ui.bootstrap', 'hljs', 'common', 'smart-table',
    'bootstrap.fileField', 'toaster', 'ngAnimate', 'angulartics', 'angulartics.google.analytics']);

in the above clientApp they have used nine dependencies. I am confused on the names used for injecting those dependencies like ui.bootstrap,hljs etc. Is there any standard convention for those names ? Also how angular fetch the required modules from lib folder ? This is my directory structure

+---js
¦       appctrl.js
+---lib
    +---components
        +---angular
        ¦       angular.js
        ¦       angular.min.js
        +---angular-animate
        ¦       angular-animate.js
        ¦       angular-animate.min.js
        +---angular-bootstrap
        ¦       ui-bootstrap-tpls.js
        ¦       ui-bootstrap-tpls.min.js
        ¦       ui-bootstrap.js
        ¦       ui-bootstrap.min.js

The clientApp will get all the modules without fail. I wonder how it can access these directory without specifying.

[Angular Naming Conventions](http://stackoverflow.com/q/20802798/1959948). — Dalorzo, Apr 27 '16 at 12:28
I think the title of question is misleading. It's not about angular conventions like http://stackoverflow.com/q/20802798/1959948. — Ali Seyedi, Apr 27 '16 at 12:40

score 1 · Answer 1 · answered Apr 27 '16 at 12:42

1

The injection of module dependencies depends on your code. Either one or more dependencies are injected based on the need of a code. If you are redirecting between pages using angular 'ngRoute' will be injected. If you are injecting 'ngRoute', you must specify "angular-route.js" in the script header. Another example is ngAnimate. This is used when an animation is required. This shall be used when a menu appears or disappears to make the transition smooth. The angular-animate.js should be added.

The ui-bootstrap is list of bootstrap components developed in angular. If you intend to use any of the directives in the following URL, you will inject the ui-bootstrap. https://angular-ui.github.io/bootstrap/

Toaster is a third part library. The another common one is gridster.

There are hundreds modules that can be injected into angular modules. Do inject only the modules that are used in the code as explained above. You must add related js files to your HTML script section. If you do not add the js script, angular code will not understand the injection.

Do let me know if you expect more details

answered Apr 27 '16 at 12:42

Sankar Krishnamoorthy

1,255
13
18

Thanks for the explanation. I know we have to inject the dependencies we need. But my question is how to know the dependency name like ui.bootstrap, hljs. Also how the program detects the correct directory of these JS files ? – Sarath S Nair Apr 27 '16 at 12:57
The dependency name should be known from the documentation. For example, if you refer to ui-bootstrap documentation from the link I have shared above it is cleared mentioned as angular.module('myModule', ['ui.bootstrap']); Likewise you have refer to the documentation of Angular Route, Toaster etc., – Sankar Krishnamoorthy Apr 27 '16 at 13:00
The second part is how it detects directory. You add the js files to your HTML file. When you refer any code related to the injected module in your custom js file, it will call required functions from the ui-bootstrap, angular-route js file. If you are using Visual Studio, run in debug mode, you will be able to see this. Hope this clarifies – Sankar Krishnamoorthy Apr 27 '16 at 13:04
My suggestion is refer to some of learning videos on each topic that will help you. The good one will be on Pluralsight. If the answer helps, please approve my answer, Thanks – Sankar Krishnamoorthy Apr 27 '16 at 13:14

Kraken · Answer 2 · 2016-04-27T13:04:30.327

The dependencies you are injecting to the module are named the same way your clientApp angular module is, because they are also angular modules.

So in your case, I could require your app by passing 'clientApp' into my module's dependency array.

As for the file fragments clientApp needs to require, it depends on how you build your app. You can wrap all of your JS in Immediately Invoked Function Expressions AKA IIFEs like such:

(angular.module(function () {}))()

Then you just have to include each script separately in your index.html the way you would any javascript file. Their names are declared roughly in the same way as the module. Ex:

.service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){})])

When your IIFEs are executed, these functions are registered on your app module and can then be called by name. In this case, sampleSvc.

Or you can dive into the world of build tools... Personally, I like NPM to do everything and wrote all my own shell commands for each part of the build cycle. I prefer browserify in conjunction with that. However for someone just getting started, you might want to check out grunt and gulp. (Controversial opinion time: Gulp is faster)

Also: +1 to the recommendation to study John Papa's Angular Styleguide. If I'm not mistaken it was endorsed by the angular team. Also check out his ng-demos for more robust examples.

Naming convention for angular module dependencies

2 Answers2