Upgrading to Angular Component Router

I have a use case where I can benefit from upgrading to the 'new' component router in AngularJs 1.5. Below are my very quickly jotted down notes.

Wow! My app is so much faster after the upgrade!

I needed to have nested routes.  Basically a list of (different) things on the left nav.  When clicked, the correct controller and view need to show in the center of the page.
For HTML I'm using Bootstrap so the initial html is pretty easy, just a row with two columns (col-md-3, col-md-9)

My primary resource is the AngularJs docs .

I decided to NOT upgrade to html 5 routing mode.

I'm ripping out my old routing, although I'm not quite confident I need to do this.

• I started by making my top nav an angular component. This is the top level of the component tree.
• I pulled the top nav (html) out of the index.html and making a topNav.html template.
• Then I basically copied the component example in the AngularJs docs. Kept this in my index.js file or the ng-app's first controller file.
• changed the ng-href's into ng-links in the topNav.html
• wired up all the immediate routes mentioned in the topNav
• which leads to making components in all the other modules
• I'm working them one at a time.
• Read the docs carefully, if your routes have sub routes you have to include /... in your parent route definition.
• Converting an existing controller over to a component.
• follow the example in the docs
• I'm using the vm.foo syntax in the controller, I kept that but also added an extra line, might be unnecessary though
• $ctrl = this
• changed all my controllerAs syntax for ctrl to $ctrl in my HTML (had to do this.)
• Another big gotcha was route parameters
• required and optional, you will need to visit the AngularJs 2.0 docs for this. 
• The biggest unexpected part is the syntax changes based on the route definition
• if in the ng-link you have extra parameters (that are not in the route definition) they will show up as optional parameters in either ?foo=bar or ;foo=bar.
• Usually the required parameters show up in the route like #/user/eric
• $location.search('id',vm..selectedThing.id) is now
•  this.$router.navigate(['MyThingRoute', { id: vm.selectedThing.id }]);
• Navigating to a nested component from a home or other page.
• <a ng-link="['UsersList','UserDetail',{userId:$ctrl.id}]">{{$ctrl.name}}</a>
• This invokes the UsersList component, then the UserDetail component, and then the user id is added to the route auto-magically.