多个命名视图

Question

我正在使用Angularjs 1.4.2和ui-router进行一些重构，而且我不确定适当的架构应该用于改变。

目前，我们正在使用$ state.go（＆＃34; main＆＃34;）;呼叫主要路线以及所有后续路由，它们是具有html页面，控制器和服务的独立组件。我认为这是因为只有主要内容是动态的。

标题部分被硬编码到index.html页面中，因为我猜这是一个快速修复。所有页面的标题内容都必须相同。

我尝试做的是将index.html中的标头html代码分成两个不同的标题页，这些标题页使用新的headerController并将其与现有的app结构合并，除非这是错误的建筑。我有一个简单的plunker尝试让它独立工作，但是当我点击按钮时，它什么也没做。

所以我有两个问题，具有两个不同标题的应用程序的正确ui-router结构是什么，以后可能会增加一两个？我假设我想为此使用两种不同的状态，而不是使用url路由，但我可以使用其中任何一种。

第二个问题是：为什么我的plunker没有工作？

app.js

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
  document.write("In config!");
    $stateProvider
        .state('headerA', {
            url: "/headerA",
            templateUrl: "headerA.html",
            controller: "headerController"
        })
        .state('headerB', {
            url: "headerB",
            templateUrl: "headerB.html",
            controller: "headerController"
        })
});

myApp.controller('headerController', function($scope) {
  document.write("In config!");
   $scope.messageA = 'This is headerA!';
   $scope.messageB = 'This is headerB!';
})

headerA.html

<div>
  {{messageA}}
</div>

headerB.html

<div>
  {{messageB}}
</div>

的index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js" data-semver="1.5.2" data-require="angular.js.1.3@*"></script>
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js">
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <!-- define angular controller -->
  <body ng-controller="headerController">
     <p></p>
    <div ui-view=""></div> 
     <p></p>
     <p></p>
    <a class="btn btn-primary" ui-sref="headerA">headerA</a>
    <p></p>
    <a class="btn btn-danger" ui-sref="headerB">headerB</a>
  </body>

</html>

Answer 1

我最终在Codepen中重新创建了这个。无论出于何种原因，我都无法让Plunkr和JSFiddle正常工作。

多个命名视图

UI路由器允许您在每种状态下设置多个视图。你只需要：

1）在模板中命名视图

就像<div ui-view="header">

一样简单

2）在状态

内声明命名视图

$stateProvider.state( name, {
    views:{
         header: { ... }
         main: { ... }
    }
})

资源

多个命名视图上的UI-Router文档 - docs
CodePen示例（抱歉，我在Jade / Coffeescript中掀起了这个，很容易理解） - example

如何使用ui-router构建两个不同的头文件？

1 个答案:

多个命名视图

1）在模板中命名视图

2）在状态

资源