2016-12-16 92 views
0

我想修改blur-admin項目,添加一個帶有自己的控制器的登錄頁面。UI路由器 - 設置外部登錄頁面

所以我在頁面文件夾內創建了一個名爲demoadmin.login的控制器文件夾。 登錄工作正常,但現在,我想在儀表板之外顯示它,我的意思是作爲獨立頁面。

目前它顯示以下內容:

enter image description here

但我想外界展示它:

enter image description here

這是我app.js文件:

'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); 
}); 

一個第二我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'); 
    } 

})(); 

我如何可以設置ui-router獲得這種行爲?

回答

1

在您的index.html:

<div ui-view> 
</div> 

在你app.html

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

然後你的配置:

.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'); 
1

爲應用程序定義抽象視圖/狀態,並使用登錄名定義另一個分隔視圖。事情是這樣的:

$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', 
     } 
    }) 

的menu.html裏面喲應該有這樣的事情:

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