2015-11-11 3 views
14

Я использую угловую 1.5 беты 2 и новый маршрутизатор от Angular 2 альфа 45.
я не смог найти примеры использования последнего маршрутизатора с угловыми 1.
я могу найти примеры использования маршрутизатора для углового 2, используя @RouteConfig.Угловой 1,5 и новый компонент Маршрутизатор

Может кто-нибудь объяснить, как настроить угловой контроллер 1? И, если возможно, полный рабочий пример?

ответ

14

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


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

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

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

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

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

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

Нашел еще один образец на https://github.com/brandonroberts/angularjs-component-router – pauloya

+0

Я не мог правильно настроить детские маршруты и не смог найти рабочий образец с дочерними маршрутами – pauloya

+0

Обсуждение углового github привел к этой демонстрации с детским маршрутом http://plnkr.co/edit/2ZNQzWfspvpmMCLRBOdN?p=preview – pauloya

4

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

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

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

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

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

+0

Я нашел это на 0.1. Я считаю, что они выпускают 0,3. – Winnemucca