CODEWITHSUNDEEP
javascriptangularjsmodularity
cortharlow
cortharlow

Reputation: 135

Modularizing Angular

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.

Upvotes: 6

Views: 526

Answers (3)

marbug
marbug

Reputation: 350

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

Upvotes: 0

Rogerio Soares
Rogerio Soares

Reputation: 1613

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){
  ...
  }

Upvotes: 1

JulCh
JulCh

Reputation: 2878

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.

Upvotes: 7

Related Questions