@ngspot/route-path-builder

Declarative Route Path Management in Angular Apps

This library consists of a single abstract class: RoutePathBuilder. See this article to learn how to use it!

Features

• ✅ < 3kb bundle size
• ✅ A single source of truth for each path in the application
• ✅ Strong typings
• ✅ Access to Angular's dependency injection
• ✅ Use of absolute links (meaning, the generated links are absolute)
• ✅ Modularity
• ✅ Use of property chaining to reflect the nested nature of the routes
• ✅ Use of relative URL parts for the assembly of the URLs.
• ✅ Flexible return type

Table of Contents

• Installation
• Usage
• FAQ

Installation

NPM

npm install @ngspot/route-path-builder --save

Yarn

yarn add @ngspot/route-path-builder

Usage

1. Define your routes

// app-routes.ts
import { RoutePathBuilder } from '@ngspot/route-path-builder';

@Injectable({ providedIn: 'any' })
export class AppRoutes extends RoutePathBuilder {
  products = this.childRoutes('products', RoutesForProducts);

  about() {
    return this.url('about');
  }

  contact() {
    return this.url('contact');
  }
}

// routes-for-products.ts
@Injectable({ providedIn: 'any' })
export class RoutesForProducts extends RoutePathBuilder {
  orders() {
    return this.url('orders');
  }
}

2. Use the AppRoutes:

class MyComponent {
  constructor(private appRoutes: AppRoutes) {}

  someMethod() {
    const aboutUrl = this.appRoutes.about().url;

    this.appRoutes.products.orders().navigate();
  }
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitry A. Efimenko 📝 💻 🎨 📖

Ana Boca 📝

Also, thanks to Netanel Basal for inspiring me to come up with this solution.

This project follows the all-contributors specification. Contributions of any kind welcome!

Icons made by Freepik from www.flaticon.com