在angular js中添加自定义服务时出错

Question

I'm new in AngularJS and i have setup everything in angular js but when i'm going add new authentication service then i'm getting error like this:

I have create service called sessionService.js for set and get user value in session
I have create service called authService.js for checking user authentication and get username and it etc

Here is sessionService.js

'usre strict';

app.factory('sessionService', ['$http', function($http){
    return {
        set : function(key,value){
            return sessionStorage.setItem(key,value);
        },
        get : function(key){
            return sessionStorage.getItem(key);
        },
        destroy : function(key){
            return sessionStorage.removeItem(key);
        }
    }
}])

Here is authService.js

'use strict';

app.factory('authService', ['$http','sessionService', function($http,sessionService){
      var loggedIn;
    var isAdmin;
    var username;
    var id;

    var checkLogin = function() {
        // Create a custom deferred
        var defer = $q.defer();

        if(loggedIn != undefined) {
            // Resolve your deferred with the value of logged in
            defer.resolve(loggedIn);
        } else {
            setUserData().then(function (data) {
               loggedIn = data.logged;
               if(loggedIn) {
                  isAdmin = data.is_admin;
                  username = data.username;
                  id = data.id;
                  defer.resolve(loggedIn);
               } else {
                  defer.reject();
               }
            }, function () {
               defer.reject();
            });
        }

        return defer.promise;
    }

    var returnUsername = function() {
        // Create a custom deferred
        var defer = $q.defer();

        if(username != undefined) {
            // Resolve your deferred with the value of logged in
            defer.resolve(username);
        } else {
            setUserData().then(function (data) {
               loggedIn = data.logged;
               if(loggedIn) {
                  username = data.username;
                  defer.resolve(username);
               } else {
                  defer.reject();
               }
            }, function () {
               defer.reject();
            });
        }

        return defer.promise;
    }

    var returnId = function() {
        // Create a custom deferred
        var defer = $q.defer();

        if(id != undefined) {
            // Resolve your deferred with the value of logged in
            defer.resolve(id);
        } else {
            setUserData().then(function (data) {
               loggedIn = data.logged;
               if(loggedIn) {
                  id = data.id;
                  defer.resolve(id);
               } else {
                  defer.reject();
               }
            }, function () {
               defer.reject();
            });
        }

        return defer.promise;
    }

    var setUserData = function(callback) {
        return $http.get('/api/checkLogin');
    }

    return {
        loggedIn: function() { return checkLogin(); },
        username: function() { return returnUsername(); },
        id: function() { return returnId(); },
    }
}])

I have added this both service in index.html also

  <script src="js/app.js"></script>
  <script src="js/config.js"></script>
  <script src="js/config.lazyload.js"></script>
  <script src="js/config.router.js"></script>
  <script src="js/main.js"></script>
  <script src="js/services/ui-load.js"></script>
  <script src="js/services/sessionService.js"></script>
  <script src="js/services/authService.js"></script>
  <script src="js/filters/fromNow.js"></script>
  <script src="js/directives/setnganimate.js"></script>
  <script src="js/directives/ui-butterbar.js"></script>
  <script src="js/directives/ui-focus.js"></script>
  <script src="js/directives/ui-fullscreen.js"></script>
  <script src="js/directives/ui-jq.js"></script>
  <script src="js/directives/ui-module.js"></script>
  <script src="js/directives/ui-nav.js"></script>
  <script src="js/directives/ui-scroll.js"></script>
  <script src="js/directives/ui-shift.js"></script>
  <script src="js/directives/ui-toggleclass.js"></script>
  <script src="js/controllers/bootstrap.js"></script>

And in app.js

'use strict';


angular.module('app', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngSanitize',
    'ngTouch',
    'ngStorage',
    'ui.router',
    'ui.bootstrap',
    'ui.utils',
    'ui.load',
    'sessionService',
    'authService',
    'ui.jq',
    'oc.lazyLoad',
    'pascalprecht.translate',
]);

I need help for solving this issue.
I'm using Angular Bootstrap Admin panel for it.
Any help would be appreciated.

Thank you

Answer 1

The error is that you are treating sessionService and authService as a module and loading them as dependency in your app . They are services and not the modules. Even the error says the same. The services can be injected in other services but cannot be loaded as module dependencies.

Change your code in app.js to remove the services as below:

'use strict';


var app = angular.module('app', [
  'ngAnimate',
  'ngAria',
  'ngCookies',
  'ngMessages',
  'ngResource',
  'ngSanitize',
  'ngTouch',
  'ngStorage',
  'ui.router',
  'ui.bootstrap',
  'ui.utils',
  'ui.load',
  'ui.jq',
  'oc.lazyLoad',
  'pascalprecht.translate',
]);

Answer 2

在所有其他文件之后添加app.js脚本。

Answer 3

Is your app was instantiated globally to be used in other js files. Let's say

App.js

var app = angular.module('app',[dependencies]);
$(function(){
//Other code
}());

And using instantiated app in other js files.