Modularizing Angular

Viewed 386

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.

3 Answers
Related