akveo / blur-admin

AngularJS Bootstrap Admin Panel Framework
http://akveo.github.io/blur-admin/
Other
11.36k stars 3.1k forks source link

Side bar opens the view in full window(overlapping full page) . #74

Open brijesh1ec opened 8 years ago

brijesh1ec commented 8 years ago

1) after login application goes to main.html page which shows main layout(side bar, header, footer). 2) created landing page(Main.html) which will have menus , Top header(user profile), footer, and index.html(root file). after this.(it was there in index.html page under body tag). 3) added ui-view(unnamed) to landing page(main.html). that will load the content on click of menus in sidebar.(ladning page does't have any body tag) only div, other html controls required. 4) Index.html having another ui-view(un named). under body tag. which loads the login into index.html(root) file.

after login page it goes to Main.html page,

ISSUE--

on click of menu in sidebar it, opens the page with parent(index.html) file(UI-VIEW), overrides the same page, it should open views with main.html(in same window).

Possible solution 1) named view should be used, 2) can we change sidebar position out of main section, 3) Parent UI-view scope is overriding the Main.html ui-view.

Please suggest thanks in advance.

vazh commented 8 years ago

i cant understand what you mean at all. please give information about your route structure, what is inside index.html, main.html, etc. give example by plunkr, or paste your code here.

brijesh1ec commented 8 years ago

Index.html page contents. which loads the login page.

<!DOCTYPE html>

Root page ``` ``` ```
```
brijesh1ec commented 8 years ago

login.html ///

<!DOCTYPE html>

app ``` ```

App

```
brijesh1ec commented 8 years ago

////// login controller to check and validate the user who has logged in/////// logincontroller.js under app->pages->login

(function () {

'use strict';

//get the module and invoke controller function   

angular.module('app.pages.login').controller('loginController', ['$scope', '$http', '$state', '$cookies', 'loginServices', fnLoginController]);
/* jshint validthis: true */

function fnLoginController($scope, $http, $state, $cookies, loginServices) {

    var loginViewModel = this;
    loginViewModel.loginData = { UserId: 0, Email: "", Role: "", IsAuthenticated: false, Password: "" };
    loginViewModel.Title = "Login";
    loginViewModel.login = loginService;
    loginViewModel.loginAuthenticatedData = {};
    loginViewModel.loginmessage = { ErrorMessage: "", ServiceErrorMessage: "Sorry ,You are not Authorized Person to Login..." };

    loginViewModel.isProcessed = false;

    function loginService() {
        loginViewModel.isProcessed = true;
        var validateUser = loginServices.loginUser(loginViewModel.loginData);

        ////////////// Route the user based on authentication /////////////
        /// <reference path="../Welcome/Home.html" />
        validateUser.then(function (loginResponse) {
            loginViewModel.loginAuthenticatedData = loginResponse.data;
            // alert(loginViewModel.loginAuthenticatedData.IsValid);
            if (loginResponse != null && loginViewModel.loginAuthenticatedData.IsValid == true) {

                //show dashborad to authenticated user//
                $cookies.Email = loginViewModel.loginAuthenticatedData.Email;
                $cookies.put("USER", loginViewModel.loginAuthenticatedData.Email);
                var User = $cookies.get("USER");
                         $state.go('main');
                // $state.go('Welcome', {}, { reload: true });
                //$state.go($state.current, {}, { reload: true });
                console.log('logged in successfully.');
            } else {

                loginViewModel.loginmessage.ErrorMessage = loginViewModel.loginAuthenticatedData.ErrorMessage;
            }

        }, function (loginfailResponse) {
            loginViewModel.loginAuthenticatedData = loginfailResponse.data;
            //// when authentication fails becasue of some failure of system
            if (loginfailResponse.status == "-1") {

                loginViewModel.loginmessage.ErrorMessage = loginViewModel.loginmessage.ServiceErrorMessage;
                console.log('log-in failed. API Services are down');
            } else {

                if (loginfailResponse == null || loginfailResponse.data == null) {
                    // alert('fail login');
                    loginViewModel.loginmessage.ErrorMessage = loginViewModel.loginmessage.ServiceErrorMessage;
                    console.log('log-in failed')
                } else {

                    if (loginfailResponse != null && loginViewModel.loginAuthenticatedData.IsValid == false) {
                        loginViewModel.loginmessage.ErrorMessage = loginViewModel.loginAuthenticatedData.ErrorMessage;
                        console.log('log-in failed.');
                    }
                }
            }

            if (loginfailResponse.status == "500" || loginfailResponse.status == "404") {

                loginViewModel.loginmessage.ErrorMessage = loginViewModel.loginmessage.ServiceErrorMessage;
                console.log(loginfailResponse.data);
            }

        }).finally(function (reset) {

            loginViewModel.isProcessed = false;
        });

        ////////////// END Route the user based on authentication /////////////

    }
}

})();

brijesh1ec commented 8 years ago

login.module.js - app->pages->login.

(function () { 'use strict';

angular.module('app.pages.login', [])
  .config(routeConfig);

/** @ngInject */
function routeConfig($stateProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'app/pages/login/login.html'

            //sidebarMeta: {
            //    icon: 'fa fa-home',
            //    order: 0,
            //},
        });
}

angular.module('app.pages.login').constant("utility", { baseAddress: "http://localhost:54902/api/" });

})();

brijesh1ec commented 8 years ago

main.html page State.go('main') redirects spa here

[main.html file.txt](https://github.com/akveo/blur-admin/files/322096/main.html.file.txt)
brijesh1ec commented 8 years ago

main.module.js

(function () { 'use strict';

angular.module('app.pages.main', []).config(routeConfig);

/** @ngInject */
function routeConfig($stateProvider) {
    $stateProvider
        .state('main', {
            url: '/main',
             templateUrl: 'app/pages/main/main.html',
            sidebarMeta: {
                icon: 'ion-android-home',
                order: 0,
            },

        });
}

})();

brijesh1ec commented 8 years ago

main page sidebar opens in full page

Main appears in side bar as home link , onclick of it , it doesn't open inside right column(content), it opens in full page, same behavior for all menus, what i am missing or doing wrong

pinich commented 7 years ago

I have the same issue ! Have you figured out what causes this issue ?