Categories: JavascriptUI

EmberJS Bootstrap Hello World UI Template

The article is a placeholder for Hello World code for EmberJS with Bootstrap. Those who want to get started with EmberJS can just copy and paste the code in an html file and get started. Among the scripts, you would also find the Bootstrap script and CSS files.

Following are, however, some of the observations to be noted:

Dependency on JQuery: The primary reason for dependency on JQuery as cited by the Ember code developer in this page is DOM manipulation.
Dependency on Handlebars template: This is the templating engine used by EmberJS.
EmberJS App Initialization: One needs to an Ember app initiated using the code such as “var app = Ember.Application.create();”

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>EmberJS - Hello World</title>
  <link rel="stylesheet"  href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/handlebarsjs/1.3.0/handlebars.min.js"></script>
  <script src="http://builds.emberjs.com/release/ember.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script>
    var app = Ember.Application.create();
  </script>
</head>
<body>
  <div class="container">
 <div class="page-header" style="margin: 0">
  <h1>Hello World</h1>
 </div>
  </div>
  <script type="text/x-handlebars">
    <div class="container">
    <form class="form-horizontal" role="form" method="post" action="#">
    <div class="form-group" style="padding-top:20px">
      <label class="col-md-1 control-label">Name:</label>
      <div class="col-md-2">
      {{input type="text" value=name placeholder="Enter your name"  class="form-control"}}
      </div>
    </div>
    <div class="col-md-3">
      <h3>Hello, {{name}}</h3>
    </div>
    </div>
    </form>
  </script>
</body>
</html>

…

[adsenseyu1]

Author
Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Latest posts by Ajitesh Kumar (see all)

Retrieval Augmented Generation (RAG) & LLM: Examples - February 15, 2025
How to Setup MEAN App with LangChain.js - February 9, 2025
Build AI Chatbots for SAAS Using LLMs, RAG, Multi-Agent Frameworks - February 8, 2025

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.