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 need put these js files to make use of the Ember.js using CDN's:
The App.name is a variable which holds the String value that to be displayed on the web browser by using the Handlebars.
- 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-cliTo 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
<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.
No comments:
Post a Comment