EmberJS is an open-source javascript framework. It is a very productive framework used for building very efficient web apps without much difficulty. It follows MVC architecture. EmberJS applications are ready for professional-level apps they come with many built-in tools to make the tasks easier. Some of the tools are:
- Build Pipeline
- Routing
- Data layer
- Testing units
Features:
- MVC Pattern
- Client-Side Rendering
- High performance
- Templating mechanism
- URL support
Installing Ember CLI: First, we need to install the Ember using the npm, Node.js package manager. So run the following command in the Terminal.
npm install -g ember-cli
This will install the Ember.js CLI globally on our system. Hence, from now wherever in our system, we can create the ember apps. Note that the npm package manager comes with Node.js. You will have to install Node.js in your system for ember applications.
Creating new application: Ember.js uses the following command to create new applications. Some navigate to your desired directory, where Ember will create a folder automatically with all files installed.
ember new ember-tutorial-gfg
This will create a new folder with the name ember-tutorial-gfg. Open your code editor in the folder to start editing the project created.
Note: The installation may take few minutes to install depending upon your machine.
Project Structure: The project structure should be similar to as follows.
Understanding the project structure:
- app: This contains the application UI and models related files.
- config: This contains the ember app configuration files.
- node_modules: This contains the node modules required for the project.
- public: This folder contains the files required for the hosting purpose.
- tests: This folder contains files for unit testing.
- vendor: Third-party plugins or dependencies should be placed in this folder.
- app folder: In this folder, we are mainly concerned with developing our first app. Your app folder should look as follows:
You can check that the components, controllers, helpers, models, routes contain only the .gitkeep file. The styles folder has an app.css file and the templates folder has an application.hbs file. This is the classical structure of Ember applications and we will continue with this structure only.
Run the app: In the Terminal / Command Prompt enter the following command to run the application:
ember serve
This will build the application and serve the website by default on http://localhost:4200. You can also find additional details on the Documentation of Ember.js or in the README.MD file in the project folder.
After the project has been built, you will find a similar output as follows. Any change will be automatically updated very similar to React.js projects.
Now open any browser and navigate to http://localhost:4200/ and see the result. You will find the following webpage.
Example: Creating a basic EmberJS application.
Filename: application.hbs
HTML
{{page-title 'EmberTutorialGfg'}} <h1 id='body-title'>Welcome to neveropen Ember Tutorial</h1> <h4 id='body-subtitle'>Creating first website using Ember.js</h4> {{outlet}} |
Filename: app.css
Output: The website will look as follows.
Explanation: The app.css file is self-explanatory but we need to understand the application.hbs file.
{{page-title 'EmberTutorialGfg'}}
This sets the title of our webpage. Then we have the contents of our webpage. At last, we have {{outlet}}, which is used for routing purposes.
Create a Route: We will now create another route for our website and that will be the About page. Here you can provide some details of our website. In the Terminal / Command Prompt, enter the following command.
ember generate route about
It will create three files and update the router.js file. Edit them as follows.
app/templates/about.hbs
{{page-title 'About'}} <h2>Tutorial</h2> <h3>Data Structures and Algorithms</h3> <h4 class='contents'> Structures</a> </h4> <h4 class='contents'> <a >Algorithms</a> </h4> |
Filename: app/styles/app.css
Now navigate to http://localhost:4200/about, the result will be as follows.
Our About page appears below the application.hbs contents because we have provided the {{outlet}} at the bottom of the application.hbs file which places the contents of different routes.
Adding Route to application.hbs: We can link any route to any template page using the LinkTo tag.
Filename: app/templates/application.hbs
HTML
{{page-title 'EmberTutorialGfg'}} <h1 id='body-title'> Welcome to neveropen Ember Tutorial </h1> <h4 id='body-subtitle'> Creating first website using Ember.js </h4> <div class='navigation'> <LinkTo @route='home' class='navigation-item'> Home </LinkTo> <LinkTo @route='about' class='navigation-item'> About </LinkTo> </div> {{outlet}} |
Filename: app/router.js
Javascript
import EmberRouter from '@ember/routing/router'; import config from 'ember-tutorial-gfg/config/environment'; export default class Router extends EmberRouter { location = config.locationType; rootURL = config.rootURL; } Router.map(function () { this.route('home', { path: '/' }); this.route('about'); }); |
Filename: app/styles/app.css
Output:
Conclusion: In this tutorial, we built an Ember application. Then we modified our code and also added routes. At last, we have added a Navigation bar to navigate to different routes. So we saw how easy it was to build a productional level website right out of the box with the help of Ember.js. Hope you liked the tutorial.
