How to create templates with Javascript?

Asked

Viewed 1,000 times

3

I would like to know if it is possible (and how to do it, if it is) templates with Javascript. Just like the Facelets in the JSF, where one creates a template page and the others follow what has been pre-established.

If anyone could point out any material, I’d really appreciate it!

javascript

  • How Does It Work? Follow what was Pre-established? You’re talking about Objective Orientation?

  • Something like templates in Angularjs ?

  • I’m sorry, I just don’t quite know how to explain it. Type, in JSF has the facelets allow us to create a page template (with the top and footer, for example). And the rest is just call this template and put the body of the page. I mean, I don’t have to copy the top and footer on all pages.

  • Bootstrap is in javascript, css and Html5. It has many components there

2 answers

5

You can use Angularjs itself to modularize the page. You can separate markup, content and logic from each part of your web app individually.

You can see the documentation on: https://docs.angularjs.org/guide/module

It is also possible to use specific template-only solutions, such as mustache and other js template templates. Check out the operation of some in: http://www.creativebloq.com/web-design/templating-engines-9134396

if it is simply to separate the header and footer, it is possible to include the Angularjs in the page and use the following semantics: 

<div ng-include="'includes/header.html'"></div> 

<!-- Conteúdo da página -->

<div ng-include="'includes/footer.html'"></div>

5


With Handlebars you can create templates in js with ease!

See an example of your syntax/Usage:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

Using {{template}} to carry out their markings.

Populating the template.

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

Upshot:

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

Another framework that can accomplish this is Angularjs, it is very complete has:

  • Two-way Data Binding
  • Injection of Dependencies
  • Creating directives (HTML Extension) <- Template
  • Modularization and reuse (Controllers, Services and Filters)

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.