如何在角度的基本html视图中加载视图？

Question

我需要在基本html文件中加载两个html文件。换句话说，我在基本HTML文件中具有标头和竞争视图。我需要在标头和竞争视图中加载不同的HTML文件。这是基本HTML文件

<div class="container">

    <div class="row page-header">
        <ui-view name="header"></ui-view>
    </div>

    <ui-view name="content"></ui-view>

    <div class="row">
        <div class="col-xs-12">
            <hr>
            <p class="text-center">Test Come</p>
        </div>
    </div>
</div>

在这种观点下

  <ui-view name="header"></ui-view>

在标题中，我需要加载header.html和<ui-view name="content"></ui-view>在此我需要加载content.html http://plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview谢谢

Answer 1

您需要根据子状态更新状态：

var config = function($stateProvider,$urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
       $stateProvider
       .state('main', {
        url: '/',
        views: {

            // the main template will be placed here (relatively named)
            '': { templateUrl: 'base.html' },


            // the child views will be defined here (absolutely named)
            'content@main': { template: 'contend.html' },

            // for column two, we'll define a separate controller 
            'header@main': { 
                templateUrl: 'header.html',

            }
        }

    });
};

Answer 2

您只能拥有一个ng视图。 您可以通过几种方式更改其内容：ng-include，ng-switch或通过routeProvider映射不同的控制器和模板。

UI-Router是一个可以提供帮助的项目： https : //github.com/angular-ui/ui-router它的功能之一是多​​个并行视图

编辑

检出此plnkr

您的代码有问题

（1）如果使用ui-router，则注入$ stateProvider而不是$ routeProvider

（2）使用ui-view而不是ng-view

（3）您可以在同一模板级别拥有多个视图。 如果尝试在ui-view中定义ui-view并在单个状态下创建多个ui-view，则它将不起作用。

（4）ui-view里面的ui-view将创建另一个状态。

var app=angular.module("firstApp",['ui.router']);
var config = function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
   $stateProvider
    .state('base', {
      url: "/",
        views: {
        "content": { templateUrl: "contend.html" },
        "header": { templateUrl: "header.html" }
      }
    })
};
config.$inject = ['$stateProvider', '$urlRouterProvider'];

var loginCntrl=function($scope){

}
loginCntrl.$inject=['$scope']

app.config(config);
app.controller(loginCntrl);