How to inject my service into my controller angular js

Question

I am relatively new to angular JS and I have an issue with angularJS 1.3.0 beta build

I am trying to insert my service (a standalone module) to a controller.

This is my app Code

'use strict';
angular.module('lifecareApp', [
   'lifecareApp.validationServices'
   , 'lifecareApp.loginController'
   , 'lifecareApp.signupController'
]).
config(function ($routeProvider, $locationProvider) {
  $routeProvider.
    when('/account/login', {
      controller: 'loginController'
    }).
    when('/account/signup', {
      controller: 'signupController'
    })
  $locationProvider.html5Mode(true);
});

This is my service code

'use strict';

angular.module('lifecareApp.validationServices', []).
    factory('validationServices', function () {
    return {
        validateRequiredField: function (value, requiredMessage) {
            if (value){
                return false; //returns false
            }else{
                if (requiredMessage){
                    return requiredMessage;
                }else{
                    return "Required";
                }
            }
        },
        validateEmail: function (value, required, requiredMessage, invalidEmailMessage){
            //validate if its required first
            if (required){
                if (value){
                    //validate the email next
                    var checkEmailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                    if (checkEmailRegex.test(value)){
                        return false;
                    }else{
                        if (invalidEmailMessage){
                            return false;
                        }else{
                            return "Invalid Email";
                        }
                    }
                }else{
                    if (requiredMessage){
                        return requiredMessage;
                    }else{
                        return "Required";
                    }
                }
            }
        }
    };

});

This is my controller code

'use strict';

/* Controllers */

angular.module('lifecareApp.loginController', []).
  controller('loginController', ['$scope', 'validationServices' function ($scope, validationServices) {
        $scope.emailError = false;
        $scope.passwordError = false;
        $scope.overallError = false;

        $scope.login = function(){
            var email = $scope.tbEmail;
            var password = $scope.tbPassword;

            var passwordValidation = validationServices.validateRequiredField(password);
            var emailValidation = validationServices.validateEmail(email, true);

            if (emailValidation){
                $scope.emailError = true;
                $scope.valEmail = emailValidation;
            }else{
                $scope.valEmail = "";
                $scope.emailError = false;
            }

            if (passwordValidation){
                $scope.passwordError = true;
                $scope.valPassword = passwordValidation;
            }else{
                $scope.valPassword = "";
                $scope.passwordError = false;
            }


            if (passwordValidation || emailValidation){
                $scope.overallError = true;
                $scope.valError = "Login Error!";
                return;
            }else{
                $scope.overallError = true;
                $scope.valError = "";
            }
        };
  }]);

And I keep getting this error. Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.5/$injector/modulerr?p0=lifecareApp&…ngularjs.org%2F1.3.0-beta.5%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider......5)

Please help! =(

I also found out that angular 1.0.7 does not have this error whereas the lastest angular 1.2.16 and 1.3.0 has this error.

Chandermani · Accepted Answer · 2014-04-19 04:33:53Z

1

In your main module you need to include ngRoute dependency with the new version of angularjs

angular.module('lifecareApp',['ngRoute',....

Also remember to include the route script file

<script src="angular-route.js">

answered Apr 19, 2014 at 4:33

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

2 Comments

Shi Wei Over a year ago

I have tried including angular-route and ngRoute as a dependency and its still giving me error. docs.angularjs.org/error/$injector/… I have also checked for spellings in the code.

Shi Wei Over a year ago

Ok! it was some error on my side that was causing the confusion! Alright, its correct! wohoo. Thanks bro

Collectives™ on Stack Overflow

How to inject my service into my controller angular js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related