Ember.js is a web framework that makes development and prototyping much easier and faster. It is an open-source Javascript framework that develops projects in MVC architecture. Ember.js applications are ready-made for professional-level projects because of their structured project.
Routes are different links to different web pages of an application. Suppose we have a Home, About, Contact screen. So the routes are “/”, “/about” and “/contact” respectively. They are preceded by a fixed domain or URL which in our case is http://localhost:4200.
Routing in Ember.js: Ember.js CLI gives us features to create Routes for different pages with a single command. The routing feature is the same as other frameworks. Ember.js comes with routing enabled in it. Ember.js creates the following files whenever we create a new route.
- A route file at app\routes\route-name.js
- A template file at app\application\route-name.hbs
- A unit test file at tests\unit\routes\route-name-test.js
The Ember.js can perform different functions for handling Routes.
- It can render a template or webpage
- It can load a model. Models are simply some data that are either fetched from a database, API etc. Then the data is served to the respective template.
- We can also redirect a user to a new page. Imagine we have an Account page. If the user is not logged in, how would the web application know about the user? This is an error and to prevent it, the application redirects the user to the Login page.
Create a new application:
Step 1: Let us create a new application project using the following command. Enter the following command on Terminal / Command Prompt.
ember new ember_routes_gfg
Now we are going to work on the folder ember_routes_gfg
Project Structure: The project structure should be similar as follows.
Our main focus will be the app folder. The folder app should look as follows.
The app folder contains the routes folder. Currently, it is empty since we don’t have any routes for the project. It has only the .gitkeep file.
Run the project: Let us now run the project. Once the project is built, it will automatically refresh the webpage according to our edits. To run the project, enter the following command on Terminal / Command Prompt inside the project directory.
ember serve
The project will build and serve on the URL http://localhost:4200. The output on Terminal / Command Prompt should look as follows.
You will receive the following output on the browser.
Step 2: To create a new route home, enter the following command.
ember generate route home
You would see the following output.
For this example, we want the home page to be our root page. So go to app\router.js and change the path to as follows inside the Router.map().
app
outer.js
import EmberRouter from '@ember/routing/router'; import config from 'ember-routes-gfg/config/environment'; export default class Router extends EmberRouter { location = config.locationType; rootURL = config.rootURL; } Router.map(function () { this.route('home', { path: '/' }); }); |
We have changed the URL to “/”. But the app\templates\application.hbs is routed to “/”. This is to be noted that app\templates\application.hbs is routed to “/”. But Ember.js displays its contents by default and all the pages include its content. So we will place some heading text and a navbar to navigate through the web pages we create.
Router.map() function contains the name of templates and routes for them. We can display any template to any route just by changing them respectively.
Step 3: Now let us create two more web pages for about and contact.
ember generate route about ember generate route contact
Inside the app\templates\application.hbs, we will link to Home, About and Contact pages respectively. So we will use the LinkTo tag to link different pages. Here is the code.
app\templates\application.hbs and app\styles\app.css
HTML
<div class="container"> {{page-title "EmberRoutesGfg"}} <h1 id="title">neveropen Ember Router Tutorial</h1> <nav class="navbar"> <LinkTo @route="home" class="nav">Home</LinkTo> <LinkTo @route="about" class="nav">About</LinkTo> <LinkTo @route="contact" class="nav">Contact</LinkTo> </nav> {{outlet}} </div> |
CSS
.navbar { display: inline; } .navbar .nav { text-decoration: none; font-size: 32px; padding: 1rem; font-weight: 600; background-color: rgb(57, 248, 57); transition-duration: 0.5s; border-radius: 10px; } .navbar .nav:hover { background-color: rgb(34, 158, 34); } .container { margin: 1rem; } #title { text-align: center; } |
Note: {{outlet}} is responsible for displaying different routes of websites.
Step 4: Now let us code the Home page. It will contain the Welcome message. This is the main page of our application. Whenever a user will visit our site, we will display the following contents to it. It is the root of our application. The route to the home page is “/”. That means whosoever will enter this domain, will see the contents of the Home Page.
app\templates\home.hbs
HTML
{{page-title "Home"}} <h2>Home</h2> <h3>Welcome! This is our home page</h3> <p>Enjoy and learn from neveropen!</p> |
Step 5: The Contact Page will contain some links and text. The contact page will be displayed on the route “/contact”. We have used the LinkTo tag to link this route in our application.hbs file.
app\templates\contact.hbs
HTML
{{page-title "Contact"}} <h2>Contact</h2> <h3>This is the contact page</h3> |
Step 6: At last our About page. It also contains some text. The about page will be displayed on the route “/about”. We have used the LinkTo tag in our application.hbs file to navigate to the About page. We can also manually change the URL to navigate to different pages.
app\templates\about.hbs
HTML
{{page-title "About"}} <h2>About</h2> <h3>Moto</h3> <p>neveropen is made for learning together and share knowledge </p> <h3>What we provide?</h3> <p>We provide lots of tutorials related to Data structures and Algorithms,Web development and App development, machine learning etc. </p> |
Output:
