如何在 angular 中的基础 html 视图中加载视图?
how to load views in a base html view in angular?
我需要在基础 html 文件中加载两个 html 文件。换句话说,我有基础 html 文件,其中有 header 和竞争视图.我需要在 header 和竞争视图中加载不同的 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中我需要加载header.html和<ui-view name="content"></ui-view>
在这个我需要加载content.html
http://plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview
谢谢
您可以只有一个 ng-view。
您可以通过多种方式更改其内容:ng-include、ng-switch 或通过 routeProvider 映射不同的控制器和模板。
UI-Router 是一个可能有帮助的项目:https://github.com/angular-ui/ui-router它的一个特性是多个并行视图
编辑
检查这个 plnkr
您的代码有问题
(1) 注入 $stateProvider 而不是 $routeProvider 如果你是 uing ui-router
(2) 使用 ui-view 代替 ng-view
(3) 您可以在同一模板级别拥有多个视图。如果您尝试在 ui-view 中定义 ui-view 并在单个状态下创建多个 ui-view,它将不起作用。
(4) ui-view inside 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);
您需要根据子状态更新您的状态:
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',
}
}
});
};
我需要在基础 html 文件中加载两个 html 文件。换句话说,我有基础 html 文件,其中有 header 和竞争视图.我需要在 header 和竞争视图中加载不同的 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中我需要加载header.html和<ui-view name="content"></ui-view>
在这个我需要加载content.html
http://plnkr.co/edit/nMhlb0R1q3BhWBHEjCks?p=preview
谢谢
您可以只有一个 ng-view。 您可以通过多种方式更改其内容:ng-include、ng-switch 或通过 routeProvider 映射不同的控制器和模板。
UI-Router 是一个可能有帮助的项目:https://github.com/angular-ui/ui-router它的一个特性是多个并行视图
编辑
检查这个 plnkr
您的代码有问题
(1) 注入 $stateProvider 而不是 $routeProvider 如果你是 uing ui-router
(2) 使用 ui-view 代替 ng-view
(3) 您可以在同一模板级别拥有多个视图。如果您尝试在 ui-view 中定义 ui-view 并在单个状态下创建多个 ui-view,它将不起作用。
(4) ui-view inside 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);
您需要根据子状态更新您的状态:
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',
}
}
});
};