How to pass dynamic data from one module controller to another module controller

Question

I'm new to AngularJS, I want to pass dynamic value (username) from one controller in one module to another controller in another module. Routing and other things are working fine. This is my code

loginModule.js

(function() {

      var app = angular.module("waleteros", ["ngRoute","ui.bootstrap","ngCookies"]);

        app.config(function($routeProvider) {
            $routeProvider
            .when("/",{
                templateUrl:"views/login.html",
                controller:"LoginCtrl"
            })
        }
    })

app.js

(function() {

      var app = angular.module("waleterosAdmin", ["ngRoute","ngGrid","ui.bootstrap","ngCookies"]);

      app.config(function($routeProvider) {
        $routeProvider
            .when("/home",{
                templateUrl:"homepage.html",
                controller:"HomeCtrl"
            })
        }
    })

loginCtrl.js

(function(){

        var app = angular.module("waleteros");

        var LoginCtrl= function($scope,$location)
        {
            $scope.signIn=function(email,pin)
            {
               //Some authentication code...
               //Here i want to pass the username to homectrl.js
               window.location.href="views/home.html"
            }
        }
        app.controller("LoginCtrl", LoginCtrl);
    })

HomeCtrl.js

 (function(){

        var app = angular.module("waleterosAdmin");

        var HomeCtrl=function($scope)
        {
             //Here i want to get the username
        }

        app.controller("HomeCtrl", HomeCtrl);
    })

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

you can share service between modules ,and thus pass value between modules, please have a look here Share a single service between multiple angular.js apps ,and here sharing between modules with AngularJS?

edited May 23 '17 at 12:07

Community

1
1

answered Oct 08 '14 at 14:16

Kostia Mololkin

868
9
25

score 0 · Answer 2 · answered Oct 08 '14 at 14:16

0

You would use a service to persist the data, and then inject the service into your controllers:

app.service("SharedProperties", function () {
    var _userName = null;

    return {
        getUser: function () {
            return _userName
        },

        setUser: function(user) {
            _userName = user;
        }
    }
});

Now inject SharedProperties and use the getter/setter

var LoginCtrl= function($scope,$location, SharedProperties)
    {
        $scope.signIn=function(email,pin)
        {
           //Some authentication code...

           SharedProperties.setUser(user);
           //Here i want to pass the username to homectrl.js
           window.location.href="views/home.html"
        }
    }

var app = angular.module("waleterosAdmin");

    var HomeCtrl=function($scope, SharedProperties)
    {
         //Here i want to get the username
         var user = SharedProperties.getUser();
    }

answered Oct 08 '14 at 14:16

tymeJV

103,943
14
161
157

Where should i write app.service? i mean loginModule.js or app.js – srihari Oct 08 '14 at 14:29
Id make a new file called `services.js` – tymeJV Oct 08 '14 at 14:29
K then what about app in app.service? i mean var app = angular.module("waleterosAdmin" or "waleteros"); – srihari Oct 08 '14 at 14:43
I'm getting null value in HomeCtrl. I did var app = angular.module("waleterosAdmin"); – srihari Oct 09 '14 at 06:20

score 0 · Answer 3 · answered Oct 08 '14 at 14:28

One word of warning about services is that they persist for the lifetime of the application, i.e. they are only instantiated once. I have run into scenarios, especially once routing is implemented, where I want to wipe the data off of the service to save space and replace it with new data (you don't want to keep adding to this service every time you look at a different view). To do this, you could either write a "wipe" method that you call to clean the service on the route changes, or stick the data into a directive (on its controller), put the controllers into their own directives, and have these require the first directive, so that the data is accesible from the controller's with the added benefit of being wiped once the DOM element is declared on is destroy (on a view change, for instance).

How to pass dynamic data from one module controller to another module controller

3 Answers3

Linked