What Is ember Router?
Router is basically a medium that connects the application with browser’s address.
In other words, Router takes the responsible for connecting point between browser’s address bar and our application.
The Router using a route and resource might look like -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
});
this.route("another", { path: "/another" });
});
What Is ember route?
Route is a location where the request of a user reaches first after it is made or translated by a Router.
Route decides what data should be provided to the Template.
Example -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
});
this.route("another", { path: "/another" });
});
Other example -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.resource("post", { path: "/:post_id" }, function() {
this.route("edit", { path: "/edit" });
});
this.route("new", { path: "/new" });
});
});
How to create multiple nested resources?
Example for multiple nested resources -
App.Router.map(function() {
this.resource("posts", { path: "/" }, function() {
this.route("new", { path: "/new" });
this.resource("comments", { path: "/comments" }, function() {
this.route("new", { path: "/new" });
});
});
this.route("another", { path: "/another" });
});
How can you generate a route in ember.js?
We can generate a route using Ember CLI.
Defining Your Routes -
ember generate route route-name
Steps -
1. Installing route
2. Create app/routes/about.hbs
3. Create app/templates/about.hbs
4. Updating router
5. Add route about
6. Installing route test
Ember CLI commands -
ember generate route about
//OR
ember g route about
//OR
//You can generate certain blueprints with a pods structure by passing the --pod option -
ember generate route about –pod
It looks like -
installing route
create app/routes/about.js
create app/templates/about.hbs
updating router
add route about
installing route-test
create tests/unit/routes/about-test.js
Other commands are -
ember g resource events
ember g route events/view
Example looks like -
App.Router.map(function() {
this.resource('events', function() {
this.route('view', { path: "/view/:id" });
})
});