<commit_before>---
layout: post
title: "Angular 2 Series - Part 4: Component Router In-Depth"
description: "Learn all about Angular 2's new component router and how to set up routing in your app."
date: 2016-01-25 08:30
author: 
  name: <NAME>
  url: https://twitter.com/ryanchenkie?lang=en
  mail: <EMAIL>
  avatar: https://www.gravatar.com/avatar/7f4ec37467f2f7db6fffc7b4d2cc8dc2?size=200
design: 
  image_bg_color: "linear-gradient(#0143A3,#0273D4)"
  bg_color: "#7C161E"
  image: https://cdn.auth0.com/blog/angular2-series/angular2-logo.png
  image_size: "70%"
  blog_series: true
tags: 
- angular2
- angularjs
- routing
- router
- component
- javascript
- post-series
---

---

**TL;DR:** The new component router in Angular 2 comes with a lot of features and a slightly different approach to setting up routing. In this article we take a look at the router's features by implementing them in a simple Github user explorer application. Follow along here or take a look at [the repo](https://github.com/auth0/angular2-routing) to get started with the code.

---

Angular 2 comes with a brand new component router that is packed with features. At the Beta 1 release, the documentation on Angular 2's router is in pretty good shape, and there is even an [extensive guide](https://angular.io/docs/ts/latest/guide/router.html) on setting it up. There are, howevever, some features and use cases that have yet to be documented.

Those coming from Angular 1.x will likely be familiar with UI Router, a third party routing system contributed by the community. Some aspects of the new component router in Angular 2 will look familiar to those who have used UI Router, but there are definitely some new features and concepts that haven't been seen before. For example, child routes in Angular 2 are designed to work best by requiring separate **routing** and **view** components.

In this article we'll get a feel for the new router by implementing it in a simple Github user explorer application. In the app, we'll be able to search for Github accounts based on username, and we'll set up a way to explore further detail about the users. To do this, we'll set up child routes and work with route parameters.

![angular2 routing router](http://cdn.auth0.com/blog/angular2-routing/angular2-routing-1.png)

## Getting Started

It's best to get started with a seed project. If you'd like to use Webpack, the [Angular 2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) from [AngularClass](https://angularclass.com/) is an excellent option.

The router in Angular 2 provides both a `HashLocationStrategy` and a `PathLocationStrategry`, one of which is used when we bootstrap the app. As you might guess, `HashLocationStrategy` uses hashes in the URL, which is what we're used to as the default from Angular 1.x. Many prefer not to use hashes, in which case `PathLocationStrategy` can be applied.

```js<commit_msg>Added links to previous posts<commit_after>---
layout: post
title: "Angular 2 Series - Part 4: Component Router In-Depth"
description: "Learn all about Angular 2's new component router and how to set up routing in your app."
date: 2016-01-25 08:30
author: 
  name: <NAME>
  url: https://twitter.com/ryanchenkie?lang=en
  mail: <EMAIL>
  avatar: https://www.gravatar.com/avatar/7f4ec37467f2f7db6fffc7b4d2cc8dc2?size=200
design: 
  image_bg_color: "linear-gradient(#0143A3,#0273D4)"
  bg_color: "#7C161E"
  image: https://cdn.auth0.com/blog/angular2-series/angular2-logo.png
  image_size: "70%"
  blog_series: true
tags: 
- angular2
- angularjs
- routing
- router
- component
- javascript
- post-series
---

---

**TL;DR:** The new component router in Angular 2 comes with a lot of features and a slightly different approach to setting up routing. In this article we take a look at the router's features by implementing them in a simple Github user explorer application. Follow along here or take a look at [the repo](https://github.com/auth0/angular2-routing) to get started with the code.

If you'd like to see our other Angular 2 content, we've also covered [pipes](https://auth0.com/blog/2015/09/03/angular2-series-working-with-pipes/), [dependency injection](https://auth0.com/blog/2015/09/17/angular-2-series-part-2-domain-models-and-dependency-injection/), [HTTP](https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/), and [authentication](https://auth0.com/blog/2015/11/10/introducing-angular2-jwt-a-library-for-angular2-authentication/).

---

Angular 2 comes with a brand new component router that is packed with features. At the Beta 1 release, the documentation on Angular 2's router is in pretty good shape, and there is even an [extensive guide](https://angular.io/docs/ts/latest/guide/router.html) on setting it up. There are, howevever, some features and use cases that have yet to be documented.

Those coming from Angular 1.x will likely be familiar with UI Router, a third party routing system contributed by the community. Some aspects of the new component router in Angular 2 will look familiar to those who have used UI Router, but there are definitely some new features and concepts that haven't been seen before. For example, child routes in Angular 2 are designed to work best by requiring separate **routing** and **view** components.

In this article we'll get a feel for the new router by implementing it in a simple Github user explorer application. In the app, we'll be able to search for Github accounts based on username, and we'll set up a way to explore further detail about the users. To do this, we'll set up child routes and work with route parameters.

![angular2 routing router](http://cdn.auth0.com/blog/angular2-routing/angular2-routing-1.png)

## Getting Started With the Router

It's best to get started with a seed project. If you'd like to use Webpack, the [Angular 2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) from [AngularClass](https://angularclass.com/) is an excellent option.

The router in Angular 2 provides both a `HashLocationStrategy` and a `PathLocationStrategry`, one of which is used when we bootstrap the app. As you might guess, `HashLocationStrategy` uses hashes in the URL, which is what we're used to as the default from Angular 1.x. Many prefer not to use hashes, in which case `PathLocationStrategy` can be applied.

```js
{'fraction_non_alphanumeric': 0.08625294579732914, 'fraction_numerical': 0.02922230950510605, 'mean_word_length': 4.39034716342083, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 18, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4232753', 'n_tokens_mistral': 1964, 'n_tokens_neox': 1787, 'n_words': 825}