Menu
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.
634
Yes you can split your application into modules.
Angular applications are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
An NgModule is a class marked by the @NgModule decorator. @NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime.
The modular architecture lets manage complexity of app structure, by breaking them down to smaller modules. How deep structure has to be, depends on your decision, but one thing that you should always keep in mind, that for every team which work on own feature of app, should be created own module.
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.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
