EmberJS - Router

Quiz

Introduction

This is the core feature of the Ember.js. The router used for to translate URL into the series of templates and also it represents the state of an application. The Ember.js uses the HashChange event that helps to know change of route; this can be done by implementing HashLocation object.

Logging Route Changes

As an application grows in complexity, the logging route keeps track of the router.

ENV.APP.LOG_TRANSITIONS = true;

The above code translates transition events to the log modifier.

Specifying a Root URL

If the Ember.js domains have the multiple web application, In that case you need to specify the root URL to indicate the router.

Ember.Router.extend({
   rootURL: 'Path'
});

The above code describes how to specify the root URL. The 'path' is root URL path.

Defining Routes

The router matches the current URL with routes which is responsible for displaying template, loading data and setting up an application state. The map method router is used for to define the URL mapping which passes a function that takes parameter as an object to create the routes. The {{ link-to }} helper navigates the router.

Router.map(function() {
   this.route('link-page', { path: '/PathTolinkpage' });
   .
   .
   this.route('link-page', { path: '/PathTolinkpage' });
});

The above code describes how to link the different pages by using the router map. It takes linkpage name and path as an argument.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Router</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="application">
         <!-- link-to for navigation between the routes -->
         <p>{{#link-to 'authors'}}Click for AuthorInfo{{/link-to}}</p>
         <p>{{#link-to 'books'}}Click for BookInfo{{/link-to}}</p>
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="authors">
         <h2>Authors Page </h2>
         <ul>
            <li>Herbert Schildt</li>
            <li>Robert Lafore</li>
         </ul>
      </script>

      <script type="text/x-handlebars" data-template-name="books">
         <h2>Books Page</h2>
         <ul>
            <li>Java</li>
            <li>C++</li>
         </ul>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.Router.map(function() {
            //refers to the authors template and path refers within page
            this.route('authors', { path: '/' });
            //refers to the books template
            this.route('books');
         });
     </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in routing.htm file
Open this HTML file in a browser.

The following table shows properties of the router −

S.N.	Routes & Description
1	Nested Routes This shows how to define the nested routes.
2	Dynamic Segments The dynamic segment is part of an URL.
3	Wildcard/Globbing Routes Wildcard routes used for matching the multiple routes.

S.N.

Routes & Description

Nested Routes

This shows how to define the nested routes.

Dynamic Segments

The dynamic segment is part of an URL.

Wildcard/Globbing Routes

Wildcard routes used for matching the multiple routes.

Generated Objects

If you have not define Route, Controller, View, and Template classes objects, then Ember.js will automatically generates these objects into your application.

Generated Routes

The Ember.js will automatically generate the route if you are not defined in your application.

Generated Controllers

The Ember.js will automatically generate the controller for the appropriate route, if it is not defined in your application.

Generated Views and Templates

The Ember.js will automatically generate the view if it is not defined in your application. The template is nothing but outlet. If you have not declare the outlet then Ember.js will automatically generates {{outlet}} within template.

Specifying a Route's Model

To specify a routes model, you need to define the template name in the route which is same name as the data-template and implement its model hook.

Ember.Route.extend({
   model: function() {
      return { //value-1 },{ //value-2 },{..},{ //value-n };
   }
});

In the above code, value-1 to value-n variables is used to store the values which are being called in the template.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Specifying a Route's Model</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="books">
         <h2> {{title}} </h2>
         <ul>
            <li><p>Java</p></li>
            <li><p>DBMS</p></li>
         </ul>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.Router.map(function(){
            //refers to the books template
            this.route('books');
         });

         App.BooksRoute = Ember.Route.extend({
            //model is redering title of the page
            model: function() {
               return { title: 'Redirecting to Books Page.....' }
            }
         });

         App.IndexRoute = Ember.Route.extend({
            redirect: function() {
               //redirects to books page
               this.transitionTo('books');
            }
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in routing_spfng_rout_model.htm file
Open this HTML file in a browser.

The following table shows how to specify the router models −

S.N.	Specifying Routes & Description
1	Asynchronously Loading Models It returns a promise from the model hook before rendering the template.
2	Dynamic Models It defines the routes with dynamic segments.
3	Refreshing your Model It refreshes the data represented by the model which is being updated frequently.

Setting up a Controller

In Ember.js it is necessary to set up the controller that helps the template to display the retrieved information. Ember.js supports two built-in controllers Ember.ObjectController and Ember.ArrayController. These are presents a model's properties to a template, along with any additional display-specific properties.

Set up the model property to know which model to present, this can be done by using the route handler's setupController hook. The setupController hook gets first argument as a route handler's associated controller. You can also set the route's controllerName property other than default.

Ember.Route.extend({
   setupController: function(controller, model) {
      controller.set('model', model);
   }
});

In the above code, sets the model property in the route handler's setupController hook.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Setting up a Controller</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="application">
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="index">
         <!--using the default controller as index>
         <b>Employee Details</b>
         {{#each}}
            <p>{{index}}. {{empDetails}}</p>
         {{/each}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create({});

         App.IndexRoute = Ember.Route.extend({
            //Setting up the model property
            model: function(){
               //declaring the array values
               return [
                  {firstName: 'Mack', lastName: 'KK'},
                  {firstName: 'Micky', lastName: 'SK'},
                  {firstName: 'Smith', lastName: 'KD'}
               ];
            }
         });

         App.IndexController = Ember.ArrayController.extend({
            //define name of the array controller
            itemController:'name'
         });

         App.NameController = Ember.ObjectController.extend({
            //Defining the computed property empDetails, that holds firstName and lastName as values
            empDetails: function(){
               //returning the computed property values
               return this.get('firstName')+ ' . ' + this.get('lastName');
            }.property('firstName', 'lastName'),

            //Defining the computed property index, that holds an array index values
            index: function(){
               //defining the array index as target to get an index values of an array
               return this.get('target').indexOf(this);
            }.property('target.[]')
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in routing_cntrler.htm file
Open this HTML file in a browser.

Rendering a Template

The route are used to render the external template to the screen. This can be achieved by defining renderTemplate hook in the route handler. You can also use different controller other than the route handler controller by specifying the controller name in the controller option.

Ember.Route.extend({
   renderTemplate: function() {
      this.render('templateName');
   }
});

In the above code, route handler renders the template named as templateName by using the renderTemplatehook.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Rendering a Template</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <h1>Rendering The Template</h1>
      <div id="divApp1"></div>

      <script type="text/x-handlebars" data-template-name="index">
         <p>Rendering Latest News Template :</p>
         {{#link-to "details"}}Get The Latest News{{/link-to}}
         <hr/>
         <h2>HOME</h2>
      </script>

      <script type="text/x-handlebars" data-template-name="details">
         {{outlet "NewsTempl"}}
      </script>

      <script type="text/x-handlebars" data-template-name="NewsTempl">
         <hr/>
         <h2>Reporting The News...!</h2>
      </script>

      <script type="text/javascript">
         //rootElement is parent element to all the other elements.
         App = Ember.Application.create({ rootElement: "#divApp1" });

         App.Router.map(function () {
            this.route('index', { path: '/' });
            //specifying the path for template
            this.route('details', { path: '/details' });
         });

         App.DetailsRoute = Ember.Route.extend({
            renderTemplate: function () {
               //render the temlate which has outlets
               this._super();
               //rendet the News in NewsTempl outlet
               this.render('NewsTempl', { outlet: 'NewsTempl' });
            }
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in routing_rndr_templ.htm file
Open this HTML file in a browser.

Redirecting

This is an URL redirection or forwarding mechanism, that makes a web page available for more than one URL address.

Transitioning and Redirecting

Ember.js defines transitionTo or transitionToRoute from a route and controller, this stops the currently running transition and start a new transition of a page. The transitionTo behaves like the link-to helper.

The following table shows properties of the transitioning and redirecting:

S.N.	Transitioning and Redirecting & Description
1	Before the Model is Known Redirect from one route to another.
2	After the Model is Known Getting an information about the current model of redirection.
3	Based on other Application State Conditionally transitioning based on some other application state.

S.N.

Transitioning and Redirecting & Description

Before the Model is Known

Redirect from one route to another.

After the Model is Known

Getting an information about the current model of redirection.

Based on other Application State

Conditionally transitioning based on some other application state.

Specifying the URL Type

The router also uses the browser's history API to locate the pages that are used before. You can also disable the location API.

Ember.Router.extend({
   location: 'history'
});

In the above code the Router uses the browser's history API.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Specifying the URL Type</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="application">
         //link-to for navigation between the routes
         {{#link-to 'authors'}}AuthorInfo{{/link-to}}
         {{#link-to 'books'}}BookInfo{{/link-to}}
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="authors">
         <h2>Click for AuthorsInfo </h2>
         <ul>
            <li>Herbert Schildt</li>
            <li>Robert Lafore</li>
         </ul>
      </script>

      <script type="text/x-handlebars" data-template-name="books">
         <h2>Click for BooksInfo</h2>
         <ul>
            <li>Java</li>
            <li>C++</li>
         </ul>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.Router.map(function() {
            //refers to the authors template and path refers within page
            this.route('authors', { path: '/' });
            //refers to the books template
            this.route('books');
         });

         Ember.Router.extend({
            //getting the history of the pages are searched before
            location: 'history'
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in routing_history.htm file
Open this HTML file in a browser.

Query Parameters

Query parameters appear to the right of the ? in a URL. It is represented as optional key-value pairs. For example URL http:.../articles?sort=ASC&page=2 has the two query parameter sort and page which contains values ASC and 2 respectively.

The following table shows properties of the query parameters −

S.N.	Query Parameters & Description
1	Specifying Query Parameters Query parameters are specifiied on route-driven controllers.
2	Opting Into a Full Transition When a controller query parameter property changes it opt into a full transition.
3	Update URL with Replacestate Instead It prevents from adding an item to your browser's history.
4	Map a Controller's Property to a Different Query Param Key Mapping a controller property to a different query param key.
5	Default Values and Deserialization Specifying the default values to the query parameter.
6	Sticky Query Param Values The query parameter are sticky so changes in the parameter will be preserved.

Asynchronous Routing

The Ember.js router is capable for handling complex async logic within an application.

The following table shows properties of the asynchronous routing:

S.N.	Async Routers & Description
1	The Router Pauses for Promises The router considers a then method with any object, is defined to be a promise.
2	When Promises Reject The promise rejects during a transition, the transition will be aborted.
3	Recovering from Rejection Recovering from the aborted transition.

S.N.

Async Routers & Description

The Router Pauses for Promises

The router considers a then method with any object, is defined to be a promise.

When Promises Reject

The promise rejects during a transition, the transition will be aborted.

Recovering from Rejection

Recovering from the aborted transition.

Loading/Error Substates

The Ember.js overrides transitions for customizing asynchronization between the routes by making use of error and loading substates.

The following table shows properties of the loading/error substates −

S.N.	Substates & Description
1	loading Substates Ember.js has loading process that implements the loading substate behavior.
2	error Substates The error handlers will looks for an error substate to be entered into an application.

S.N.

Substates & Description

loading Substates

Ember.js has loading process that implements the loading substate behavior.

error Substates

The error handlers will looks for an error substate to be entered into an application.

Preventing and Retrying Transitions

The transition.abort() and transition.retry() methods are called to abort and retry the transition respectively this cause because of failure of the transition object.

The following table shows properties of the preventing and retrying transitions:

S.N.	Instance & Description
1	Preventing Transitions Via willTransition This fires the willTransition action for currently active routes.
2	Aborting Transitions Within model, beforeModel, afterModel The destination routes makes an attempted transitions to abort.
3	Storing and Retrying a Transition You can also re-attempt on aborted transition.

S.N.

Instance & Description

Preventing Transitions Via willTransition

This fires the willTransition action for currently active routes.

Aborting Transitions Within model, beforeModel, afterModel

The destination routes makes an attempted transitions to abort.

Storing and Retrying a Transition

You can also re-attempt on aborted transition.

Print Page