CODEWITHSUNDEEP
javascriptangularjs
Pipeline
Pipeline

Reputation: 1059

Angular module adding a Service injection error

First time doing an angular application, combining different tutorials but this is the first time I am trying to inject a service.

I have one of my View's controllers like:

  angular.module("myApp.Pages").controller('signupController', ['$scope', '$location', '$timeout', 'authService', function ($scope, $location, $timeout, authService) {


  }

however am seeing an error when I look at the Console in Developer Tools:

angular.js:12793 Error: [$injector:unpr] Unknown provider: authServiceProvider <- authService <- signupController http://errors.angularjs.org/1.5.0-beta.2/$injector/unpr?p0=authServiceProvider%20%3C-%20authService%20%3C-ignupController

My project structure is:

 -Client
   -App
     -Components
       -Services 
         -authService.js
       -myAppCore.js
     -Views
     -app.js
     -appRouting.js
   -Scripts (References)
   -Theme (Css)
   -Index.html

My index.html scripts I add:

     <!-- Angular References-->
<script src="References/Angular/angular.js"></script>
<script src="References/Angular/angular-route.js"></script>
<script src="References/Angular/angular-ui-router.min.js"></script>
<!-- End Angular References-->

<!-- my app and dependent modules -->
<script src="App/app.js"></script>
<script src="App/appRouting.js"></script>

<!-- Services -->
<script src="App/Components/Services/authService.js"></script>
<!-- END services-->

<!-- Controllers for your pages-->
<script src="App/Pages/Home/homeController.js"></script>
<script src="App/Pages/ContactUs/contactusController.js"></script>
<script src="App/Pages/Entry/entryController.js"></script>
<script src="App/Pages/Signup/signupController.js"></script>
<!-- End Controllers for the page-->

My app.js

 angular.module("myApp", [
   // User defined modules
   'myApp.Templates', // templates
   'myApp.Pages', // Pages
   'myApp.Core', // Core

   // Angular modules
   'ui.router', // state routing
   'ngRoute', // angular routing
   'angular-loading-bar', //loading bar
   'LocalStorageModule', //local browser storage
])

and appRouting.js

 angular.module("myApp")
   .config(["$stateProvider", function ($stateProvider) {
    $stateProvider.state('Home', {
        url: '/Home',
        templateUrl: 'App/Pages/Home/home.html',
        controller: 'homeController'
    })
    .state('Entry', {
        url: '/Entry',
        templateUrl: 'App/Pages/Entry/entry.html',
        controller: 'entryController'
    })
    .state('Signup', {
        url: '/Signup',
        templateUrl: 'App/Pages/Signup/signup.html',
        controller: 'signupController'
    })
    .state('Contactus', {
        url: '/Contactus',
        templateUrl: 'App/Pages/ContactUs/contactus.html',
        controller: 'contactusController'
    })
    .state("otherwise", {
        url: "*path",
        templateUrl: "App/Pages/NotFound/notFound.html"
    });
}])

.run(["$location", function ($location) {
    // Go to state dashboard
    $location.url('/Home');

}]);

authService which handles login/register:

 app.factory('authService', ['$http', '$q', 'localStorageService', function ($http, $q, localStorageService) {

var serviceBase = '<location>';
var authServiceFactory = {};

var _authentication = {
    isAuth: false,
    userName: ""
};

var _saveRegistration = function (registration) {

    _logOut();

    return $http.post(serviceBase + 'api/account/register', registration).then(function (response) {
        return response;
    });

};

var _login = function (loginData) {

    var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;

    var deferred = $q.defer();

    $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {

        localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });

        _authentication.isAuth = true;
        _authentication.userName = loginData.userName;

        deferred.resolve(response);

    }).error(function (err, status) {
        _logOut();
        deferred.reject(err);
    });

    return deferred.promise;

};

var _logOut = function () {

    localStorageService.remove('authorizationData');

    _authentication.isAuth = false;
    _authentication.userName = "";

};

var _fillAuthData = function () {

    var authData = localStorageService.get('authorizationData');
    if (authData) {
        _authentication.isAuth = true;
        _authentication.userName = authData.userName;
    }

}

authServiceFactory.saveRegistration = _saveRegistration;
authServiceFactory.login = _login;
authServiceFactory.logOut = _logOut;
authServiceFactory.fillAuthData = _fillAuthData;
authServiceFactory.authentication = _authentication;

return authServiceFactory;
}]);

myAppPages.js and myAppCore.js are the same just their respective names :

 angular.module("myApp.Pages", []);

Edit: Seeing a "app is not defined" reference error in authService

Upvotes: 0

Views: 185

Answers (2)

ddepablo
ddepablo

Reputation: 677

You don't defined var app, so use angular.module("myApp") to define your factory

angular.module("myApp").factory('authService', ['$http', '$q', 'localStorageService', function ($http, $q, localStorageService)

Also you can declare var app = angular.module("myApp") and use app

Upvotes: 1

Pipeline
Pipeline

Reputation: 1059

I simply did not declare:

var app = angular.module(...)

And my service was referencing app when that did not exist.

Upvotes: 1

Related Questions