Блог

Главная - Вопросы по программированию - Как правильно использовать вложенные состояния и представления?

Как правильно использовать вложенные состояния и представления?

#angularjs #angular-ui-router

#angularjs #angular-ui-router

Вопрос:

это моя структура страницы:

         root URL '/home'
        -> toolbar
            -> tool1
            -> tool2
        -> menuLeft
        -> menuRight
        -> content of home

Как бы я написал home состояние?
Как бы выглядел другой маршрут, скажем about , если панель инструментов, menuLeft и menuRight одинаковы?

Ответ №1:

Если панель инструментов, меню слева и меню справа одинаковы на разных страницах, то они должны быть определены в основном шаблоне HTML, и у каждого из них может быть свой собственный контроллер, чтобы они могли управлять своими состояниями независимо от состояний приложения, определенных в ui-router :

 <body>
    <div id="toolbar" ng-controller="ToolbarCtrl"> ... </div>
    <div id="left" ng-controller="LeftMenuCtrl"> ... </div>

    <div id="content" ui-view>
        <!-- content here depends on what you configure in ui-router -->
        <!-- home.html for 'home' state, and 'about.html' for 'about' state -->
    </div>

    <div id="right" ng-controller="RightMenuCtrl"> ... </div>
</body>

Вот один из способов настроить ваши состояния:

 app.config(function($stateProvider) {
    $stateProvider.state('home', {
        url: '/',
        templateUrl: 'src/app/content/home.html',
        controller: 'HomeCtrl'
    }).state('about', {
        url: '/about',
        templateUrl: 'src/app/content/about.html',
        controller: 'AboutCtrl'
    });
});

Отмечено, что если вы определяете контроллер в каждом состоянии (т. Е. ‘HomeCtrl’, ‘AboutCtrl’), он будет применен ко всей странице автоматически при переходе в такое состояние — вам это не нужно ng-controller .

Ответ №2:

 function($routeProvider) {
    $routeProvider.
      when('/toolbar/:toolNumber', { // here toolnumber is a optional parameter
        templateUrl: 'partials/toolbar.html',
        controller: 'toolbarCtrl'
      }).
      when('/menuLeft', {
        templateUrl: 'partials/menuLeft.html',
        controller: 'menuLeftCtrl'
      }).
      when('/menuRight', {
        templateUrl: 'partials/menuRight.html',
        controller: 'menuRightCtrl'
      }).
      otherwise({
        redirectTo: '/home'
      });
  }]);