EmberJS - Router

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.
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.
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.
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.
<!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>
Let's carry out the following steps to see how above code works −
Save above code in routing.htm file
Save above code in routing.htm file
Open this HTML file in a  browser.
Open this HTML file in a  browser.
The following table shows properties of the router −
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.
If you have not define Route, Controller, View, and Template classes objects, then Ember.js will automatically generates these objects into your application.
The Ember.js will automatically generate the route if you are not defined in your application.
The Ember.js will automatically generate the controller for the appropriate route, if it is not defined in your application.
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.
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.
<!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>
Let's carry out the following steps to see how above code works −
Save above code in routing_spfng_rout_model.htm file
Save above code in routing_spfng_rout_model.htm file
Open this HTML file in a  browser.
Open this HTML file in a  browser.
The following table shows how to specify the router models −
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.
<!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>
Let's carry out the following steps to see how above code works −
Save above code in routing_cntrler.htm file
Save above code in routing_cntrler.htm file
Open this HTML file in a  browser.
Open this HTML file in a  browser.
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.
<!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>
Let's carry out the following steps to see how above code works −
Save above code in routing_rndr_templ.htm file
Save above code in routing_rndr_templ.htm file
Open this HTML file in a  browser.
Open this HTML file in a  browser.
This is an URL redirection or forwarding mechanism, that makes a web page available for more than one URL address.
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:
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.
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.
<!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>
Let's carry out the following steps to see how above code works −
Save above code in routing_history.htm file
Save above code in routing_history.htm file
Open this HTML file in a  browser.
Open this HTML file in a  browser.
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 −
Specifying Query Parameters
Query parameters are specifiied on route-driven controllers.
Opting Into a Full Transition
When a controller query parameter property changes it opt into a full transition.
Update URL with Replacestate Instead
It prevents from adding an item to your browser's history.
Map a Controller's Property to a Different Query Param Key
Mapping a controller property to a different query param key.
Default Values and Deserialization
Specifying the default values to the query parameter.
Sticky Query Param Values
The query parameter are sticky so changes in the parameter will be preserved.
The Ember.js router is capable for handling complex async logic within an application.
The following table shows properties of the asynchronous routing:
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.
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 −
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.
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:
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
 Add Notes
 Bookmark this page