Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are based on Model-View-Controller (MVC). Ember is designed for reducing development time and increasing productivity, it is one of the fastest-growing front-end application frameworks being adopted worldwide. It is currently used on many websites such as Square, Discourse, Groupon, Linkedin, etc.
Installation: First, you have to install ember.js in our system using the npm command (Node package manager). If you don’t have npm first install it. Install ember.js by using the below command:
npm install -g ember-cli
Creating Ember Application:
Step 1: Now you have access to a new command in the terminal. You can use the ember new command to create a new app. This command can create a new directory in your system.
ember new <project-name> --lang en
Step 2: After creating your project folder i.e. <project-name>, move to it using the following command.
cd foldername
Project Structure: After using this command folder structure look like the below image. You can then access the Ember.js components in your application.
Now you must update the application template to remove the default page and create your own application by writing your code in the app/templates/application.hbs file and running it.
Example: This is the basic example that shows how to create an application in ember.js.
Javascript
{{page-title "Geeks"}} <h1>neveropen</h1> <h3>You have successfully created a ember.js application</h3> <p>Happy Hacking</p> <style> h1 { color: green; font-family: 'Courier New', Courier, monospace; } h3 { color: deepskyblue; font-size: x-large; } p { font-size: xx-large; } </style> {{outlet}} |
Step to Run Application: Run the application from the root directory of the project, using the following command:
npm start or ember serve
Output:
