Angular 1.5 и новый компонентный маршрутизатор

Ответ 1

Обновить. Они перестали работать над этой версией маршрутизатора и начали версию 3 с различными API-интерфейсами. По состоянию на 20 июня 2016 года не было рекомендованного способа для использования маршрутизатора v3 с Angular 1. Я не уверен, что это изменилось поскольку. Этот вопрос и ответ ниже относятся к Router v2 (aka ComponentRouter).

Устаревший API
Несколько сайтов указывают, что компонент в Angular 1 (для нового маршрутизатора) - это контроллер, зарегистрированный как [name]Controller, и шаблон, полученный из component/[name]/[name].html. Это устарело.

Новый API
В этом обсуждении содержится последняя информация, объясняющая, как получить последнюю версию нового маршрутизатора Angular 1.

Компонент, используемый в конфигурации, сопоставляется с директивой, зарегистрированной с именем компонента. См. Этот образец.

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

С Angular 1.5 появился новый синтаксис для регистрации компонентов, см. здесь. Я использовал его с этим синтаксисом:

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" }]
});

Ответ 2

Несмотря на то, что на данный момент это довольно просто, вы также можете использовать корневой компонент с новым маршрутизатором angular. Этот компонент может принимать дополнительные компоненты в качестве детей.

Я последовал примеру Пита Бэкона Дарвина, чтобы получить версию. https://github.com/petebacondarwin/ng1-component-router-demo

Обратите внимание, что в его версии главный компонент имеет $router.config, переданный в блоке выполнения и идентифицирующий дочерние элементы с 3 точками.

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

Я использую angular 1.5.0, чтобы следить за его github. Я столкнулся с проблемами, играющими с выпуском некоторых из кандидатов на выпуск.