Geek Answers Handbook

Angular Modulation

I am starting a new Angular project and trying to modulate all my code - I'm tired of having massive app.js files, and since I am developing a platform for the company, it is important that my code is neat and modular for easy testing, cleanliness and ease of transition to Angular 2 .

I currently have three Angular files that everyone is customizing:

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 continue this error:

Unprepared error: [$ injector: modulerr]

What am I doing wrong? I find it difficult to understand how I can interact with each other in different Angular files. I left the state controller because I am just checking the view now.

+6
source share
3 answers

We write:

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

A module is created with the name app , which requires 2 modules: app.config and app.states . If one of them is missing or invalid, the app module cannot start.

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

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

There is one more thing in your module.js file: angular.module('app') provides you with the module created in your module.js file. You can call the config method on it, this is not a problem. However, you define dependecy on app.states in your app module. You can remove this dependency or replace angular.module('app') with angular.module('app.states', []).config(...)

Hope this helps you.

+7
source

You must correctly name your modules, the file name itself does not 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){ ... }
+1
source

Soon

Angular.config.js overrides the application module and changes its dependencies. Therefore, I would like to offer the following solution ...

Angular.module.js

Make Angular.module.js (which is actually app / app.module.js ) as follows:

 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 ):

 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 simply renamed to app / app. config.js (see above).

index.html

index.html code should have the following file order:

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

Other files

  • Define the module in a separate file. For example, in something.module.js
  • Module configuration 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>

Usually

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

0
source

More articles:


All Articles