14

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?

pauloya
  • 2,535
  • 3
  • 30
  • 50

2 Answers2

14

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" }]
});
pauloya
  • 2,535
  • 3
  • 30
  • 50
  • Found another sample at https://github.com/brandonroberts/angularjs-component-router – pauloya Nov 13 '15 at 10:48
  • I couldn't set up child routes correctly, and couldn't find a working sample with child routes – pauloya Nov 13 '15 at 11:06
  • The discussion on the angular github led to this demo with a child route http://plnkr.co/edit/2ZNQzWfspvpmMCLRBOdN?p=preview – pauloya Dec 01 '15 at 12:03
  • Works great! I have two additional request. Could you add information about how to use it with route parameters? And also, how to use it with the component helper method you mentioned which is now available in the 1.5 rc. – Simon Bengtsson Jan 03 '16 at 18:52
  • I added the 1.5 component usage, regarding the parameters can you open a new question and link it here? – pauloya Jan 04 '16 at 09:19
  • You would add $router to the controller correct? Or is there another way to access $routeConfig? – Winnemucca Jan 15 '16 at 21:15
  • @stevek in the code example `$routeConfig` is just a field name on the object, no need to inject anything at that point. – pauloya Jan 18 '16 at 10:30
  • 1
    Is there any update regarding the new router? 1.5 version was released without the new router. What is the best example to use the router? – Dor Cohen Feb 24 '16 at 13:46
4

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.

Winnemucca
  • 3,309
  • 11
  • 37
  • 66