Angular，服務和模塊依賴性混淆

Question

我從Angular開始，遇到了問題。 我不確定我是否了解模塊依賴性的工作方式。

創建模塊時，您傳入了一組必需的模塊（包含服務），對嗎？ 並且，當您在該模塊中實際使用控制器時，會向其傳遞在所需模塊之一中定義的服務功能。

這是我在應用程序中遇到的錯誤：

Failed to instantiate module MyApp due to:
Error: [$injector:modulerr]

這是我的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>

我這樣定義我的服務模塊：

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
    }
});

在setup.js中，加載帶有服務的模塊之后，我創建了我的主模塊：

var MyApp = angular.module('MyApp', ['ngRoute', 'ngAnimate', 'CustomerServices', 'InspectionServices', 'MachineServices']);

這些模塊及其包含的服務的創建方式存在問題。 當我將它們刪除為依賴項時，我不再收到錯誤。

我在這里想念什么？

提前致謝。

Answer 1

我認為您的問題很可能在您的模塊定義中：

var MachineServices = angular.module('MachineServices', ['http']);

您無需依賴http 。 $http服務是Angular核心的一部分，因此它不是您需要導入的模塊。 這樣做會給您一個錯誤。

我還應糾正您對“服務”和“模塊”的互換使用。 模塊是工廠，服務，指令，控制器，過濾器等的集合，可以將其注入其他模塊中使用。 “服務”在Angular中具有特定含義，並且比“模塊”更細化。

Angular，服務和模塊依賴性混淆

問題描述

1 個解決方案

解決方案1
8 已采納 2013-09-03 20:00:10

Angular，服務和模塊依賴性混淆

問題描述

1 個解決方案

解決方案1 8 已采納 2013-09-03 20:00:10

解決方案1
8 已采納 2013-09-03 20:00:10