title: Centralizing routes into a Service in Angular
body: <p>This question focuses on how to manage routing in large-scale apps. I'm still unsure how to handle this, or if tutorials are just far beyond best practices. </p>
  
  <p>Well, let's get to the point. When an application grows, sooner or later there are hundreds of <code>routerLink</code> directives with hard-coded strings like </p>
  
  <pre><code>&lt;a routerLink="foo"&gt; 
  </code></pre>
  
  <p>or dynamic ones something like that</p>
  
  <pre><code>&lt;a [routerLink]="'/foo/bar/' + myObj.id"&gt;
  </code></pre>
  
  <p>That permanent repetition of hard-coded route fragments and dynamic assembly of routes within the directive doesn't really feel right. </p>
  
  <p>In terms of <em>Don't repeat yourself</em> and <em>Single responsibility principle (SRP)</em> the first thing that comes to my mind is creating something like a <em>RouteService</em> that centralizes those routes and can be injected into components. It might also provide constants to the routing modules. </p>
  
  <p>So, although the Angular style guide <a href="https://angular.io/guide/styleguide#single-responsibility-1" rel="nofollow noreferrer">preaches to obey SRP</a> this issue is never addressed. And tutorials like the <em>Tour of Heroes</em> are typically much too small to take issues into account that occur when writing large-scale applications. </p>
  
  <p>Are there any caveats of using an injectable <em>Service</em> to create routes or 
  are there any patterns, concepts, frameworks that aim to extract hard-coded routes out of components/templates?</p>