10 Mins


Hope you have already gone through our basic things you need to know before starting ember, and you are in a stage to make your first ember app. We are writing this tutorial in layman level, so that each and every one of you can understand it properly.

Things to do first

Well, as ember came to the picture as a pure MVC framework, and it’s basically designed to structure your project, so we will also arrange our project files like that only from the very beginning. So let’s execute the following steps.ember app folder structure

Step 1: Make a folder for your project. You can directly make this to your hard disk, but to arrange the project you should work in an editor. I’m using the freeware Aptana Studio 3.

Step 2: Inside the folder make an index.html file which is going to be the one and only page for your app. (* Ember is developed to make desktop like single page multi route apps)

Step 3: Make four javascript files in your project and name them ‘model.js’, ‘view.js’, ‘controller.js’ and ‘app.js’. You can include all your js in a single file also, but just to structure the project like MVC we’re separating them.

Step 4: Link these four js files in your ‘index.html’ file.

Mandatory steps

Step 1, 2 and 3 were conventional things. But there are few mandatory steps also to develop an ember app.

Step 4: Link ‘jquery.js’ (1.7.2 or higher), ‘handlebars.js’ and ‘ember.js’ to your ‘index.html’ file. You either can make a CDN call, or can include these three files in your project itself. But you have to keep in mind, these three should be linked above all other js files.

Step 5: Include the handlebars script in your ‘index.html’. Ember will be executed only inside handlebars script tag. Here is the code to write the script tag.

<script type="text/x-handlebars">// <![CDATA[

// ]]></script>

Step 6: Go to your ‘app.js’ and write the following code

window.HelloEmber = Em.Application.create();

Here ‘HelloEmber’ is the app name and we’ve declared it in global scope. Em.Application.create() creates the app.

Naming conventions

Naming conventions are not exactly ‘conventions’ in ember. They are few strict rules. You have to follow those to run your ember app. Your controller and view name will always be like ‘AppName.RouteNameController’ or ‘AppName.RouteNameView’. You will understand it more in our route tutorials. For the time being our controller and view name will be ‘HelloEmber.ApplicationController’ and ‘HelloEmber.ApplicationView’ respectively cause ‘Application’ means the whole app. Something like global.

Printing ‘Hello World’

Even if you write ‘Hello World’ directly in your ‘index.html’ it will run and will print ‘Hello World’. But this is not what we wanna do. We will store the string ‘Hello World’ in our model; and from there we will reflect it to our view. So let’s follow the next steps.

Step 7: Open ‘model.js’ and make an array with some values in it, like “Hello World”.

HelloEmber.Data.push("Hello World");
HelloEmber.Data.push("Hi World");
HelloEmber.Data.push("My World");

Step 8: Now it’s time to tell your app that ‘HelloEmber.Data’ is going to be the model. To do that, go to app.js and write the following route code.

HelloEmber.ApplicationRoute = Em.Route.extend({
    model: function(){
    	return HelloEmber.Data;

Step 9: Now you’ve to bind the model to your view, that is ‘index.html’. To do that, write the following code inside your handlebars script.

{{#each item in model}}

Here using #each, we are fetching all the strings inside our model and printing one by one in our page.

Step 10: Save all the files and run the ‘index.html’ in your browser. You will find all the values of model is reflecting in your page.


Now you are able to print “Hello World” and also know the project structure, which is the most important thing to start working on a tool, language or any new thing. Now you can start learning the basics of controllers and events which is very essential to make your app lively.

You can download the source code of the project discussed above from the download link given below. 

live-demo-button download-button