Question

这是我的页面结构：

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

我如何撰写home州？如果工具栏，menuLeft和menuRight是相同的话，如何看另一条路线让我们说about？

Answer 1

如果工具栏，左侧菜单和右侧菜单相同，则应在主HTML模板中定义它们，并且每个模板都可以拥有自己的控制器，以便它们可以独立于{中定义的应用程序状态来管理其状态。 {1}}：

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>

注意，如果您在每种状态下定义控制器（例如，＆＃39; HomeCtrl＆＃39;，＆＃39; AboutCtrl＆＃39;），当您导航到此状态时，它将自动应用于整个页面 - - 你不需要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' }); });。

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

如何使用嵌套状态＆amp;观点正确吗？

2 个答案: