Ember.js tutorial for beginners #02 Routing System (2022)

Overview of Ember Routing

Introduction to Ember Routing

• The tutorial introduces Ember's routing system, which integrates with the browser URL. For example, navigating to localhost:4200/court triggers a search for the corresponding route in the app's router.

• The router file acts as a sitemap, allowing developers to visualize the app's structure and locate related JavaScript files under app/routes and app/controllers.

Types of Routes in Ember

• Various types of routes are discussed: application route, basic route, nested route, index route, dynamic route, and wildcard route.

• The default application route is located at app/templates/application.hbs, serving as the starting point for web apps with an outlet element for rendering sub-routes.

Creating Basic Routes

• A practical example involves creating a basic e-commerce route (/closed) using the command ember g route closed, which generates necessary files automatically.

• After updating the template for /closed, changes reflect in the application due to content replacing the outlet element.

Using Ember Inspector

• The tutorial suggests using the Ember Inspector Chrome extension to view current routes. It highlights how to navigate through routes within this tool.

Nested Routes Explained

• An example of a nested route is provided with /closed/t-shirt. This requires adding a new nested setting in the parent route’s configuration.

• Upon refreshing after creating this nested structure, both messages from /closed and /closed/t-shirt display correctly.

Understanding Index Routes

Default Index Route Behavior

• Every level of nesting has an automatic index route. If landing on /closed, it defaults to its index without needing explicit definition.

• To add content specifically for an index page, one must create it explicitly using ember g route closed/index.

Dynamic Routes Functionality

Implementing Dynamic Segments

• Dynamic segments allow URLs like /items/1, where different items can be displayed based on their ID.

• To implement this feature effectively, one must specify models based on IDs within dynamic routes by modifying router configurations.

Wildcard Routes Usage

Handling Undefined Routes

• Wildcard routes match multiple URL segments and are useful for handling unexpected user inputs or undefined paths.

Resolving Application Errors in Server Setup

Fixing the Error Message

• The speaker discusses how to resolve an error message encountered during server setup by implementing a specific code change, which involves using "slash asterisk" syntax.

• After saving the changes and restarting the server, the error message disappears, indicating that the fix was successful.

• The application now displays a text message under "application app stores," suggesting that there are additional messages related to errors or status updates.

• The speaker notes that there is also a "not found" message displayed, hinting at potential issues with resource accessibility within the application.