I'm starting out with Angular and am running in to problems. I'm not sure I am understanding how module dependencies work.
When creating a module, you pass in an array of required modules (that contain services), right? And when you actually use a controller in that module, you pass it a service function defined in one of your required modules.
This is the error I am encountering in my application:
Failed to instantiate module MyApp due to:
Error: [$injector:modulerr]
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MyApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body data-ng-app="MyApp">
<div data-ng-controller="MyAppCtrl">
<div class="three columns">
<h1 id="logo">LOGO</h1>
</div>
<div class="nine columns">
<div id="settings-nav" class="row">
<select class="three columns">
<option value="settings">My Settings</option>
<option value="users">Add/Edit Users</option>
<option value="account">Account Settings</option>
</select>
</div>
<div class="row">
<nav id="main-nav">
<ul class="six columns">
<li><a id="machines-link" class="button" href="/machines">Machines</a></li>
<li><a id="customers-link" class="button" href="/customers">Customers</a></li>
<li><a id="inspections-link" class="button" href="/inspections">Inspections</a></li>
</ul>
<div class="three columns">
<form id="search">
<input type="text" placeholder="search" />
</form>
</div>
</nav>
</div>
<div data-ng-view id="template-wrapper"></div>
</div>
</div>
<!-- required libraries. -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.min.js"></script>
<script src="js/vendor/angular-animate.min.js"></script>
<script src="js/vendor/angular-resource.min.js"></script>
<script src="js/vendor/underscore.min.js"></script>
<!-- services for each controller. each are under their own module. these talk to the rest server. -->
<script src="js/services/customer.js"></script>
<script src="js/services/inspection.js"></script>
<script src="js/services/machine.js"></script>
<!-- sets up the main MyApp module and dependencies. -->
<script src="js/setup.js"></script>
<!-- controllers for each view. all are under the MyApp module. these are loaded automatically with angular's routing. -->
<script src="js/controllers/customers-list.js"></script>
<script src="js/controllers/inspections-list.js"></script>
<script src="js/controllers/machines-list.js"></script>
<script src="js/controllers/customer.js"></script>
<script src="js/controllers/inspection.js"></script>
<script src="js/controllers/machine.js"></script>
<!-- routing config and main modustri controller. -->
<script src="js/routing.js"></script>
<script src="js/controllers/MyApp.js"></script>
</body>
</html>
I define my service modules like this:
var MachineServices = angular.module('MachineServices', ['http']);
MachineServices.factory('Rest', function($http){
return{
//get machine from server
//save machine to server
//delete machine from server
//get machine list from server
}
});
In setup.js, after the modules with services are loaded, I create my main module:
var MyApp = angular.module('MyApp', ['ngRoute', 'ngAnimate', 'CustomerServices', 'InspectionServices', 'MachineServices']);
There is something wrong with the way these modules and their containing services are created. When I remove them as dependencies I no longer get an error.
What am I missing here?
Thanks in advance.
I'm starting out with Angular and am running in to problems. I'm not sure I am understanding how module dependencies work.
When creating a module, you pass in an array of required modules (that contain services), right? And when you actually use a controller in that module, you pass it a service function defined in one of your required modules.
This is the error I am encountering in my application:
Failed to instantiate module MyApp due to:
Error: [$injector:modulerr]
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MyApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body data-ng-app="MyApp">
<div data-ng-controller="MyAppCtrl">
<div class="three columns">
<h1 id="logo">LOGO</h1>
</div>
<div class="nine columns">
<div id="settings-nav" class="row">
<select class="three columns">
<option value="settings">My Settings</option>
<option value="users">Add/Edit Users</option>
<option value="account">Account Settings</option>
</select>
</div>
<div class="row">
<nav id="main-nav">
<ul class="six columns">
<li><a id="machines-link" class="button" href="/machines">Machines</a></li>
<li><a id="customers-link" class="button" href="/customers">Customers</a></li>
<li><a id="inspections-link" class="button" href="/inspections">Inspections</a></li>
</ul>
<div class="three columns">
<form id="search">
<input type="text" placeholder="search" />
</form>
</div>
</nav>
</div>
<div data-ng-view id="template-wrapper"></div>
</div>
</div>
<!-- required libraries. -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.min.js"></script>
<script src="js/vendor/angular-animate.min.js"></script>
<script src="js/vendor/angular-resource.min.js"></script>
<script src="js/vendor/underscore.min.js"></script>
<!-- services for each controller. each are under their own module. these talk to the rest server. -->
<script src="js/services/customer.js"></script>
<script src="js/services/inspection.js"></script>
<script src="js/services/machine.js"></script>
<!-- sets up the main MyApp module and dependencies. -->
<script src="js/setup.js"></script>
<!-- controllers for each view. all are under the MyApp module. these are loaded automatically with angular's routing. -->
<script src="js/controllers/customers-list.js"></script>
<script src="js/controllers/inspections-list.js"></script>
<script src="js/controllers/machines-list.js"></script>
<script src="js/controllers/customer.js"></script>
<script src="js/controllers/inspection.js"></script>
<script src="js/controllers/machine.js"></script>
<!-- routing config and main modustri controller. -->
<script src="js/routing.js"></script>
<script src="js/controllers/MyApp.js"></script>
</body>
</html>
I define my service modules like this:
var MachineServices = angular.module('MachineServices', ['http']);
MachineServices.factory('Rest', function($http){
return{
//get machine from server
//save machine to server
//delete machine from server
//get machine list from server
}
});
In setup.js, after the modules with services are loaded, I create my main module:
var MyApp = angular.module('MyApp', ['ngRoute', 'ngAnimate', 'CustomerServices', 'InspectionServices', 'MachineServices']);
There is something wrong with the way these modules and their containing services are created. When I remove them as dependencies I no longer get an error.
What am I missing here?
Thanks in advance.
Share Improve this question edited Sep 3, 2013 at 20:07 asked Sep 3, 2013 at 19:55 user154759user1547591 Answer
Reset to default 8I think your problem is likely within your module definition:
var MachineServices = angular.module('MachineServices', ['http']);
You don't need to depend upon http. The $http service is part of the Angular core, so it is not a module you need to import. Doing so will give you an error.
I should also correct you on your use of "Services" and "Modules" interchangeably. A module is a collection of factories, services, directives, controllers, filters, etc that can be injected into other modules to use. "Service" has a specific meaning in Angular and is more granular than "Module".
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745389836a4625610.html
评论列表（0条）