Blur Admin 侧边栏菜单没有出现？答案

【问题标题】：Blur Admin sidebar menu doesn't appear?Blur Admin 侧边栏菜单没有出现？
【发布时间】：2017-04-18 22:33:13
【问题描述】：

我想使用 Blur Admin 模板在我的 Angular 应用上实现登录系统。

我知道有 auth.html，但我想要的是自定义。

我的想法是，当未经身份验证的用户打开应用程序页面时，我的应用程序将加载 login.html 内容，即 auth.html 内容并放入 index.html 否则我的应用程序将加载包含 dashboard.html 容器的 main.html 并放入index.html 然后加载dashboard.html。

所以在我的应用程序的根目录中，我有 index.html、login.html、main.html

index.html

...
all css component here
...
<body>
<div ui-view style="height: 100%;">

</div>
...
all js component here
...
</body>

login.html只是auth.html的主要内容

<main class="auth-main">
  <div class="auth-block">
    <h1>Sign in to Blur Admin</h1>
    <a href="reg.html" class="auth-link">New to Blur Admin? Sign up!</a>

    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default btn-auth">Sign in</button>
          <a href class="forgot-pass">Forgot password?</a>
        </div>
      </div>
    </form>

    <div class="auth-sep"><span><span>or Sign in with one click</span></span></div>

    <div class="al-share-auth">
      <ul class="al-share clearfix">
        <li><i class="socicon socicon-facebook" title="Share on Facebook"></i></li>
        <li><i class="socicon socicon-twitter" title="Share on Twitter"></i></li>
        <li><i class="socicon socicon-google" title="Share on Google Plus"></i></li>
      </ul>
    </div>
  </div>
</main>

main.html是修改前index.html的主要内容。

<div class="body-bg"></div>
<main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $baSidebarService.isMenuCollapsed() }">

  <ba-sidebar></ba-sidebar>
  <page-top></page-top>

  <div class="al-main">
    <div class="al-content">
      <content-top></content-top>
      <div ui-view></div>
    </div>
  </div>

  <footer class="al-footer clearfix">
    <div class="al-footer-right">Created with <i class="ion-heart"></i></div>
    <div class="al-footer-main clearfix">
      <div class="al-copy">Blur Admin 2016</div>
      <ul class="al-share clearfix">
        <li><i class="socicon socicon-facebook"></i></li>
        <li><i class="socicon socicon-twitter"></i></li>
        <li><i class="socicon socicon-google"></i></li>
        <li><i class="socicon socicon-github"></i></li>
      </ul>
    </div>
  </footer>

  <back-top></back-top>
</main>

<div id="preloader" ng-show="!$pageFinishedLoading">
  <div></div>
</div>

app/pages/pages.module.js加载我的其他页面和授权检查

/**
 * @author v.lugovsky
 * created on 16.12.2015
 */
(function () {
  'use strict';

  angular.module('BlurAdmin.pages', [
     'angularCSS', //css lazy load
    'ui.router',

    'BlurAdmin.pages.dashboard', //dashboard page
    'BlurAdmin.pages.transaksi', //my other page
    'BlurAdmin.pages.ui',
    'BlurAdmin.pages.components',
    'BlurAdmin.pages.form',
    'BlurAdmin.pages.tables',
    'BlurAdmin.pages.charts',
    'BlurAdmin.pages.maps',
    'BlurAdmin.pages.profile',

  ])
      .config(routeConfig).run(function ($rootScope, $state, authFactory){

        $rootScope.$state = $state;

            $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
                authFactory.isAuthenticated().then(function (response) {
                    //authenticated user will go to dashboard
                    $state.transitionTo('home.dashboard')
                }, function (error) {
                    event.preventDefault();
                    //unauthenticated user will go to login
                    $state.transitionTo("login");
                });

            });      
      });

  /** @ngInject */
  function routeConfig($urlRouterProvider, $stateProvider, baSidebarServiceProvider) {

    $stateProvider

    .state('home', {
        url: '/home',
        abstract: true,
        templateUrl: 'main.html',
        authenticate: true,
    })

    .state('login', {
        url: '/login',
        templateUrl: 'login.html',
        title: 'Login',
        authenticate: false,
        css: 'app/auth.css' //css lazy load
    });

    $urlRouterProvider.otherwise('/login');

    ....
    ....
    ....

app/pages/dashboard/dashboard.module.js

/**
 * @author v.lugovsky
 * created on 16.12.2015
 */
(function () {
  'use strict';

  angular.module('BlurAdmin.pages.dashboard', [])
      .config(routeConfig);

  /** @ngInject */
  function routeConfig($stateProvider) {
    $stateProvider
        .state('home.dashboard', {
          url: '/dashboard',
          templateUrl: 'app/pages/dashboard/dashboard.html',
          title: 'Dashboard',
          css: 'app/main.css', //css lazy load
          sidebarMeta: {
            icon: 'ion-android-home',
            order: 0,
          },
          authenticate: true,
        });
  }

})();

app/pages/transaksi/transaksi.module.js

(function () {
    'use strict';
    angular.module('BlurAdmin.pages.transaksi', [
        'BlurAdmin.pages.transaksi.sewa', //sub menu for transaksi
        'ngFileUpload'
    ])
        .config(routeConfig)

        function routeConfig($stateProvider){
            $stateProvider
            .state('home.transaksi', {
                url: '/transaksi',
                title: 'Transaksi',
                sidebarMeta: {
                    icon: 'ion-grid',
                    order: 100              
                }
            });
        }

})();

app/pages/transaksi/sewa/sewa.module.jstransaksi子菜单的路由

(function () {
    'use strict';

    angular.module('BlurAdmin.pages.transaksi.sewa', [])
        .config(routeConfig);

    function routeConfig($stateProvider){
        $stateProvider
            .state('home.transaksi.sewa', {
                url: '/sewa',
                templateUrl: 'app/pages/transaksi/sewa/sewa.html', //contain something simple just "this is sewa page"
                controller: 'SewaCtrl',
                title: 'Sewa',
                authenticate: true,
                sidebarMeta: {
                    order: 0
                }
            });
    }   
})();

目前我是经过身份验证的用户，所以当我打开 http://localhost:3000/account/ 时重定向到 http://localhost:3000/account/#/home/dashboard

但正如标题所说，仪表板菜单和我的自定义页面transaksi，包括子级别名称sewa并没有这样显示

我已经通过检查元素检查过，也许只是 css 问题，不幸的是没有。

当我转到http://localhost:3000/account/#/home/transaksi/sewa 时，我重定向到http://localhost:3000/account/#/home/dashboard 而不是显示this is sewa page。

为什么会发生这种情况？以及如何解决？

提前致谢。

【问题讨论】：

你的路线在哪里？对于那条路？
@aravind 哪个路径？ home/dashboard?在上面显示的dashboard.module.js。和/home pages.module.js
查看下面的答案
登录/注册场景在这里正确实现 - github.com/lwazevedo/blur-admin

标签： angularjs

【解决方案1】：

当您尝试到达这条路线http://localhost:3000/account/#/home/transaksi/sewa 时，您将肯定会被重定向。原因如下

您为每个 html 页面声明了单独的模块，这是不可取的。
您的 transaksi.sewa 模块不知道 home 或 home.transaksi 状态，因为 transaksi.sewa 不依赖于transaksi 模块。

根据您的代码，您在这里犯了一个错误 transaksi 依赖于 transaksi.sewa 模块，这应该是相反的方式。

(function () {
    'use strict';
    angular.module('BlurAdmin.pages.transaksi', [
        /*********************************************************/
        'BlurAdmin.pages.transaksi.sewa', //sub menu for transaksi
        /*********************************************************/
        'ngFileUpload'

    ])
        .config(routeConfig)

        function routeConfig($stateProvider){
            $stateProvider
            .state('home.transaksi', {
                url: '/transaksi',
                title: 'Transaksi',
                sidebarMeta: {
                    icon: 'ion-grid',
                    order: 100              
                }
            });
        }

})();

用这个替换它。

(function () {
        'use strict';
        angular.module('BlurAdmin.pages.transaksi.sewa', [
            /*********************************************************/
            'BlurAdmin.pages.transaksi', //root menu for transaksi.sewa
            /*********************************************************/
            'ngFileUpload'

        ])
            .config(routeConfig)

            function routeConfig($stateProvider){
                $stateProvider
                .state('home.transaksi', {
                    url: '/transaksi',
                    title: 'Transaksi',
                    sidebarMeta: {
                        icon: 'ion-grid',
                        order: 100              
                    }
                });
            }

    })();

孩子依赖父母，而父母不应该依赖 关于孩子

如果需要进一步的帮助，请告诉我！ :)

【讨论】：

感谢您的回答，但我不这么认为，因为我关注 Blur Admin 骨架，请在此处查看 https://github.com/akveo/blur-admin/blob/master/src/app/pages/charts/charts.module.js 和 http://akveo.com/blur-admin-mint/#/charts/amCharts