javascript - Angular, services, and module dependency confusion -
i'm starting out angular , running in problems. i'm not sure understanding how module dependencies work.
when creating module, pass in array of required modules (that contain services), right? , when use controller in module, pass service function defined in 1 of required modules.
this error encountering in application:
failed instantiate module myapp due to: error: [$injector:modulerr] here 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 each controller. each under own module. these talk rest server. --> <script src="js/services/customer.js"></script> <script src="js/services/inspection.js"></script> <script src="js/services/machine.js"></script> <!-- sets main myapp module , dependencies. --> <script src="js/setup.js"></script> <!-- controllers each view. under myapp module. these loaded automatically 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 , main modustri controller. --> <script src="js/routing.js"></script> <script src="js/controllers/myapp.js"></script> </body> </html> i define service modules this:
var machineservices = angular.module('machineservices', ['http']); machineservices.factory('rest', function($http){ return{ //get machine server //save machine server //delete machine server //get machine list server } }); in setup.js, after modules services loaded, create main module:
var myapp = angular.module('myapp', ['ngroute', 'nganimate', 'customerservices', 'inspectionservices', 'machineservices']); there wrong way these modules , containing services created. when remove them dependencies no longer error.
what missing here?
thanks in advance.
i think problem within module definition:
var machineservices = angular.module('machineservices', ['http']); you don't need depend upon http. $http service part of angular core, not module need import. doing give error.
i should correct on use of "services" , "modules" interchangeably. module collection of factories, services, directives, controllers, filters, etc can injected other modules use. "service" has specific meaning in angular , more granular "module".
Comments
Post a Comment