将服务添加为依赖项后,AngularJS控制器不起作用

时间:2017-04-12 18:42:16

标签: angularjs

你好我正在使用angular进行我的小项目,在创建我的第二个控制器与第二个服务期间我有一个问题,当我注入我自己的服务作为控制器中的依赖它它不工作和html中的所有表达式文件未解析(在添加服务之前所有工作)这里是我的代码

将AccSrv添加到AccCtrl后出现问题

angular.module('myApp', ['ngRoute', 'membersService']).config(
    ['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
        $routeProvider.when('/home', {
            templateUrl: 'partials/home.html',
            controller: 'MembersCtrl'
        }).when('/account', {
            templateUrl: 'partials/account.html',
            controller: 'AccCtrl'
        }).otherwise({
            redirectTo: '/home'
        });
    }]);

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>myApp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="css/screen.css" type="text/css"/>
    <script src="js/libs/angular.js"></script>
    <script src="js/libs/angular-route.js"></script>
    <script src="js/libs/angular-resource.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services/MemberSrv.js"></script>
    <script src="js/controllers/MemberCtrl.js"></script>
    <script src="js/services/AccSrv.js"></script>
    <script src="js/controllers/AccCtrl.js"></script>

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

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="AccCtrl">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>{{hello}}</p>
<p>{{world}}</p>
<form name="accForm" ng-submit="createAccount()">
    <div>
        <label for="email">Email</label>
        <input type="text" name="email" id="email" ng-bind="newAccount.email"/>
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" name="password" id="password" ng-bind="newAccount.password"/>
    </div>
    <div>
        <input type="submit" id="registerAccount" value="Sign-up"/>
    </div>
</form>

<form name="accForm" ng-submit="getAccountByEmail()">
    <div>
        <label for="getemail">CheckEmail</label>
        <input type="text" name="getemail" id="getemail" ng-bind="ExistingAccount.email"/>
    </div>

    <div>
        <input type="submit" id="check" value="Check"/>
    </div>
</form>
<table>
    <tr>
        <td>{{ExistingAccount.id}}</td>
        <td>{{ExistingAccount.email}}</td>
        <td>{{ExistingAccount.password}}</td>
        <td>{{ExistingAccount.creationDate}}</td>
    </tr>
</table>

</body>
</html>

angular.module('AccountService', []).service('AccSrv', ['$http', function ($http) {

    this.getAccountByEmail = function (email) {
        var req = {
            method: 'GET',
            url: "http://localhost:8080/gadziksy-web/rest/account/" + email
        };
        return $http(req);
    };
}]);

var myApp = angular.module('myApp');
myApp.controller('AccCtrl',['$scope','$http' ,'AccSrv' , function ($scope , $http , AccSrv) {
    $scope.hello = 'hello';
    $scope.world = 'world';
    $scope.ExistingAccount = {
        "id": '',
        "email": '',
        "password": '',
        "creationDate": ''
    };

    $scope.getAccount = function () {
        return AccSrv.getAccountByEmail($scope.ExistingAccount.email).then(function (data) {
            $scope.ExistingAccount = data.data;
        })

    }
}]);

2 个答案:

答案 0 :(得分:3)

问题是您的服务是在未包含在任何地方的模块中定义的:

angular.module('AccountService', []).service('AccSrv'...etc

应该是

myApp.service('AccSrv'...etc

否则,您需要将AccountService MODULE包含为myApp的依赖项。

答案 1 :(得分:0)

@yBrodsky是正确的,你需要改变

angular.module('AccountService', []).service('AccSrv', ['$http', function ($http) {

要:

angular.module('myApp').service('AccSrv', ['$http', function ($http) {