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.
Node.js and npm
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
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.
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.
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
Open your browser and navigate to http://localhost:4200/