Tutorial Ember ( Version 1.13 ) ? Part 3

By | September 14, 2015

Welcome into this third part of this tutorial devoted to the creation of a blog with Ember.js. In this part we will see how to set up our routing system. With Ember, controllers are reduced to their simplest expression. These are only used to manage the state of your template’s elements. All the mechanical happen into the routes.
These routes manage calls to the business in order to load the data required by the templates, they also manage actions that happen on the page and have an impact on the model. The submission of a form will beĀ  managed thereby by a route.


Routes are reported in the app/router.js file. This is the routes we will need for this blog :

 

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
location: config.locationType
});

Router.map(function() {
//This route is the entry point of the admin zone
this.route('admin',{path : '/admin'}, function() {
this.route('post', {path: 'post'} , function() {
    this.route('index');
    this.route('add');
    this.route('edit, {path: 'edit/:post_id'}');
    this.route('view', {path: 'edit/:post_id'});
});
this.route('user', {path: 'user'} , function() {
    this.route('index');
    this.route('add');
    this.route('edit', {path: 'edit/:user_id'});
    this.route('view', {path: 'edit/:user_id'});
});
this.route('comment', {path: 'comment'} , function() {
    this.route('index');
    this.route('add');
    this.route('edit'{path: 'edit/:comment_id'});
    this.route('view'{path: 'edit/:comment_id'});
});
});
// All next routes will be public
this.route('public', {path : '/public'});

});

export default Router;

The routes may be nested together. So we create two basic routes (admin and public). This will allow us later to create an administration area. All routes belonging to admin will therefore be subjected to authentication. Conversely all the routes owned by the public’s route will be accessible without authentication.

In the administration area we define three routes (post, user, how) to manage all our data. Each route includes four routes for performing conventional operations into database.

On public route Ember create a default route for each route index created. So :

 


this.route('public', {path : '/public'});

is equivalent to :

this.route('public', {path : '/public'}, function() {
    this.route('index');
});

The path variable is optional and allows you to specify a different path of the route name and any parameters that need to be passed in the URL. For example in the route for editing a post:


this.route('edit, {path: 'edit/:post_id'}');

:post_id corresponds to the id of the post we want to edit.

For each route defined in the routeur.js file corresponds a file with the name of the route and lying in the route folder. To see the link between a route, its controller and its template I let you see the documentation of Ember: http://guides.emberjs.com/v2.0.0/routing/defining-your-routes/. You can also download the plugin Ember inspector to help you debug your routes.

In the next article we will start the construction of the administration interface and will continue to talk about the routes which is one of the fundamental concepts in Ember.

 

00

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.