Angular 1.5 and new Component Router

Question

I'm using angular 1.5 beta 2 and the new router from Angular 2 alpha 45.
I couldn't find examples of usage for the latest router with Angular 1.
I can find examples of the usage of the router for Angular 2, using @RouteConfig.

Can someone explain how I would configure an angular 1 controller? And, if possible, a full working example?

Answer 1

Update They have stopped working on this version of the Router and started a version 3 with different APIs. As of June 20, 2016 there was no recommended way for using the router v3 with Angular 1. I'm not sure if this has changed since. This question and answer below relates to Router v2 (aka ComponentRouter).

---

Obsolete API
A few sites indicate that a component in Angular 1 (for the purpose of the new router) is a controller registered as [name]Controller and a template picked up from component/[name]/[name].html. This is now obsolete.

New API
This discussion contains recent information, explaining how to get the latest Angular 1 new router version.

The component used in the configuration is mapped to a directive registered with the component name. See this sample.

angular.module('app.home', [])
.directive('home', function() {
  return {
    template: 'Hello {{ home.text }}',
    controller: function HomeController() {
      this.text = 'World';
    },
    controllerAs: 'home'
  }
});

With Angular 1.5 there is a new syntax for registering components, see here. I've used it with this syntax:

angular.module('app.home', [])
.component('home', {
  restrict: "EA",
  template: 'Hello {{ home.text }}',
  controller: function HomeController() {
    this.text = 'World';
  }
  // to configure a child route
  //,$routeConfig: [
  //  { aux: "/son", component: "son", as: "Left" },
  //  { aux: "/daughter", component: "daughter", as: "Left" }]
});

Answer 2

Although it is pretty new at this point you can also use a root component with the new angular router. This component could take additional components as children.

I followed Pete Bacon Darwin's example to get a version going. https://github.com/petebacondarwin/ng1-component-router-demo

Notice in his version The main component has $router.config passed in the run block and identifies children with 3 dots.

.run(function($router) {
    $router.config([
    { path: '/...', name: 'App', component: 'app', useAsDefault: true }
    ]);

I am using angular 1.5.0 to follow his github. I ran into issues playing with release some of the release candidates.