A Quick Comparison of Angular Routing in 1.5.xx and 2.0

Notes on routing in Angular 1.5.x vs. 2.0

In 1.5x the main service component in the ngRoute module is the $route service.

$route is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.

Angular Docs (https://docs.angularjs.org/api/ngRoute/service/$route)

The ngRoute module translates, in 2.0, to what is referred to by the Angular Team as the router library or the router service.

The Angular Router … presents a particular component view for a given URL.

Angular Docs (https://angular.io/docs/ts/latest/guide/router.html#!#import)

(The Angular Router) is an external, optional Angular NgModule called RouterModule. The router is a combination of multiple provided services (RouterModule), multiple directives (RouterOutlet, RouterLink, RouterLinkActive), and a configuration (Routes)

Angular Docs (https://angular.io/docs/ts/latest/tutorial/toh-pt5.html)

Regarding route configuration in 1.5.xx, the ngView directive is required to instantiate the controller and render a view based on the route. It must exist in the index.html file. The ngView directive seems to translate directly to a component from the Angular 2 router library.  This is an element that is added to an Angular 2 component's template. This element is called router-outlet (<router-outlet></router-outlet>).  Typically, it will live in the template of your main application component, which will probably be called AppComponent.

To wire up routes in 1.5.x you invoke the module’s config method, passing it a function into which the $routeProvider and $locationProvider are injected. The $routeProvider contains a when method that adds a new route definition to the $route service.

 

app.controller('BookController', function ($scope, $routeParams) {
	$scope.name = 'BookController';
	$scope.params = $routeParams;
})
.config(function ($routeProvider, $locationProvider) {
	$routeProvider.when('/Book/:bookId', {
		templateUrl: 'book.html',
		controller: 'BookController',
		resolve: {}
	});
});

 

The when method takes a path and a route. The route path is matched against $location.path, and the route definition contains the name of the controller angular will use when the path is found. Other options like controllerAs: ‘viewModel’, for instance, allow you to control the name of the reference to the controller, but basically this technique of registering routes with $routeProvider seems to be analogous to doing three things in version 2:

  1. Creating an app.routing.ts file that imports Routes, RouterModule, and any of your components required to resolve paths within your route definitions. These route definitions are then included in an array in this same app.routing.ts file (example shown below). This is the configuration file for your routes. This route definition has the following parts:
    • path: the router matches this route's path to the URL in the browser address bar (heroes).
    • component: the component that the router should create when navigating to this route (HeroesComponent).
  2. Exporting a named constant (“routing” for instance) by invoking RouterModule.forRoot with your array (shown below as appRoutes) as the single parameter.

 

// Step 1: create app.routing.ts, and define your routes array.  // 
// 
import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroesComponent }      from './heroes.component';
import { DashboardComponent }   from './dashboard.component';

const appRoutes: Routes = [
	{
		path: 'heroes',
		component: HeroesComponent
	},
	{
		path: 'dashboard',
		component: DashboardComponent
	},
	// A redirect route for the index.
	//
	{
		path: '',
		redirectTo: '/dashboard',
		pathMatch: 'full'
	}
];

// Step 2: export a routing constant initialized using the RouterModule.forRoot method applied to our array of routes. 
// This method returns a configured router module that we'll add to our root NgModule, AppModule.
//
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

 

  1. Importing this named constant from app.routing.ts and add it the imports array of AppModule within app.module.ts

 

// Step 3: in app.module.ts, add the previously defined routing constant to your imports array. // 
//
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { routing } from './app.routing'; import { AppComponent } from './app.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroesComponent } from './heroes.component'; import { DashboardComponent } from './dashboard.component'; import { HeroService } from './hero-service'; @NgModule({ imports: [ BrowserModule, FormsModule, routing ], declarations: [ AppComponent, DashboardComponent, HeroDetailComponent, HeroesComponent ], providers: [ HeroService ], bootstrap: [ AppComponent ] }) export class AppModule { }

 

One more simple requirement you will not want to forget is the addition of the base tag to the index.html file.

We must add a <base href> element tag to the index.html to make pushState routing work. The browser also needs the base href value to prefix relative URLs when downloading and linking to css files, scripts, and images. Add the base element just after the <head> 
tag. If the app folder is the application root, as it is for our application, set the href value in index.html exactly as shown here.

Angular Docs (https://angular.io/docs/ts/latest/guide/router.html#!#base-href)