Friday, February 17, 2017

EmberJS - Environment Setup

It's easy to configure Ember.js, by including the JavaScript library files into the <script> tag in the HTML file; this can be done in two ways as follows:
  • You can download the latest version of Ember.js JavaScript library files from its official website.
  • You can include the latest version of CDN's from the official website.

Downloading JavaScript libraries

Before installing emberjs, it should require nodejs installed on system with compatible browser. Use the following command in nodejs command line interface to install emberjs−
npm install -g ember-cli
To create an application, use the following command −
ember new my-app

CDN from an official website

A CDN or Content Delivery Network is a network of servers designed to serve files to users. If you use a CDN link in your web page, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of Ember.js from the same CDN's, it won't have to be re-downloaded.
You need put these js files to make use of the Ember.js using CDN's:
  • jQuery
  • Handlebars
  • Ember.js
All CDN's are taken from here 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="https://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://builds.emberjs.com/beta/ember-data.js"></script>
The following are the different packages for successful build:
  • ember.debug.js: This is the full development build. It includes nearly all of the packages.
  • jquery-2.1.3.min.js: It removes unnecessary characters to make file size smaller.
  • ember.prod.js: The production files remove any debug statements and/or assertions. It includes all of the packages except:
    • handlebars.min.js
    • ember.debug.js
  • handlebars.min.js: It is used for to build the semantic templates effectively.
  • ember-template-compiler.js: The template compiler can be used server-side for precompilation.
  • ember-data.js: It is used for to deal with the Ember Data.
In all chapters of this tutorial programs, we have referred latest CDN's of Ember.js JavaScript libraries.

Example

Let's create one simple example using Ember.js:
<!DOCTYPE html>
<html>
   <head>
      <title>Ember.js Application example</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <!-- Your JavaScript -->
      <script type="text/x-handlebars">
         <!-- this is default application template -->
          <h1>{{App.name}}</h1>
          {{outlet}}
      </script>

      <script type="text/javascript">
         //App is the object of the Ember.Application
         //create() is the constructor of the Ember.Application
         App = Ember.Application.create();

         //App.name is the variable that holds the string values
         App.name= "Hello... Welcome to TutorialsPoint";
      </script>
   </body>
</html>
The comments in the code are self explanatory. Some more details of the code are as follows:
The App.name is a variable which holds the String value that to be displayed on the web browser by using the Handlebars.

Output

Let's carry out the following steps to see how above code works:
  • Save above code in hello_emberjs.htm file
  • Open this HTML file in a browser.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)