Angular Dependency Injection, Passing values between modules using service

Question

I have read about the dependency injection in angular. I thought to test it. But as I inject the module, I want to pass the values from one module to another (I am outputting on console

(Edit: Solved it is giving error. Uncaught Error: No module: sisUser angular.min.js:18 It is not even evaluating the angular expression {{2+2}})

Let me explain the scenario:

Login.html

Plain simple Login for asking for two text input username and password into a service "user".

<html lang="en" ng-app="wbsislogin">
<head>
</head>
<body>
<form>
 <fieldset>
    <label>
      <span class="block input-icon input-icon-right">
         <input type="text" class="span12" ng-model="username" placeholder="Username" />
         <i class="icon-user"></i>
        </span>
    </label>

    <label>
      <span class="block input-icon input-icon-right">
          <input type="password" class="span12" ng-model="password" placeholder="Password" />
          <i class="icon-lock"></i>
      </span>
    </label>

    <div class="space"></div>

    <div class="clearfix">
    <label class="inline">
    <input type="checkbox" class="ace" />
        <span class="lbl"> Remember Me</span>
    </label>

    <button ng-click="loginbtn()" class="width-35 pull-right btn btn-small btn-primary">
       <i class="icon-key"></i>
       Login
    </button>
    </div>

    <div class="space-4"></div>
    </fieldset>
</form>
<script src="angular/angular.min.js"></script>
    <script src="wbsis.js"></script>
</body>
</html>

Dash.html

Showing just the passed username and password from login.html through the injected service

<html lang="en" ng-app="wbsislogin">
<head>
</head>
<body>
<p>{{2+2}}</p>
<div ng-controller="ditest">
    {{ usen }} {{ pasw }}
</div>

<script src="angular/angular.min.js"></script>
    <script src="wbsis.js"></script>
</body>
</html>

wbsis.js

var sisUser = angular.module("wbsislogin",[]);
var wbSis = angular.module("wbsis",["wbsislogin"]); // as per the solution 1

sisUser.controller("loginformCtrl",function($scope,user,$log,$location){
$scope.username = "s";
$scope.password = "test2";
$scope.loginbtn = function(){
    user.usern = $scope.username;
    user.passw = $scope.password;
    $log.log(user.usern,user.passw);
    window.location.href='http://sis_frnt.dev/app/dash.html';

}

});

sisUser.factory("user", [function($log){
var user = {
    usern: '',
    passw: ''
};
return user;
}]);
wbSis.controller("ditest", function($scope, $log, user){
$log.log(user.usern,user.passw);
$scope.usen = user.usern;
$scope.pasw = user.passw;

})

Please guide where I am doing wrong.

Try changing the load order of the js files. Move wbsis.js before angular.min.js — AlwaysALearner
– AlwaysALearner, Commented Nov 21, 2013 at 10:28
@CodeHater Nothing. More Errors. Uncaught ReferenceError: angular is not defined wbsis.js:1 Uncaught Error: No module: wbsis angular.min.js:18 — Siddharth Srivastva
– Siddharth Srivastva, Commented Nov 21, 2013 at 10:41

tasseKATT · Accepted Answer · 2013-11-21 10:39:15Z

1

You need to pass the name of the module as a dependency instead of the variable name.

Change:

var sisUser = angular.module("wbsislogin",[]);
var wbSis = angular.module("wbsis",["sisUser"]);

To:

var sisUser = angular.module("wbsislogin",[]);
var wbSis = angular.module("wbsis",["wbsislogin"]);

answered Nov 21, 2013 at 10:39

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Angular Dependency Injection, Passing values between modules using service

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related