Question

我是AngularJS的新用户，我试图将第二个控制器声明为我页面中的新视图。我有一个登录控制器，当我成功登录时，我会进入Home.html。

打开Home.html时，我在下面收到以下错误..看起来它无法识别我的ModelController / ModalService ..我在这里缺少什么？

错误：[$ injector：unpr] http://errors.angularjs.org/1.5.0-beta.1/ $ injector / unpr？p0 = ModalServiceProvider％20％3C-％20ModalService％20％3C-％20ModalController

的index.html：

<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

</head>
<body>
<div>
<div ng-view></div>
</div>


<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-cookies.min.js"></script>


<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>


</body>
</html>

Home.html中：

<div class="container" ng-controller="ModalController">

<div class="col-xs-2">
    <button class="btn btn-group-justified" ng-init="testfunc()">press me</button>
</div>
</div>

MyApp.js：

angular.module('MyApp', [
    'Authentication',
    'Modal',
    'ngRoute',
    'ngCookies'
])
.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/Login', {
                controller: 'LoginController',
                templateUrl: 'Login.html'
            })
            .when('/Home', {
                controller: 'ModalController',
                templateUrl: 'Home.html'
            })
            .otherwise({
                redirectTo: '/Login'
            });
    }
]);

ModalController.js：

angular.module('Modal')
.controller('ModalController',
['$scope', 'ModalService',
function ($scope, ModalService) {

    $scope.testfunc = function() {
        alert('weeee');
    }


}]);

ModalService.js：

angular.module('Modal', []);

angular.module('Modal')
.factory('ModalService'
['$http',
function ($http) {
    var service = {};



    return service;
}
]);

Answer 1

在包含服务和控制器之后，您需要包含app.js。和服务后的控制器。

它应该是这样的：

<script src="Scripts/Services/ModalService.js"></script>  <!--ModalService is being defined here -->
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script> <!-- ModalService is being injected here -->
<script src="Scripts/MyApp.js"></script> <!-- All of the things are set in place here -->

事实上，最佳做法是将所有这些内容都包含在<body>的底部。

Answer 2

我找到了答案。问题是我错过了一个逗号:(

ModalService.js应如下所示：

angular.module('Modal', []);

angular.module('Modal')
.factory('ModalService', <------ COMMA MISSING :(
['$http',
function ($http) {
var service = {};



return service;
}
]);

无法声明新的控制器 - 依赖性丢失

2 个答案: