It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div.
This is how I have currently implemented it:
$stateProvider
.state('home', {
url: '/',
cache: false,
templateUrl : 'resources/components/home/home.html',
controller : 'homeController',
}).state('main', {
url: '/main',
templateUrl : 'resources/components/dashboard/main.html',
controller : 'dashboardController',
}).state('main.profile', {
url: '/profile',
templateUrl : 'resources/components/clinicprofile/profile.html',
controller : 'profileController',
My current method functions as follows...
Initially, at the homepage (/#), the login page is displayed. Once a user logs in, they are redirected to #/main where only the left menu bar is visible. When a user navigates to the profile page, the URL changes to #/main/profile due to the UI view in main.html, allowing all other views to be included within it (such as profile and setting).
What I would like to achieve is for a logged-in user to be directly redirected to /profile upon login, with the left column visible. If the user then clicks on "setting" from the left menu, they should be directed to /setting without requiring a full page reload and retaining the content of main.html on each separate page. This raises the question of the purpose of a SPA if every page includes full content like header, footer, and left menu bar. Is there a solution that allows the left column to remain while enabling users to access pages with cleaner URLs such as /profile or /setting instead of /main/profile or /main/setting?
I hope this clarifies my query.