AngularJS components with routes

Question

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:

var htmlReports = angular.module('app.htmlreports', []);
htmlReports.config(
function ($stateProvider) {
    $stateProvider
        .state('body.htmlreports', {
        templateUrl: 'htmlReports.html',
        controller: 'htmlReportsController',
        url: 'htmlreports'
    });
 });

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:

var app = {
template: `
<p>Name: {{app.name}}</p>
<nav>
  <ul>
    <li><a ng-link="['Home']">Home</a></li>
    <li><a ng-link="['About']">About</a></li>
    <li><a ng-link="['User', {id: 'A'}]">User A</a></li>
    <li><a ng-link="['User', {id: 'B'}]">User B</a></li>
  </ul>
</nav>
<ng-outlet></ng-outlet>
 `,
 controller: AppController,
 controllerAs: 'app',
 $routeConfig: [
   { path: '/', component: 'home', as: 'Home' },
   { path: '/about', component: 'about', as: 'About' },
   { path: '/user/:id', component: 'user', as: 'User' }
 ]
};

So, the way I see it I can replace all my modules with state configurations to components with routes, right?

I am also reading this article: Article

where the author shows his state configuration in the following way which is much closer to want I currently have:

angular.module('app', [
uiRouter
])
.config(($locationProvider, $stateProvider, $urlRouterProvider) => {
"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: '<app></app>'
    })

    // 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);

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?

Thanks