How to replace content of file with other content

Question

0.00/5 (No votes)

See more:

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.html I'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.html file 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.

Posted 15-Aug-16 1:40am

Hein Pauwelyn

Updated 15-Aug-16 2:28am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Accepted Answer · 2016-08-15T02:28:00

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

HTML

<div ng-controller="partialOneController">
   <p>{{title}}</p>
</div>
<script type="text/javascript">
   myApp.controller('partialOneController',['$scope',function($scope){
      $scope.title = 'This controller is dynamically loaded, but could' +
         'be assigned in the state definition.';
   }]);
</script>

Next up let's define our Primary View (Master page for the Web-Form peeps).

index.html

HTML

<html ng-app="myApp">
   <head><!--Include Angular, styles, whatever --></head>
   <body ng-controller="primaryViewController">
<!-- This controller holds menus, assigned roles, any application-wide data. I'm not going to bother writing this for this sample, and this controller can be omitted.-->
      <header><span>I persist through navigation!</span></header>
      <div ui-view="MainContent"><p>This text apperars until ui-sref is called!</p>
      </div>
      <footer><span>I persist through navigation!</span></footer>
   </body>
</html>

Okay, now for our app. I know, this is overcomplicated, but this shows how to target a specific view container on the page, where you can do all sorts of fun stuff if you want. Using functions to provider route capabilities is pretty powerful.

myApp.js

JavaScript

var myApp = myApp || angular.module('myApp',['ui.router'])
   .config(['$stateProvider', function($stateProvider){
      $stateProvider
         .state('navigate',{
            url: '/:view',
            views: {
               'MainContent' : {
                  templateUrl: function($stateParams){
                     return $stateParams.view + '.html';
                  }
               }
            });
   }]);

That's it. All that's left is to call the state, which you can do from a link or programatically.

To use a link, don't assign an href, use a ui-sref attribute instead. The link will look like this:

HTML

<a ui-sref="{{navigate({ view: 'partialOne' }) }}">Show PartialOne</a>

This is all a bit over-engineered to provide one fragment to one view, but as I'm going to guess that's not your ultimate use case, I figured I'd give you the flexible version up front.