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.

Answer 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

Answer 2

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.