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" });
})
});
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|