Getting started with Ember JS

Getting started with Ember js.
Recently I got a chance to get my hands on ember js while working on open-event project. Ember is a front-end framework which make lets us create modular and flexible applications. Ember uses the MVC(Model-View-Controller) architecture pattern, route is used as model, handlebar template as view and controller manipulates the data in the model. This article will introduce Ember to you. We will install Ember, explain the structure and create our first ember app. Lets get started.

Installing Ember CLI on your machine.
Ember CLI utility let you create and manage your Ember projects and deals with different kinds of application asset management such as concatenation, minification and also provides generators to create components, routes etc.
For installing Ember CLI you must install these dependencies.

Git
Node.js and npm
Bower
Watchman(Optional)
PhantomJS(Optional)

After installing all the required dependencies you can install the Ember CLI using npm.

npm install -g ember-cli

To check the if it is successfully installed use

ember -v

Creating a new ember app

To create a new ember application navigate to the folder where you want your project to be and use

ember new first-app

When you create a new ember application using ember new app-name command it provides following directory structure with files and directories:
app : It contains the folders and files of models, routes, components, templates and styles.

bower_components : The bower_components directory contains all Bower components and bower.json contains list of dependencies which are installed by Ember.
config : It contains environment.js directory which is used for configuring the settings of an application.
dist : It includes output files which are deployed when building the app.
node_modules : It contains all the installed modules specified in the package.json which can be installed using npm.
public : It contains the assets used in the application like images, sounds, fonts etc.
vendor : This directory contains all the front end dependencies such as javascript, css which are not controlled by bower.
tests : The automated tests are stored under tests folder and test runner testem of Ember CLI’s is arranged in testem.js.
tmp : It contains the temporary files of Ember CLI.
ember-cli-build.js : It specifies how to build the app by using the Ember CLI.
bower.json
ember-cli-build.js
package.json
README.md
testem.js

App directory contains all ember app files. Its structure is as follows

app.js - declaration of a global app object that extends Ember.Application
app/models/ - model classes that represent resources
app/controllers/ - controllers that manage resources and are bound to views
app/views/ - view classes, organized in subfolders
app/templates/ - handlebars templates, organized in subfolders to match views
app/helpers/ - handlebars helpers
vendor/ - vendor libraries like ember.js
lib/ - general customizations to Ember

Running the application
To run the application navigate to the project directory and use

ember serve

Open your browser and navigate to http://localhost:4200/