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]

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.

Share
Published by
Ajitesh Kumar

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago