How can I make two pages AngularJS share the same $scope?

Question

I want to use angularJS in my web site. But I want to use it in several pages.

The problem is when someone tried to access these pages, they behave like two apps since $scope is different to these apps. But I want to use these pages as a same app by sharing the same memory space of angularJS.

How can I do that?

Answer 1

It's not possible for entirely different page loads.

But after all $scope means some data. You want to enable that data for the other pages as well.

One thing you can do is when you switch between pages you can transfer the data ($scope) into the other page and that app(page) can initialize that data. Then it'll work as sharing the same $scope. But this will be poor approach if you switch between pages frequently.

Answer 2

General answer is NO. But,

The normal flow of a browser receiving an event is that it executes a corresponding JavaScript callback. Once the callback completes the browser re-renders the DOM and returns to waiting for more events.

So, after you redirected to a pages which doesn't use any of this $scope or child scope, javascript objects (scope models) to be reclaimed by the garbage collector.

So, there is not possible simple way to do that. Except the parameter passing to the new scope while page is redirected.

But if you find ways to stop the $scope.destroy() call from scope creator and link that DOM to the other page's $scope. Conceptually that is possible (But I don't know how to do that). If you are desperate to use angular in that approach, then you can do some research on that.

Otherwise pass the $scope parameter or required fields of the $scope to the other app. That'll do what you want. But as @Simon57 says; it'll be poor approach if you switch between apps frequently.

More: http://docs.angularjs.org/guide/scope