如何在 Angular 中的基本 HTML 视图中加载视图

how to load views in a base html view in angular?

本文关键字：视图 加载 HTML Angular      更新时间：2023-09-26

我需要在一个基本的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>

在标题中我需要加载标题.html <ui-view name="content"></ui-view>我需要加载内容.htmlhttp://plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview谢谢

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

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

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

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

编辑

查看此 PLNKR

您的代码存在一些问题

（1） 使用 UI 路由器，则注入$stateProvider而不是$routeProvider

（2） 使用 UI-View 而不是 ng-view

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

（4） UI-View 中的 UI 视图将创建另一个状态。 

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);
相关文章：