How can I have one AngularJS app affect another?

Question

I created one angularjs app that handles user creation. By choosing a user type, it'll display the required input fields. Once you hit submit, it'll send the json over to the server. I've gotten that far.

My question is, once I've created the new user row in my db, I want to send back that row to the client so I can immediately prepend it to my currently displayed table of users.

I've done this in a previous project via jQuery quite easily, but it was a bit less encapsulated than I'd like.

So once my user creation app (CreateUser) completes and receives data from the server, how would I push or bind that information to my user viewing table (ViewUsers) app? I'd rather keep them separate so I can drop them in widget-style without requiring them both each time.

Here's my first app code:

function CreateUsers($scope, $http){
    $scope.selectedType = '';
    $scope.formData = {};
    $scope.method = 'POST';
    $scope.url = '/createUser';
    $scope.types = [
        'Student',
        'Parent',
        'Teacher',
        'Staff'
    ];

    $scope.fields = {
        User:[
            {name: 'First Name', value: 'first_name'},
            {name: 'Last Name', value: 'last_name'},
            {name: 'Email', value: 'email'},
            {name: 'Phone', value: 'phone'}
        ],
        Employee:[
            {name: 'Start Date', value:'start_date'},
            {name: 'Branch', value:'branch'}
        ]
    };
    $scope.fields.Student = $scope.fields.User;
    $scope.fields.Parent = $scope.fields.User;
    $scope.fields.Employee = $scope.fields.User.concat($scope.fields.Employee);
    $scope.fields.Teacher = $scope.fields.Employee;
    $scope.fields.Staff = $scope.fields.Employee;


    $scope.createNewUser = function(){
        this.formData.type = this.selectedType;
        console.log($scope);
        console.log($scope.formData);

        $http({
            method: $scope.method,
            url:    $scope.url,
            data:   $scope.formData
        }).success(function(data,status){
            $scope.status = status;
            $scope.data = data; 
            console.log($scope);
        }).error(function(data,status){
            $scope.data = data || 'Request failed';
            $scope.status = status;
            console.log($scope);
        });
    }
}

Thanks a lot for reading.

Just a thought: you have all the information on the client; expect your server to return e.g. a boolean in case of success and append your existing values to whatever needs to be appended. — roland
– roland, Commented Dec 23, 2013 at 10:35
That's a great idea! Ideally I'd like my other app to contain an array of users which would be shown using "user in users." I guess I'm confused at how I would prepend that to the users array in my 2nd app — Keith
– Keith, Commented Dec 23, 2013 at 10:48
Take look at this answer which explains how to share data across controllers using a service. The 'create user' http request can either return the id of the new user or the user model itself. The new user can then be added to the collection of users. — Gruff Bunny
– Gruff Bunny, Commented Dec 23, 2013 at 11:26

ruedamanuel · Accepted Answer · 2013-12-23 22:23:45Z

1

Subscribe your first app to $rootScope:

function CreateUsers($scope, $http, $rootScope){
//...
}

and in your $http success handler add:

$rootScope.$broadcast("userCreated", user);

where user is the data you'd like to add to your users array, and then in your second app add a listener to that event:

$scope.$on("userCreated", function(e, user){
    //push the info to your users array here.
});

That should work for what you're describing.

answered Dec 23, 2013 at 22:23

ruedamanuel

1,9281 gold badge23 silver badges24 bronze badges

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

3 Comments

Keith Over a year ago

that worked perfectly! I'm surprised that you listen for the event on $scope instead of $rootScope; why is that? Thanks for the help

ruedamanuel Over a year ago

There is only one $rootScope per application while you can have several $scopes that depend on that global $rootScope, so when you broadcast to the rootscope, all scopes will have access to that event and you can localize the responses to it by using $scope.$on. Glad it worked!

Keith Over a year ago

thanks for the follow-up! that really enabled me to do a lot more than i could before

Collectives™ on Stack Overflow

How can I have one AngularJS app affect another?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related