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!
- ✅ < 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
npm install @ngspot/route-path-builder --save
yarn add @ngspot/route-path-builder
- 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');
}
}
- Use the
AppRoutes
:
class MyComponent {
constructor(private appRoutes: AppRoutes) {}
someMethod() {
const aboutUrl = this.appRoutes.about().url;
this.appRoutes.products.orders().navigate();
}
}
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