Question

我正在构建一个MEAN应用程序并且遇到了处理 ui-router 的麻烦。我有一个index.html，其中我有整个网站的模板，其中包含标题，侧边栏和我放置<div ui-view>的内容。在这个文件中，我还加载了所有必需的javascript，如 angular，ui-router，bootstrap，ocLazyLoad等。

每个局部视图都放在带有ui-router状态的index.html内容中。我的ui-router以这种方式配置：

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

    $stateProvider

        .state('home', {
        url: '/home',
        templateUrl: '../views/home.html',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'myApp',
                    files: [
                        'js/controllers/homeCtrl.js'
                    ]
                }]);
            }]
        }
    })
});

到目前为止，我控制了一切。我的问题是：如何创建没有标题和侧边栏的状态 login.html，因为如果用户未登录，我不想显示任何选项但是登录。如何最安全，最好的方法来实现这一目标？

提前致谢。

Answer 1

我的网站与您分享了相同的案例。我做的是我有两种状态：登录和家庭。登录状态将指向登录页面，主页状态将指向home.html。以下是home.html的示例：

<div id="wrapper" ng-class='{"toggled" : $root.toggle }'>
  <div ng-include="'components/sidebar/sidebar.html'"></div>
  <div ng-include="'components/navbar/navbar.html'"></div>
    <div id="page-content-wrapper">
        <div class="container-fluid">
        <!-- <ui-breadcrumbs displayname-property="data.displayName" abstract-proxy-property="data.proxy" ></ui-breadcrumbs> -->
        <ui-breadcrumbs displayname-property="data.displayName" template-url="components/breadcrumb/uiBreadcrumbs.tpl.html"></ui-breadcrumbs>
            <div ui-view="home"></div>
        </div>
    </div>
</div>

因此，用户登录后的所有州应该是孩子的家庭状态

使用ui-router的一些视图中的角度部分

1 个答案: