#native_company# #native_desc#
#native_cta#
  1. AngularJS Migration
  2. Step 4 - Componentify
  3. Changing Routes

Changing Routes

Important

The source code for this course can be found on GitHub. Each step has it’s own branch, instructions for how to checkout the correct code for each step are in the Project Setup lecture.

Changing Routes

With all our directives and controllers converted into components, lets now look at how we can fix the routes within our application!

Controller template files

If you remember from our previous lecture, our controllers' template files are linked using separate routing configurations in the app.routes.ts file. With the controllers now being converted into components, these routing configurations need some modifications.

The good news is, this is a lot simpler than it sounds.

Consider the following routing configuration used to map the PersonListController to its corresponding template file:

Listing 1. PersonListController template mapping
angular
  .module("codecraft")
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state("list", {
        url: "/",
        views: {
          main: {
            templateUrl: "templates/list.html",
            controller: "PersonListController"
          },
          ...
        }
      })
      ...

Because our new components are like directives in AngularJS, all we need to do is replace the templateUrl and controller attributes with the template attribute and set its value to the PersonListComponent s selector in kebab-case.

The updated routing configuration will look like so:

Listing 2. PersonListController updated template mapping
angular
  .module("codecraft")
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state("list", {
        url: "/",
        views: {
          main: {
            template: '<person-list></person-list>'
          },
          ...
        }
      })
      ...

Similarly, change the remaining configurations so that the updated app.routes.ts file will look like so:

Listing 3. PersonListController updated template mapping
angular
  .module("codecraft")
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state("list", {
        url: "/",
        views: {
          main: {
            template: "<person-list></person-list>",
          },
          search: {
            template: "<search></search>",
          }
        }
      })
      .state("edit", {
        url: "/edit/:email",
        views: {
          main: {
            template: "<person-edit></person-edit>",
          }
        }
      })
      .state("create", {
        url: "/create",
        views: {
          main: {
            template: "<person-create></person-create>",
          }
        }
      });

    $urlRouterProvider.otherwise("/");
  });

Finally, to ensure that the components are accessible within our application, replace the following imports in main.ts:

import './directives';
import './controllers';

with

import './components';

To verify everything is in order, re-build the project, load the application on your localhost and run a quick sanity test to ensure all the functionality works as expected!

Caught a mistake or want to contribute to the book? Edit this page on GitHub!


Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!