AngularJS controller dont work after adding a service as dependency

Question

hello i'm working on my small project using angular , during the creating my second controller with second service i have a problem , when i inject my own service as a dependency in the controller it dont work and all of expressions in html file are not resolved (before adding a service all works) here is my code

after adding AccSrv to AccCtrl the problem occurs

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

    }
}]);

Can you provide the error message you receive when visiting the page that loads that controller? To see the error message, right click and click inspect (if you're on Chrome) — BShaps
– BShaps, Commented Apr 12, 2017 at 18:48
you need to include AccountService module into your app module. Your service is defined in different module than 'myApp'. Here is another link which explains it http://stackoverflow.com/questions/22966858/angularjs-access-service-from-different-module — Kumar Nitesh
– Kumar Nitesh, Commented Apr 12, 2017 at 18:49

yBrodsky · Accepted Answer · 2017-04-12 18:48:13Z

3

The problem is that your service is being defined in a module that you are not including anywhere:

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

should be

myApp.service('AccSrv'...etc

Otherwise you will need to include the AccountService MODULE as a dependency of myApp.

answered Apr 12, 2017 at 18:48

yBrodsky

5,0614 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BShaps · Accepted Answer · 2017-04-12 18:52:40Z

0

@yBrodsky is correct you need to change

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

To:

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

answered Apr 12, 2017 at 18:52

BShaps

1,4248 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS controller dont work after adding a service as dependency

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related