如何用其他内容替换文件内容 [英] How to replace content of file with other content
本文介绍了如何用其他内容替换文件内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在建立一个网站，但我不会在每个网站上重复我的标题和页脚 -elements 。我想用Angular来做这件事。所以在这一刻我创建了如下内容：
- 文件内部
_layout\default.html我已经制作了这段代码：
<！DOCTYPE html>
< html>
< head>
< title> {{page.title}}< / title>
<！ - css和js imports - >
< / head>
< body>
< header><！ - 导航栏等 - >< / header>
< main class =container>
{{content}}
< / main>
< footer class =container><！ - 页脚元素 - >< / footer>
< / body>
< / html>
- 在
index.html文件中我创建了这段代码：
---
布局：默认
标题：欢迎
---
< div class =content>
< h1>部分内容< / h1>
< / div>
- 包含Angular所需代码的Angular文件。
依赖于URL，我会在
中显示不同的内容{{content } _layout\default.html 文件的粒子。我需要添加哪些代码才能在localhost上运行？我希望干（不要重复你的代码）。我的尝试：
我已经尝试了上面的代码，我在互联网上遇到了谷歌这样的问题。
解决方案
所以，关于如何处理这个问题，你有很多选择。
你想要使用的具体方法通常被称为页面模板，特别是作为部分视图或HTML片段，取决于您正在使用的堆栈。
Angular有一些选择如何处理它。我将向您展示我喜欢的那个，它依赖于UI-Router模块。我喜欢这个选项，因为UI-Router导航模型在开发方面提供了大量的控制权。
UI-Router [ ^ ]
在这种情况下，我们将向后工作，因为它有助于显示可能发生的一些陷阱。我将从一个HTML片段开始，可以加载到带有嵌入式控制器的视图中。
partialOne.html
< pre lang =HTML> < div ng-controller = partialOneController >
< p > {{title}} < / p >
< / div >
< script type = text / javascript >
myApp.controller（' partialOneController'，['
scope'，功能（
范围）{
I'm making a website but I'll not repeat my header and footer-elements on every site. I was thinking to do this with Angular. So for this moment I've created something like this below:
- Inside the file
_layout\default.htmlI've made this code:
<!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> <!-- css and js imports --> </head> <body> <header><!-- nav bar etc --></header> <main class="container"> {{ content }} </main> <footer class="container"><!-- footer elements --></footer> </body> </html> - Inside the
index.htmlfile I've made this code:
--- layout: default title: Welcome --- <div class="content"> <h1>Some content</h1> </div>
- An Angular file with the code that is needed for Angular.
Depended of the URL, I'll show different content in the
{{ content }} particle of the _layout\default.html file. What code I need to add for run this on localhost? I wish to DRY (Do not repeat your code).What I have tried:
I've tried the code above and I've Google such problems on the internet.
解决方案
So, you have a lot of options on how you're going to handle this.
The specific methodology that you're looking to use is known in general as page templates, and in particular as partial views or HTML fragments, depending on the stack that you're using.
Angular has a few choices on how to handle this. I'm going to show you the one that I like, which leans on the UI-Router module. I like this option because of the amount of control that the UI-Router navigation model gives you on the development side.
UI-Router[^]
In this case we're going to work backwards because it'll help show where some pitfalls can occur. I'm going to start with an HTML fragment that can be loaded into a view with an embedded controller.
partialOne.html
<div ng-controller="partialOneController"> <p>{{title}}</p> </div> <script type="text/javascript"> myApp.controller('partialOneController',['
scope',function(
scope){
这篇关于如何用其他内容替换文件内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
