Question

我现在试图绕过angularjs和ui-router，我的应用程序基本上分为3个布局（营销布局，身份验证布局和应用程序布局）。我目前正在努力让我的ui-router工作让我这样做，我明白我可以拥有抽象的父状态（正确吗？）但我很难让子状态继承父视图等。

基本上我想要做的是以下内容 - 我将使用网站的应用程序部分作为示例。

用户已登录已登录，并且屏幕分为标题，侧边栏和主要内容区域，用户进入网站的应用程序部分，标题和侧边栏将保留，但主要内容将更新到相关内容。这是我到目前为止所拥有的

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider){

$urlRouterProvider.otherwise('/application/dashboard');

$stateProvider
    .state('application', {
        abstract : true,
        views : {
            '@' : {
                templateUrl : 'templates/layout.html',
                controller : 'applicationController'
            },
            'top@index' : {
                templateUrl : 'templates/app/header.html'
            },
            'left@index' : {
                templateUrl : 'templates/app/sidebar.html'
            },
            'main@index' : {
                templateUrl : 'templates/app/main.html'
            }
        }
    })
    .state('application.dashboard', {
        url : '/application/dashboard',
        views : {
            '@' : {
                templateUrl : 'templates/schools/manage.html',
                controller : ''
            },
            'main@app' : {
                templateUrl : ''
            }
        }
    })

}]）;

https://plnkr.co/edit/6fJNjTFhoKqyN82P7NvL?p=preview

您可以看到我可以看到manage.html模板，但在预览中我还应该看到header.html模板中的页眉，以及sidebar.html ...

关于我为什么不是的任何想法？我认为这是我做错了。

Answer 1

如果我理解你在说什么，你基本上想要一个Header，Sidebar和MainContent的应用程序框架。唯一应该改变的是MainContent。标题或侧边栏的内容可能会发生变化，但它们会持久存在。

我个人认为路由器应该与此无关;路由器应该路由。让它成为数据总线和应用程序状态管理器似乎紧密地结合了不应该做的事情。

无论如何，说到这里，我就是这样做的。在我的index.html中，这是我的标记：

<body ng-app="app">
    <div header-directive></div>
    <div ng-view></div>
    <div footer-directive></div>
</body>

那就是它。如果你有其他元素并需要它们响应，只需使用一个引导网格（比如放在侧边栏或其他任何东西）。如果你不必担心任何一个问题，那就好了。简单的html表完美地完成了这项工作。您可以使用CSS来进行固定定位，高度等。

使用此设置，页眉和页脚永远不会消失，路由器只会更改ng-view中的内容。你使用路由器是唯一的术语＆＃34; router＆＃34;有意义：从这里路由到那里。这是一个示例路由器配置：

.config(['$routeProvider', ...

        function ( $routeProvider, ... ) {

            $routeProvider.

                when('/home', {
                    templateUrl: 'views/home.html',
                    controller: 'HomeController',
                    controllerAs: 'homeCtl'
                })

                .when('/info', {
                    templateUrl: 'views/info.html',
                    controller: 'InfoController',
                    controllerAs: 'infoCtl'
                })

                ....

对于三个组件之间的通信，您可以创建一个他们都注入的服务。这样，您可以发送任何一个元素（或所有元素）指令来更改其内容，隐藏/显示自己，无论您需要什么。

Angular有时会使一些简单的事情过于复杂。这绝对是其中之一。 Angular 2中的路由器是一个复杂的庞然大物。

angularjs ui-router持久页面元素

1 个答案: