create a link for a single page application (SPA) to land on different tab

Question

I am developing a single page application using AngularJs. Depends on the users options, am showing/hiding the respective view.

My URL is localhost:8086/portal/ and default landing page is Dashboard.

But, there is a requirement: instead of giving localhost:8086/portal/ , I need to give a link on another page like localhost:8086/portal/reports , which should land on the Reports page by default. As, I am developing SPA, my URL wont changes, but in this case I need to land on the same URL with different landing page,by clicking on the different link.

Answer 1

My solution was to use URL re-writing so you are still landing on the SPA page but with a different URL. The routing engine will pick this up and load the correct template.

.NET web.config example.

<rule name="NewsByEmail">
   <match url="^newsbyemail/" />
   <action type="Rewrite" url="/app/newsbyemail/index.html" />
</rule>

<rule name="NewsByEmailUnsubscribe">
   <match url="^newsbyemail/unsubscribe/" />
   <action type="Rewrite" url="/app/newsbyemail/index.html" />
</rule>

Angular routing.

myApp.config(
    ($routeProvider, $locationProvider) => {
        $routeProvider
            .when("/newsbyemail/", {
                templateUrl: "app/newsbyemail/subscribe/subscribe.html"
            }).when("/newsbyemail/unsubscribe/", {
                templateUrl: "app/newsbyemail/unsubscribe/unsubscribe.html"
            });

        $locationProvider.html5Mode(true);
    }
);