Setting up UI router for an external login page

Question

Setting up UI router for an external login page

I have been working on enhancing the blur-admin project by adding a login page along with its own controller.

To achieve this, I created a separate controller folder within the pages directory called demoadmin.login. The login functionality is performing well within the dashboard, but now my goal is to display it as a standalone page.

Currently, it appears like this:

https://i.sstatic.net/kFx96.png

However, I would like it to be displayed outside as shown here:

https://i.sstatic.net/X0gTY.png

Below is an excerpt from my app.js file:

'use strict';

angular.module('bluradmin', [
    'ngAnimate',
    'ui.bootstrap',
    'ui.sortable',
    'ui.router',
    'ngTouch',
    'toastr',
    'ui.slimscroll',
    'angular-progress-button-styles',
    'ngStorage',
    //'smart-table',
    //"xeditable",
    //'ngJsTree',

    'bluradmin.theme',
    'bluradmin.pages',
    'bluradmin.login'
]).run(function ($localStorage) {
    console.log($localStorage);
});

In addition, I made changes to my pages.module.js:

(function () {
    'use strict';

    angular.module('bluradmin.pages', [
        'ui.router',
        'bluradmin.pages.dashboard'
    ])
        .config(routeConfig);

    /** @ngInject */
    function routeConfig($urlRouterProvider, baSidebarServiceProvider) {
        $urlRouterProvider.otherwise('/login');
    }

})();

What steps can I take to configure the ui-router in order to achieve this desired behavior?

javascript angularjs angular-ui-router

Answer 1

Answer №1

When setting up your project:

<div ui-view>
</div>

In your application's main layout file:

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

Next, configure the routes in your app:

.config(function ($stateProvider, $urlRouterProvider) {


    $stateProvider

        .state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
    })

    .state('app', {
            url: '/app',
            templateUrl: 'templates/app.html'
        })

     .state('someOtherState', {
         parent: 'app',
         url: '/someUrl',
         templateUrl: 'templates/someTemplate.html'
     })

    $urlRouterProvider.otherwise('/login');

Answer 2

When setting up your project:

<div ui-view>
</div>

In your application's main layout file:

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

Next, configure the routes in your app:

.config(function ($stateProvider, $urlRouterProvider) {


    $stateProvider

        .state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
    })

    .state('app', {
            url: '/app',
            templateUrl: 'templates/app.html'
        })

     .state('someOtherState', {
         parent: 'app',
         url: '/someUrl',
         templateUrl: 'templates/someTemplate.html'
     })

    $urlRouterProvider.otherwise('/login');

Answer 3

Answer №2

To establish a distinct abstract view/state for the application, as well as delineate another separate view specifically for the login functionality, follow this example:

$stateProvider
    .state('app', {
        url: '/',
        abstract: true,
        templateUrl: 'menu.html'
    })

    .state('app.home', {
        url: 'home',        
        views: {
            'page-view': {
                templateUrl: 'home.html',
            }
        }
    })

    .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        }
    })

Within the menu.html file, include the following structure:

<div ui-view="page-view"></div>

Answer 4

To establish a distinct abstract view/state for the application, as well as delineate another separate view specifically for the login functionality, follow this example:

$stateProvider
    .state('app', {
        url: '/',
        abstract: true,
        templateUrl: 'menu.html'
    })

    .state('app.home', {
        url: 'home',        
        views: {
            'page-view': {
                templateUrl: 'home.html',
            }
        }
    })

    .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        }
    })

Within the menu.html file, include the following structure:

<div ui-view="page-view"></div>

Setting up UI router for an external login page

Answer №1

Answer №2

Similar questions

The delete function is not functioning

In Node.js, the module.exports function does not return anything

Select all or deselect all options in a multiple-choice checkbox

Could we confirm if this straightforward string is considered valid JSON data?

Is it possible to extract the value from the JSON response using this.responseText?

Necessary workaround needed for HTML time limit

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

AJAX Communication Issue: Data not transferring from client-side to backend in C# MVC 5 via HTTP

The ng-click directive is not functioning within a script tag

Is it possible for you to enter "1.00" instead of just 1 when using the input type as number?

Having a flash video load on a new page in the same position as it was on the previous page

The implementation of recursive setTimeout function on a randomly selected index in an array is failing to execute properly in JavaScript

Creating a Selectable Child Form in ReactJS that Sends Data to Parent Form

I need RxJs to return individual elements to the subscriber instead of an array when using http.get

Flowplayer playlist stops after playing the first clip

The JQuery pagination feature fails to function properly once an AJAX load is initiated

Exploring Android Webview capabilities using HTML 5 geolocation

Testing React Hooks in TypeScript with Jest and @testing-library/react-hooks

Encasing the window global variable within an AngularJS framework

What steps can I take to ensure that my server is easily accessible to all users?