title: AngularJS components with routes
body: <p>I have been using AngularJS 1.4.7 for years. Main navigation is based on states defined in a module definition that might look like this:</p>
  
  <pre><code>var htmlReports = angular.module('app.htmlreports', []);
  htmlReports.config(
  function ($stateProvider) {
      $stateProvider
          .state('body.htmlreports', {
          templateUrl: 'htmlReports.html',
          controller: 'htmlReportsController',
          url: 'htmlreports'
      });
   });
  </code></pre>
  
  <p>So every module comes with its state configuration. Simple and it works very well. Now I am trying to move to AngularJS 1.5 and change my application to a component based one. I am reading some articles and they talk about components with routes. Something like this:</p>
  
  <pre><code>var app = {
  template: `
  &lt;p&gt;Name: {{app.name}}&lt;/p&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a ng-link="['Home']"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a ng-link="['About']"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a ng-link="['User', {id: 'A'}]"&gt;User A&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a ng-link="['User', {id: 'B'}]"&gt;User B&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;ng-outlet&gt;&lt;/ng-outlet&gt;
   `,
   controller: AppController,
   controllerAs: 'app',
   $routeConfig: [
     { path: '/', component: 'home', as: 'Home' },
     { path: '/about', component: 'about', as: 'About' },
     { path: '/user/:id', component: 'user', as: 'User' }
   ]
  };
  </code></pre>
  
  <p>So, the way I see it I can replace all my modules with state configurations to components with routes, right?</p>
  
  <p>I am also reading this article:
  <a href="https://blog.grossman.io/angular-1-component-based-architecture-2/" rel="nofollow noreferrer">Article</a></p>
  
  <p>where the author shows his state configuration in the following way which is much closer to want I currently have:</p>
  
  <pre><code>angular.module('app', [
  uiRouter
  ])
  .config(($locationProvider, $stateProvider, $urlRouterProvider) =&gt; {
  "ngInject";
  
  // Define our app routing, we will keep our layout inside the app component
  // The layout route will be abstract and it will hold all of our app views
  $stateProvider
      .state('app', {
          url: '/app',
          abstract: true,
          template: '&lt;app&gt;&lt;/app&gt;'
      })
  
      // Dashboard page to contain our goats list page
      .state('app.home', {
          url: '/home',
          template: 'Home page'
      })
  
      // Create route for our goat listings creator
      .state('app.create', {
          url: '/create',
          template: 'Create Page'
      });
  
      // Default page for the router
     $urlRouterProvider.otherwise('/app/home');
     })
    .component('app', AppComponent);
  </code></pre>
  
  <p>Can someone please help me to understand what direction should I take migrating from 1.4.7 to 1.5 in regards of application navigation?</p>
  
  <p>Thanks</p>