Modularizing Angular

Question

I am starting a new Angular project and trying to modularize all of my code – I'm tired of having massive app.js files and, because I'm developing a platform for a company, it's important my code is neat and modularized for easy testing, cleanliness, and ease of transition to Angular 2.

Currently, I have three angular files setting everything up:

Angular.module.js

angular
 .module('app', [
   /* Shared Modules */
   'app.config',
   'app.states'
   /* Feature Areas */
 ])

Angular.config.js

   angular
    .module('app', [
     /* Angular Modules */
     'ngResource',
     'ngSanitize',
     /* 3rd-party Modules */
     'ui.router'
    ]);

Angular.states.js

    angular
     .module('app')
     .config([
      '$stateProvider',
      '$urlRouterProvider',
      '$locationProvider',
      function($stateProvider, $urlRouterProvider, $locationProvider){

       // Unknown URLs go to 404
       $urlRouterProvider.otherwise('/404');
       // No route goes to index
       $urlRouterProvider.when('', '/');

       // State provider for routing
      $stateProvider
       .state('home', {
         url: '/',
         views: {
          '': {
          templateUrl: 'home/_home.html'
          }
         }
      });
   }]);

This is my index.html

    <!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>App</title>
      <link rel="stylesheet" href="/content/stylesheets/screen.css">

      <!-- Angular Dependencies -->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
      <script src="https://code.angularjs.org/1.3.15/angular-sanitize.min.js"></script>
      <script src="https://code.angularjs.org/1.3.15/angular-resource.min.js"></script>

      <!-- Angular Modules -->
      <script src="/app/app.config.js"></script>
      <script src="/app/app.states.js"></script>
      <script src="/app/app.module.js"></script>
     </head>
    <body ng-app="app">
     <div id="wrapper">
      <div ui-view></div>
     </div>
    </body>
  </html>

I keep hitting this error:

Uncaught Error: [$injector:modulerr]

What am I doing wrong? I'm having a hard time understanding how I get my various Angular files to interact with each other. I left out a controller of my state because I'm just testing the view right now.

The angular.module("name", []) syntax creates a module. You are doing this multiple times with the same module name. — Explosion Pills
– Explosion Pills, Commented Mar 16, 2016 at 22:00

JulCh · Accepted Answer · 2016-03-17 00:18:38Z

7

By writing :

angular.module('app', [
    /* Shared Modules */
    'app.config',
    'app.states'
    /* Feature Areas */
])

You create a module named app which requires 2 modules : app.config and app.states. If one of these is missing or not valid, the app module can't start.

In your config.js, you write angular.module('app', [...]). This will create a module named app with dependencies between the '[...]'. However, you've already created a module named 'app' in your module.js.

Change the module name, in config.js to angular.module('app.config', [...]).

In your states.js file, there is another thing: angular.module('app') gives you the module you've created in your module.js file. You can call the config method on it, this is not a problem. However, you define, in your app module a dependecy to app.states. You can remove this dependency, or replace angular.module('app') by angular.module('app.states', []).config(...)

Hope it helps you.

answered Mar 17, 2016 at 0:18

JulCh

2,8982 gold badges21 silver badges21 bronze badges

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

1 Comment

cortharlow Over a year ago

Makes so much sense. I had no idea how dependencies or injection really worked, I'm on a much better path now. Very helpful.

Rogerio Soares · Accepted Answer · 2016-03-17 00:26:25Z

1

You have to correctly name your modules, the file name itself doesn't change anything : Angular.module.js

angular
 .module('app', [
   /* Shared Modules */
   'app.config',
   'app.states'
   /* Feature Areas */
 ])

Angular.config.js

angular
    .module('app.config', [
     /* Angular Modules */
     'ngResource',
     'ngSanitize',
     /* 3rd-party Modules */
     'ui.router'
    ]);

Angular.states.js

angular
 .module('app.states')
 .config([
  '$stateProvider',
  '$urlRouterProvider',
  '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider){
  ...
  }

answered Mar 17, 2016 at 0:26

Rogerio Soares

1,61316 silver badges14 bronze badges

Comments

marbug · Accepted Answer · 2016-04-19 12:48:48Z

Shortly

Angular.config.js redefines 'app' module and changes its dependencies. So I'd like to suggest the following resolving...

Angular.module.js

Make Angular.module.js (which is actually app/app.module.js) code to be the following:

angular
  .module('app', [
    /* Angular Modules */
    'ngResource',
    'ngSanitize',
    /* 3rd-party Modules */
    'ui.router'
  ]);

Angular.config.js

Make Angular.config.js (which is actually app/app.config.js) code to be:

angular
  .module('app')
  .config([
    '$stateProvider',
    '$urlRouterProvider',
    '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {
      ...
    }
  ]);

Angular.states.js

Angular.states.js (which is actually app/app.states.js) should be removed or just renamed to app/app.config.js (see above).

index.html

index.html code should have the following order of files:

  <!-- Angular Modules -->
  <script src="/app/app.module.js"></script>
  <script src="/app/app.config.js"></script>

Other files

Define module in separate file. For example, in something.module.js
Module config code in something.config.js file
etc

and include these files in index.html in the following order:

  <!-- Angular Modules -->
  <script src="/something/something.module.js"></script>
  <script src="/something/something.config.js"></script>
  <script src="/app/app.module.js"></script>
  <script src="/app/app.config.js"></script>

In general

The following documentation about AngularJS code style could be helpful for you in the future for writing AngularJS modules: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Collectives™ on Stack Overflow

Modularizing Angular

3 Answers 3

1 Comment

Comments

Shortly

Angular.module.js

Angular.config.js

Angular.states.js

index.html

Other files

In general

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Shortly

Angular.module.js

Angular.config.js

Angular.states.js

index.html

Other files

In general

Comments

Your Answer

Sign up or log in

Post as a guest

Related