Only change one view with ui-router and AngularJS

Question

Say you have a website that has 3 different routes, /news, /about, and /signup.

News and about are their own "pages", while signup is just an overlay that can be toggled on either /news or /about.

If you visit /signup on /news or /about, the corresponding page would still be visible underneath the signup overlay. If you go straight to /signup, it would show the site's root (/news for the sake of clarity) underneath.

Is this possible? Is it possible to, using AngularJS and ui-router (or angular-router?), have multiple views and various routes that change one view while leaving another unchanged.

I've taken a look at this link: angularjs ui-router - how to build master state which is global across app

But it seems that all it does is define a default value for a ui-view in the case none is declared in the current route.

The setup is pretty basic:

<div class="main" ui-view="main"></div>
<div class="overlay" ui-view="overlay"></div>

And I want to activate the overlay view, via url, without changing what's displayed in main.

Answer 1

Don't you mean sign in instead of signup? Yes it is possible. Use three states

$stateProvider.state("signup", {
    url: "/signup",
     views: {
                "overlay": {
                    templateUrl: "signup.html",
                    controller: "SignupController"
                },
                "main": {
                    templateUrl: "news.html",
                    controller: "NewsController"
                }
              }    
  })


  .state("news", {
         url: "/news",
         views: {
                "overlay": {
                    templateUrl: "signup.html",
                    controller: "SignupController"
                },
                "main": {
                    templateUrl: "news.html",
                    controller: "NewsController"
                }
              }    
  })

.state("news", {
         url: "/about",
         views: {
                "overlay": {
                    templateUrl: "signup.html",
                    controller: "SignupController"
                },
                "main": {
                    templateUrl: "about.html",
                    controller: "AboutController"
                }
              }    
  });

Signup overlay template will load in all three states. If signup URL is loaded (signup state), if user is not logged in, show the overlay else go to news state.

If user goes directly to News or About URL, if user is not logged in, show the overlay else don't show overlay

You may use state resolve to check if user is logged in or not and then hide/show it.