Angular ng-include cshtml页面（angular innerhtml）
13
在这篇文章中，我们将为您详细介绍Angularng-includecshtml页面的内容，并且讨论关于angularinnerhtml的相关问题。此外，我们还会涉及一些关于$scope.test=""
在这篇文章中，我们将为您详细介绍Angular ng-include cshtml页面 的内容，并且讨论关于angular innerhtml 的相关问题。此外，我们还会涉及一些关于$scope.test = "
"; 变量test在页面上怎么能够显示a.html页面的内容、Angular 2：同一组件中的多个HTML页面、Angular ng-include 学习实例、angular ng-include 指令的使用 的知识，以帮助您更全面地了解这个主题。
本文目录一览： "; 变量test在页面上怎么能够显示a.html页面的内容">$scope.test = "
"; 变量test在页面上怎么能够显示a.html页面的内容
Angular 2：同一组件中的多个HTML页面 Angular ng-include 学习实例 angular ng-include 指令的使用
Angular ng-include cshtml页面（angular innerhtml） 我正在与angular进行斗争，以使其ng-view之外包括部分cshtml视图。
这是我的主要观点：
<div> <div> <div> <div ng-include="Home/Template/login"></div> </div> </div></div><div> <div ng-view></div></div>这是我的部分Login.cshtml：
<form name="login" ng-controller="LoginCtrl"> <div><input type="text" name="loginName"placeholder="Brugernavn" oninvalid="this.setCustomValidity(''Indtast brugernavn'')" ng-model="UserData.LoginName" ng-required="true"></div> <div><input type="text" name="password"placeholder="Kodeord" oninvalid="this.setCustomValidity(''Indtast kodeord'')" ng-model="UserData.Password" ng-required="true"></div> <div> <buttonng-click="Login()" ng-disabled="login.password.$error.required || login.loginName.$error.required">Login</button> </div></form>我使用mvc在调用url时返回特定的局部视图，如下所示：
public ActionResult Template(string id) { switch (id.ToLower()) { case "login": return PartialView("~/Views/Account/Partials/Login.cshtml"); case "register": return PartialView("~/Views/Account/Partials/Register.cshtml"); case "main": return PartialView("~/Views/Main/MainPage.cshtml"); default: throw new Exception("template not known"); } }基本上，我相信ng-
任何想法如何解决这个问题？
答案1 小编典典 ng-include计算一个表达式，请确保如果要直接加载路径，请使用两组引号。
<div ng-include="''Home/Template/login''"></div>
"; 变量test在页面上怎么能够显示a.html页面的内容" alt="$scope.test = "
"; 变量test在页面上怎么能够显示a.html页面的内容"> "; 变量test在页面上怎么能够显示a.html页面的内容">$scope.test = "
"; 变量test在页面上怎么能够显示a.html页面的内容
@YueZheng 你好，想跟你请教个问题：
Angular 2：同一组件中的多个HTML页面
我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个
HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要意图是单独的HTML& SCSS文件和路由逻辑.
截至目前,我正在使用ngIf渲染页面,这使得我的页面非常冗长.有办法实现这个目标吗？
<!--View 1-->
<div*ngIf="registerView=='regView1'">
Register Page 1
</div>
<!--View 2-->
<div*ngIf="registrationView=='regView2'">
Register Page 2
</div>
@Component({
selector: 'register-page',templateUrl: './register-page.component.html',styleUrls: ['./register-page.component.scss'],providers : [RegisterService,Configuration,LocalStorageService]
})
ngOnInit() {
this.registerView= "regView1";
}
changeView(view) {
this.registerView= view;
}
prevIoUsView(view) {
this.registerView= view;
}
解决方法
尝试这样做：
@Component({
selector: 'register-page',template: `
<div*ngIf="registerView == 'regView1'">Reg View 1 Content</div>
<div*ngIf="registerView == 'regView2'">Reg View 2 Content</div>
`,providers: [RegisterService,LocalStorageService]
})
export class Appcomponent {
registerView = 'regView1';
}
否则这样做
page1.component.html
<div>
<h1>Page1 Component Content</h1>
</div>
page2.component.html
<div>
<h1>Page2 Component Content</h1>
</div>
home.component.html
<div>
<div*ngIf="registerView == 'regView1'">
<app-page1-component></app-page1-component>
</div>
<div*ngIf="registerView == 'regView2'">
<app-page2-component></app-page2-component>
</div>
</div>
component.ts
@Component({
selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent {
registerView = 'regView1';
}
Angular ng-include 学习实例 ng-include可以引入外部的文件到当前视图中。这样可以增强复用性。 最简单的用法 <div ng-include src="'/public/template/tpl.html'"></div> 这样直接把tpl.html加载当前视图中了。 我们还可以使用如下定义个模板。id是模板名。如这里是"tpl/tpl1"
<script type="text/ng-template" id="tpl/tpl1">
<p>我是模板内容</p>
</script>
这样的话可以直接使用ng-include="'tpl/tpl1'"。来调用这个模块。
官网文档：script
在使用时要注意的几点： 1. 引入ng-include="'tpl/tpl1'"。因为模板名是字符串，要是单引号括起来，如果写成ng-include="tpl/tpl1" 会将tpl/tpl1解析成变量，导致引入无效。 2. 使用ng-include src="'url'" src属性中的地址不能跨域。ng默认只能是同一域名和http协议下的文件才能成功引入。这里涉及到跨域就不讨论了。
See the Pen Angular ng-include学习 by finley (@mafeifan ) on CodePen.
angular ng-include 指令的使用 angular ng-include 指令的使用
ng-include 指令用于包含外部的 HTML 文件。 包含的内容将作为指定元素的子节点。 ng-include 属性的值可以是一个表达式，返回一个文件名。 默认情况下，包含的文件需要包含在同一个域名下。
下面给出一个例子具体分析一下，是如何实现这一过程的：
页面首页：
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="">
<div id="header_id" ng-include="''include/header.html''"></div>
<div>我是body内容</div>
<div ng-include="''include/main_footer.html''"></div>
</body>
</html>
头部分离：
<header>
<div>
<a href="#">
<img src="images/logo.png">
</a>
</div>
<nav id="topnav">
<ul id="topnav_id">
<a href="index.html" id="topnav_current">首页</a>
<a href="knowledge.html" >技术博客</a>
<a href="new.html" >情感生活</a>
<a href="moodlist.html" >旅游风景</a>
<a href="knowledge1.html" >爱好娱乐</a>
<a href="knowledge2.html" >英文学习</a>
<a href="knowledge3.html" >网站留言</a>
</ul>
</nav>
</header>
<script type="text/javascript">
var href_a_num= String(window.location).split("/");
var href_a=href_a_num[href_a_num.length-1];
// console.log("location:"+href_a);
$("#topnav_id a").each(function(i){
var href_this_a=$(this).attr("href");
//console.log("href:"+$(this).attr("href"));
if(href_this_a==href_a){
$(this).attr("id","topnav_current");
}else{
$(this).removeAttr("id");
}
});
</script>
底部分离：
<footer>
<p>强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p>
<div id="tbox">
<div id="log_id">
<img src="images/weixing-ma.jpg">
</div>
<div><a id="togbook" href="#"></a></div>
<div><a id="gotop"></a></div>
</div>
</footer>
<script type="text/javascript">
$("#gotop").click(function () {
var speed=200;//滑动的速度
$(''body,html'').animate({ scrollTop: 0 }, speed);
return false;
});
$("#togbook").on(''mouseover'',function(){
$("#log_id").css("display","block");
});
$("#togbook").on(''mouseout'',function(){
$("#log_id").css("display","none");
});
</script>
注意：很坑的一个地方是，<div ng-include="''include/main_footer.html''"></div> 引入文件直接双引包含是不会成功的,文件的名称必须还需要''''包含
上面的例子是不是特别简单啊，这就是AngularJS的强大之处。
我们今天的关于Angular ng-include cshtml页面 和angular innerhtml 的分享已经告一段落，感谢您的关注，如果您想了解更多关于$scope.test = "
"; 变量test在页面上怎么能够显示a.html页面的内容、Angular 2：同一组件中的多个HTML页面、Angular ng-include 学习实例、angular ng-include 指令的使用 的相关信息，请在本站查询。
