Modular design using AngularJS and UI-route

Question

I'm new in angularjs (I come from Java, Python, Objective-c) and I'm trying to achieve a modular design. But I don't see how app.js can "import"other modules and then how controllers import other controllers and keep them in separate files.

This is what I want:

/app

     /img -- application level images
     /css -- application level css
     /js

     app.js -- the main app module
     /modules
         /login
             /js
                 controllers.js --controllers for login module
                 directives.js --directives for login module

             /views -- views for login module
             /css
             /img
             loginModule.js -- Main login module definition

         /comment
             /js
                 controllers.js --controllers for login module
                 directives.js --directives for login module

             /views -- views for comment module
             /css
             /img
             commentModule.js -- Main comment module definition

     ...

     ...

     index.html

i strongly advice you to read this github.com/toddmotto/angular-styleguide and github.com/johnpapa/angular-styleguide#style-y021. In the second link you can see better. What i usually do is combine functionality in an angular module and then i import that module in my main module (which usually is the app). When you import a module all the services controllers etc, of that module, will be available into the application. — pm.calabrese
– pm.calabrese, Commented Jan 21, 2016 at 15:56
You can refer github.com/johnpapa/angular-styleguide as complete style guide and github.com/johnpapa/angular-styleguide#modules for modularity in particular. — jagmohan
– jagmohan, Commented Jan 21, 2016 at 15:59

TheLazyChap · Accepted Answer · 2016-01-21 16:43:56Z

1

You can import other modules by making them a dependence.

In your case, it would probably be something like this.

angular.module("app.module", ["login.module", "comment.module"]);

You could also group 'core' functionalities into a module like core.module

angular.module("core.module", ["login.module", "comment.module"]);

Then make app.module depend on this module.

angular.module("app.module", ["core.module", "ui.router"]);

Hope that helps.

You reference your file in the index.html like so:

<html>
<head>
    <title></title>
</head>
<body>
    // HTML code here

    // angular libraries and other vendor libaries

    <script type="text/javascript" src="<path to each module>"></script>
    ...
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

edited Jan 21, 2016 at 16:43

answered Jan 21, 2016 at 15:55

TheLazyChap

1,9021 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricardo Over a year ago

Should I import each js module file on index.html ?

TheLazyChap Over a year ago

@Ricardo You'll need to provide the <script type="text/javascript" src="..path to script file"></script> in the correct order so your app module should be the last one because it depends on the other two in your index.html

Collectives™ on Stack Overflow

Modular design using AngularJS and UI-route

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related