Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page

Was this helpful?

  1. Settings

Define Routes

PreviousCreate a PageNextRoot Loader

Last updated 5 years ago

Was this helpful?

In Angular, a route is an object (instance of ) that provides information about which component maps to a specific path. A path is the fragment of a URL that determines where exactly is located the resource (or page) you want to access. You can get the path by taking off the domain name from the URL.

In Angular you can define a route using route configurations or instances of the interface.

A collection of routes defines the router configuration which is an instance of .

Each route can have the following properties:

  • path is a string that specifies the path of the route.

  • is a string that specifies the matching strategy. It can take prefix (default) or .

  • component is a component type that specifies the component that should be mapped to the route.

  • is the URL fragment which you will be redirected to if a route is matched.

  • determine if the current user is allowed to activate the component. By default, any user can activate.

These are the commonly used properties of routes but there are many others. You can find the rest of properties from the .

For example, this is the definition of a route that maps the /dashboards/main/ path to the HomeComponent component:

{ path: 'dashboards/main/', component: HomeComponent }

The path can be the empty string which usually refers to the main URL of your application or can be also a wildcard string (**) which will be matched by the router if the visited URL doesn’t match any paths in the router configuration. This is usually used to display a page doesn’t exist message or redirect the users to an existing path.

Route
Route
Routes
pathMatch
full
redirectTo
canActivate
official docs