Angular.js: Новый роутер

+1

@georgiosd Поскольку новый маршрутизатор еще не опубликован, вам придется собрать его из исходного кода, используя репозиторий http://github.com/angular/angular . Оттуда вы можете взять созданный файл (angular_1_router.js) и использовать его

Вот plunkr с последней сборкой на сегодняшний день.

http://plnkr.co/edit/MxzjC99l8WDbuEu14ws2?p=preview

Замечательно, спасибо. Есть ли в настоящее время ETA для выпуска?

Я понятия не имею. Я думал, что новый роутер должен поставляться с 1.5, но нам придется подождать и посмотреть.

Действительно! Спасибо, закрываю сейчас!

@brandonroberts, какую последовательность команд вы используете для сборки роутера?

Я выполнил "обычные" шаги npm install npm build.js и не получил файл angular_1_router.js ...

@georgiosd вам нужно запустить gulp buildRouter.dev . Он поместит angular_1_router.js в вашу папку dist.

@brandonroberts, можешь дать нам всю последовательность команд для сборки роутера? Я новичок в gulp, и со мной это не работает.

@vguede Конечно. У вас должен быть установлен хотя бы узел 5 и хотя бы npm 3.x.

Установить gulp глобально npm install -g gulp@latest
Клонируйте репо angular 2: git clone [email protected]:angular/angular.git angular2
Перейдите в каталог angular2 и установите зависимости cd angular2 и npm install
После завершения npm запустите команду gulp, чтобы создать файл маршрутизатора gulp buildRouter.dev

Файл angular_1_router.js будет в вашей папке angular2 / dist.

Надеюсь это поможет

@brandonroberts Работает нормально! Большое спасибо !

@brandonroberts Спасибо за информацию. Я не мог правильно использовать дочерние маршруты и не могу найти ни одного примера с дочерними маршрутами. Я расширил отправленный вами плункер дочерним маршрутом, поскольку я понимаю, что его следует использовать.
http://plnkr.co/edit/5PyC9MjSaI5xC3fZRkgw?p=preview

Компонент Home имеет новую розетку и настраивает новый маршрут в "/", но это не удается с
Ошибка: конфигурация '/' конфликтует с существующим маршрутом '/'

Я не думаю, что это должно конфликтовать, поскольку домашний контроллер настраивает дочерний маршрут, похоже, что домашний контроллер получает верхний маршрутизатор вместо дочернего.
Я основал это на этой презентации: https://docs.google.com/presentation/d/1bGyuMqYWYXPScnldAZuxqgnCdtgvXE54HhKds8IIPyI/edit#slide = id.gcbc539c5a_2_619

Может ли кто-нибудь помочь мне понять, как настроить дочерние маршруты, или указать мне на рабочий образец?

@pauloya Настройка дочерних маршрутов в Angular 1 немного отличается от их настройки в Angular 2. Чтобы настроить дочерние маршруты, вы должны поместить свойство $ routeConfig в свою директивную фабричную функцию в родительской директиве. Я раздвоил ваш планк и обновил его рабочим примером.

http://plnkr.co/edit/2ZNQzWfspvpmMCLRBOdN?p=preview

Если вы также хотите взглянуть на другой пример, он использует предстоящий помощник по компонентам, но концепции те же. https://github.com/brandonroberts/angularjs-component-router

Если вам нужна более новая сборка, вы можете установить маршрутизатор из npm прямо сейчас.

npm install @angular/router

Большое спасибо @brandonroberts за npm!

Это именно то, что мне нужно, спасибо!

@brandonroberts У вас такая же ошибка templateUrl <=> $ onActivate (проблема: angular / angular # 4633) на angularjs-component-router.
Ты хоть представляешь, когда эта ошибка будет исправлена?

@vguede Понятия не имею, когда это будет исправлено. Обычно у меня есть этап сборки, который импортирует html как есть и использует свойство шаблона.

Спасибо @brandonroberts , у меня все работает, используя module.component ()!
Я не уверен, как я должен вводить и использовать $ router в компоненте.
Я хочу программно вызвать navigate (), а также прочитать параметры.

http://plnkr.co/edit/xdEYFmUCv0xzvEbXrh0p?p=preview
В этом plunkr я добавил вызов для навигации, но он не работает, если я не использую _childrouter :

$router._childRouter.navigate([...])

Спасибо!

@pauloya Я думал, что всякий раз, когда вы вводите маршрутизатор, он будет использовать этот компонент в качестве родительского компонента для навигации и создания ссылок. В случае вашего примера вам нужно изменить

$router.navigate(['./Son']);

к

$router.navigate[('/Home', 'Son']);

Если вы хотите использовать параметры с маршрутом, просто добавьте параметры после каждого компонента в массиве

$router.navigate(['/Home', {name:'HomeParam'}, 'Son', {name:'SonParam'}]);

Спасибо @brandonroberts.
Но ng-link в шаблоне использует относительную ссылку ['./Son'] .
Думал, смогу на контроллере то же самое.

@pauloya Я тоже так думал. Возможно, это ошибка, но я не уверен.

Это приятное обсуждение, помогающее найти ответы на вопросы о роутере.

@pauloya маршрутизатор делегирует навигацию корневому маршрутизатору, что объясняет, почему вы должны предоставить полный путь маршрута даже в дочернем компоненте при программной навигации.

Привет,

Я пытаюсь использовать новый маршрутизатор ngComponentRouter в новом проекте с использованием AngularJs 1.5 и ES6.

Поэтому я загрузил его с помощью npm (npm install @ angular / router) и импортировал в свой app.js.

import ngComponentRouter from 'npm/@angular/router/angular1/angular_1_router.js';

console.log (ngComponentRouter) возвращает пустой объект {}.

Поэтому я не могу создать экземпляр ngComponentRouter.

angular.module('app', [
    ngComponentRouter,
    ....
    ]
);

Это вернет:

Неперехваченная ошибка: [$ injector: modulerr ] Не удалось создать экземпляр приложения модуля из-за:
Ошибка: [$ injector: modulerr ] Не удалось создать экземпляр модуля {} из-за:
Ошибка: [ng: areq] Аргумент "модуль" не является функцией, получен объект

Есть идеи, что можно сделать, чтобы использовать его?

@btribouillet Вам не нужно импортировать его таким образом. Просто импортируйте его и используйте строку

import 'npm/@angular/router/angular1/angular_1_router.js';

angular.module('app', [
    'ngComponentRouter'
    ]
);

@brandonroberts Спасибо! отлично работает;).

@btribouillet : +1:

Говорил быстро;).

На самом деле я хотел бы ввести его в конфигурацию своего модуля.

import angular from 'npm/angular';
import 'npm/@angular/router/angular1/angular_1_router'; 
import uiRouter from 'angular-ui-router';
import homeComponent from './home.component';

let homeModule = angular.module('home', [
    uiRouter,
    // 'ngComponentRouter' 
])

.config(($stateProvider) => {
// .config(($router) => { // Using ngComponentRouter

    console.log($stateProvider); // return the stateProvider object
    // console.log($router); // Using ngComponentRouter

    // $router = [
    //     { path: '/home', as: 'Home',  component: homeComponent }
    // ]

})

.component('home', homeComponent);

export default homeModule;

Закомментированный код - это код, который я хотел бы использовать (используя ngComponentRouter), но возвращающий Неизвестный поставщик: $ router. Этот код работает с ui-router.

Я ошибаюсь, вводя $ router вместо чего-то другого?

@btribouillet вы не настраиваете маршруты на этапе настройки с помощью ngComponentRouter. Вы должны вставить маршрутизатор в свой основной контроллер приложения и настроить их там. Взгляните на этот app.js из имеющегося у меня образца репозитория.

https://github.com/brandonroberts/angularjs-component-router/blob/master/app/components/app/app.js

Идеально! Это именно то, что мне нужно. Еще раз спасибо.

@brandonroberts, спасибо за подробности, у меня тоже все работает

Стоит отметить, что вам понадобится [email protected] < [email protected], для которого на данный момент вы получите проблему с установкой npm, но вы все еще можете выполнить задачу gulp для создания маршрутизатора ng1

@oknp полезно знать. Спасибо.

@brandonroberts Отличная работа и спасибо за всю полезную информацию. Я просмотрел ваш проект GitHub, но я пытаюсь использовать Browserify для require в ngComponentRouter in. Для этого я опубликовал пакет на npm (https://www.npmjs.com / package / ngcomponentrouter), обернув маршрутизатор как совместимый модуль. У меня также есть тестовый проект, в котором используется этот пакет, здесь: https://github.com/duluca/angular1.5-starter. Однако я получаю сообщение об ошибке выполнения: TypeError: Cannot set property '$$currentComponent' of undefined . Есть идеи о том, что здесь может быть не так?

@duluca есть некоторые проблемы.

1. С вашей сборки ngComponentRouter это выглядит , как вы переименовали все require заявления в angular_1_router.js файла в require1 . Некоторые директивы используют require в своем объекте определения директивы, поэтому вам нужно будет изменить их обратно.
2. У ваших маршрутов должен быть name , чтобы связываться с ними.
3. В ngComponentRouter нет ng-viewport .
4. Значение ng-link должно быть массивом с именем и параметрами компонента.

    <a ng-link="['Home']">Home</a>

Мне это помогает.

@brandonroberts Это было очень полезно, спасибо. Думаю, я исправил проблемы с пакетом npm (https://www.npmjs.com/package/ngcomponentrouter) и обновил проект GitHub вашими предложениями (https://github.com/duluca/angular1. 5-стартовый).

Целевая страница теперь отображается правильно, но когда я нажимаю Home я получаю другую ошибку StringWrapper.charCodeAt is not a function . Есть идеи по этому поводу?

StringWrapper.charCodeAt имеет довольно простую реализацию. Должно получиться что-то вроде:

charCodeAt: function(s, index) {
    return s.charCodeAt(index);
}

Спасибо @thegrtman. Да, похоже, что https://github.com/angular/angular/blob/2a2f9a9a196cf1502c3002f14bd42b13a4dcaa53/modules/angular1_router/lib/facades.es5 отсутствует реализация

Ага. Его нет на фасадах, включенных в сборку ng1.
23 января 2016 г., 11:19, «Кевин Гроат» [email protected] написал:

StringWrapper.charCodeAt имеет довольно простую реализацию. Должен быть
что-то вроде:

charCodeAt: function (s, index) {
вернуть s.charCodeAt (индекс);
}

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/angular/angular.js/issues/12926#issuecomment -174202546
.

Я пришлю пул-реквест

Удачи: +1:
23 января 2016 г. в 11:26 утра «Догухан Улука» [email protected] написал:

Я пришлю пул-реквест

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/angular/angular.js/issues/12926#issuecomment -174205299
.

@brandonroberts Последняя сборка, похоже, не работает с кризисом и

@ Rab815 Я не выкладывал репо о кризисах и героях. Вы говорите об этом: https://github.com/petebacondarwin/ng1-component-router-demo ?

Извините, это не репо, которое вы разместили, но я говорил именно об этом.

https://github.com/petebacondarwin/ng1-component-router-demo

Я не знал, была ли эта версия маршрутизатора настроена специально для работы с компонентами, потому что я не могу установить последнюю сборку для работы с ней.

@ Rab815 у вас есть собственная сборка или вы используете ту из репо?

Я скачал ту из последней версии npm @ angular / router

@ Rab815 это очень старая сборка, которая еще не обновлялась. Вы должны использовать тот из репозитория, который вы разместили, пока репозиторий npm не будет обновлен.

Было уведомление о том, что npm был обновлен в течение последних 24 часов. Я попытаюсь получить его из папки angular2 dist или клонировать репозиторий angular2 и построить его оттуда. Был ли маршрутизатор изменен с $ router на $ rootRouter в репозитории angular 2. Кажется, это то место, где правильно работает разработчик для angular_1_router?

@ Rab815 Понятно . Мне пришлось указать другую версию, чтобы получить самую последнюю из npm

@ Rab815 изменения $ rootRouter еще не были объединены в мастер, поэтому сборка npm не работает с репо

@brandonroberts аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа

@ Rab815 это потому, что репо принадлежит ведущему разработчику Angular 1. Я думаю, что компонентный маршрутизатор скоро будет официально выпущен, поэтому репо обновляется. После выпуска репозиторий npm станет официальным источником обновлений.

@brandonroberts, так что это репо ngComponentRouter npm или репо npm @ angular / router? Т.е. Npm install @ angular / router. Или. Npm установить ngComponentRouter

@ angular / router - официальный

Спасибо, сэр! Я буду следить за обновлениями в нем, а пока буду использовать тот, который был опубликован в опубликованном примере «Кризис / герои». Я ценю всю полезную информацию

: +1:

@ Rab815 действительно была выпущена новая версия ( v0.1.0 ), которая должна быть совместима с компонентами. В настоящее время он помечен как pre-release , поэтому вы, вероятно, получили старую версию 0.0.1 (если вы сделали npm install @angular/router ).

Вы можете (в качестве временного решения) попробовать npm install @angular/[email protected] .

Решает ли он также проблему отсутствия шаблона html для компонента, когда не используется свойство template :. Я попытался использовать файлы .html с тем же именем, что и компонент, но он нашел бы его, если вы явно не используете свойство templateUrl.

Не уверен в этом. / cc @petebacondarwin

Да, версия 0.1.0 действительно работает с templateUrl !

@petebacondarwin Да, я знаю, что это работает С templateUrl . Но я думал, что предыдущие версии найдут html-файлы с тем же именем, что и компонент по умолчанию. Т.е. ./component/home/home.html, если компонент был назван home и в home.js, без необходимости явно использовать templateUrl . Что он найдет шаблон на основе условностей. Предыдущая версия, похоже, также имела возможность переопределения с помощью $ componentLoaderProvider, чтобы указать ему, где находятся шаблоны, если структура каталогов не соответствует соглашению, но я не вижу эквивалента в более поздних версиях. Я мог ошибаться, возможно, я неправильно понял, как это будет работать, просто попросив разъяснений. Спасибо за вашу помощь!

Да все это было удалено. Это было тогда, когда компонентный маршрутизатор ng1 фактически маршрутизировал не директивы компонентов, а контроллеры со связанными файлами шаблонов. Все это было довольно волшебно.
Теперь у нас есть гораздо более надежный API, основанный на директивах компонентов, который намного больше похож на то, как он работает в Angular 2. Попробуйте.

Хорошо, я попробую загрузить последнюю версию с @ angular / [email protected] и попробую. Если у меня возникнут проблемы, возможно, я попробую опубликовать github, чтобы узнать, что я делаю не так. Спасибо за вашу помощь!

@petebacondarwin или @brandonroberts хорошо, у меня есть плункер со структурой, с которой я работаю, чтобы разбивать компоненты на отдельные каталоги. У меня вопрос, не должен ли домашний или приветственный компонент находить расположение шаблонов welcome.html или home.html на основе соглашения вместо того, чтобы использовать templateUrl: в параметрах компонента. Используется последняя версия anuglar_1_router.js. Если я закомментирую templateUrl в каждом компоненте, все станет пустым

http://plnkr.co/edit/xlOnWRomoXfPEPzFKgFu

Нет, мы не используем загрузку по соглашению

аххххх .... так что необходимо указать template: или templateUrl :. Спасибо за разъяснение, сэр! Очень признателен. По крайней мере, я двигаюсь в правильном направлении ... как я хочу работать с requirejs, чтобы загружать js-файлы компонентов, когда они нужны, и загружать все js-файлы для приложения на странице index.html

Мы рассматриваем ленивую загрузку. Он будет доступен в Angular 2. Есть некоторые трудности с Angular 1, поскольку он не предназначен для поддержки компонентов с поздним связыванием. Возможно, есть способ заставить его работать с одним из сторонних модулей отложенной загрузки Angular и маршрутами AsyncRoute .

Некоторое время назад я получил ленивую загрузку, работая с

Я просто смотрел на oclazyload ... но я не был уверен, основываясь на примерах, будет ли он работать с новым маршрутизатором, поскольку он работает без статических маршрутов в routeprovider ... конфигурация выглядит иначе. любая помощь всегда приветствуется.

Верно. Вы не сможете использовать статический $ routeConfig в помощнике компонента. Вам нужно будет вставить $ router в свой основной компонент и таким образом настроить маршруты. Вы также можете использовать его в блоке выполнения.

@ Rab815 - это простой пример отложенной загрузки с использованием ocLazyLoad и маршрутизатора компонентов. Маршрут About лениво загружается через отдельный модуль.

http://plnkr.co/edit/f40DUTysEFuj4L74U5BO?p=preview

Прохладный! Спасибо, я попробую интегрировать этот подход в свой плункер ... посмотрим, сработает ли он
http://plnkr.co/edit/xlOnWRomoXfPEPzFKgFu

@brandonroberts Я интегрировал это в свой плункер, но все еще кажется, что он загружает файлы js до того, как это нужно ... знает ли он, что нужно выгружать файлы js, которые ему больше не нужны? Я интегрировал то, что вы мне показали, в файл appModule.js и снял загрузку http://plnkr.co/edit/xlOnWRomoXfPEPzFKgFu

@ Rab815 вам нужно удалить appModule.js или что-нибудь еще, что вы хотите лениво загружать из тегов скрипта. Вот почему он загружается раньше, чем это необходимо. В документах говорится:

Нет возможности выгрузить javascript, но вы можете удалить css, удалив тег ссылки вашего ресурса примерно так:

@brandonroberts На самом деле я беру это обратно ... когда я просматриваю источники в chrome под run.plnkr.co home.js или welcome.js не загружаются, пока я не щелкну по ссылкам ... Спасибо! Надеюсь, я смогу немного уточнить это по ходу разработки.

Отличная работа, вы двое. Возможно, кто-нибудь из вас мог бы написать в блоге сообщение о том, как заставить это работать?

@petebacondarwin Единственная проблема с этим plunkr http://plnkr.co/edit/xlOnWRomoXfPEPzFKgFu?p=info состоит в том, что функция loadmodule должна находиться в области видимости внутри функции run, а для компонентов с подмаршрутами это много повторяющегося кода. Возможно, придется поместить это в службу или другой модуль, который можно внедрить, но по-прежнему использовать в функции запуска. Также с этим route.config {} он кажется непрактичным для крупных корпоративных приложений. Также пытаюсь найти способ создать какой-то механизм динамической маршрутизации на основе переменных, например .. / app /: module /: component /: params *, затем заполните эти пробелы, чтобы найти нужный компонент. Но из-за того, что route.config {} встречается на этапе выполнения, это может значительно усложнить задачу. В целом я пытаюсь найти способ выполнять динамическую маршрутизацию / загрузку ресурсов по запросу. Пожалуйста, дайте мне знать, если этот подход неосуществим, учитывая то, как работает новый механизм маршрутизации ... возможно, мои цели немного высоки

: +1:
Если кто-то из вас сможет создать хороший рабочий plunkr, дайте мне знать, и я добавлю его в документацию ocLazyLoad :)

Планируется ли ленивая загрузка в конечном итоге для маршрутизатора компонентов? Использование сторонних хаков, таких как мой сверхразум и ocLazyLoad от @ocombe, можно было использовать в качестве временной остановки, но далеко от идеала.

По крайней мере, некоторые методы внутри angular могут предоставить гораздо лучшее решение для отложенной загрузки компонентов, даже если оно официально не поддерживается.
@petebacondarwin , вы хотите, чтобы мы над этим поработали? Мы могли бы сделать пиар

@ocombe У меня здесь есть рабочий плункер, использующий вашу ленивую загрузку. Если вы хотите, чтобы я очистил его визуально, я могу. http://plnkr.co/edit/f40DUTysEFuj4L74U5BO?p=preview

Я думаю, что это нормально, если Angular не включает в себя функции для выполнения самой ленивой загрузки, люди могут использовать для этого webpack, requirejs или аналогичные функции. Я просто хочу, чтобы инжектор Angular не ожидал всего сразу, поэтому это возможно.

Один из основных принципов Angular заключается в том, что он не мешает вам, если вы хотите заменить его части. Однако ленивая загрузка - это одна из областей, где Angular - единственный фреймворк, который вам мешает.

@brandonroberts Я пробовал что-то очень похожее на ваш plunkr, но я пытался просто поместить загрузчик в другой модуль под названием lazyModule с общедоступной функцией

@ Rab815 поместил его в сервис, казалось, чище и

@brandonroberts Вот версия, которую я придумал ... она помещает $ lazy в единственную глобальную переменную mainapp, но загружает все в модуль ... Я не знаю, каковы преимущества или недостатки реализации по сравнению с вашей ... это как раз то, о чем я подумал. Я пытался смоделировать компоненты, модули и т. Д., Разбитые на отдельные каталоги. может быть, перебор

http://plnkr.co/edit/xlOnWRomoXfPEPzFKgFu?p=preview

Один из основных принципов Angular заключается в том, что он не мешает вам, если вы хотите заменить его части. Однако ленивая загрузка - это одна из областей, где Angular - единственный фреймворк, который вам мешает.

Согласен с @geddski , если немного

простая настройка нескольких вещей значительно упростит ленивую загрузку

Если настройка этих вещей не «повредит» кодовую базу другими способами (или если преимущества перевешивают недостатки), я не думаю, что кто-то будет возражать против включения отложенной загрузки в ng1.
_{Не то чтобы он не поднимался раньше (например, # 11015 и # 4694).}

Если это не серьезное изменение (а из предыдущих комментариев я понимаю, что это не так), то PR - всегда хороший способ начать разговор: smiley:

@gkalpak разговор начался давным-давно. Такие люди, как @ocombe и я, создали сторонние хаки, чтобы обойти ограничения дизайна Angular, когда дело доходит до отложенной загрузки. Более года назад у нас была очень продолжительная дискуссия с командой Angular о том, как Angular планирует проложить этот коровий путь, о котором просило сообщество. Планировалось, что это будет частью компонентного маршрутизатора в версии 1.4. Потом скатился до 1.5. Теперь ленивая загрузка, похоже, даже не входит в набор функций. Поэтому, пожалуйста, поймите, что ваш комментарий об отправке запроса на включение для начала разговора кажется немного покровительственным.

@geddski , мне хорошо известны разговоры (и их результаты)

Мой комментарий, вероятно, звучал не так, как я хотел (я определенно не хотел показаться покровительственным). Это был скорее утвердительный ответ на комментарий @ocombe :

По крайней мере, некоторые методы внутри angular могут предоставить гораздо лучшее решение для отложенной загрузки компонентов, даже если оно официально не поддерживается.
@petebacondarwin , вы хотите, чтобы мы над этим поработали? Мы могли бы сделать пиар

Итак, я имел в виду PR о том, чтобы сделать ленивую загрузку намного проще (даже если она официально не поддерживается или не доступна в ядре). И я почти уверен, что и вы, и @ocombe лучше

В любом случае, я определенно имел это в виду не совсем в хорошем смысле.

tl; dr
Если вы думаете, что настройка некоторых вещей в ядре значительно упростит / разумнее для сторонних модулей обеспечить ленивую загрузку (или обеспечить _better_ ленивую загрузку) и у вас есть интерес к отправке PR, пожалуйста, сделайте: smiley:

@gkalpak понял, ошибка моя :)

@geddski , не беспокойтесь! Я мог / должен был быть более ясным: D

@petebacondarwin @ocombe @ Rab815 Я сделал сообщение в блоге, в котором подробно

https://medium.com/@brandon.roberts/using -the-component-router-in-angular-1-lazy-loading-a8258fcdb8cd # .4tofx9ga4

@brandonroberts Большое спасибо! Может быть, сообщение в блоге должно включать, как установить ngComponentRouter в Angular 1.5, (официально ли он поддерживается в Angular 1.x? Расчетное время выпуска?). Есть много устаревшей информации и путаницы с новым роутером, особенно для новичков вроде меня. Отличная работа, спасибо, ребята.

@hacknaked компонентный маршрутизатор еще официально не выпущен для Angular 1.x, но я думаю, что это довольно близко. Как только он будет выпущен, я уверен, что в блоге будет подробно описано, как его установить, и другие примеры его использования.

@brandonroberts есть ли примеры доступа к значениям параметров? Т.е. мой маршрут / user /: id, как я могу получить доступ к значению: id в компоненте (в частности, в контроллере)?

@nicl в настоящее время нет общедоступного способа доступа к параметрам в конструкторе. Что вам нужно сделать, так это использовать метод routerOnActivate и получить идентификатор из next.params.id

Здесь есть пример в репо Пита: https://github.com/petebacondarwin/ng1-component-router-demo/blob/master/app/heroes.js#L80 -L95

Если вы посмотрите на маршрут HeroDetail вы увидите, что он также имеет параметр :id .

@nicl также не имеет особого смысла обращаться к параметрам в конструкторе, поскольку компонент можно использовать повторно. Вот почему у нас есть разные хуки: $routerOnActivate и $routerOnReuse

@brandonroberts @petebacondarwin метод $routerOnActivate не работает со свойством templateUrl , только с template . Разве это не было исправлено в какой-то момент? Я помню, как читал где-то об этом.

@andreiho Здесь есть пиар: https://github.com/angular/angular/pull/6978 , просто он еще не был объединен.

@brandonroberts Да ладно, я видел это в какой-то момент, просто не мог вспомнить.

Надеюсь, @matsko объединит это сегодня.

@brandonroberts @petebacondarwin благодарит за помощь и пример проекта!
@andreiho Я столкнулся с этой проблемой, так что хорошо знать :)

@nicl только для записи, пока исправление для $routerOnActivate будет объединено, вы также можете получить доступ к параметрам, введя $router в свой контроллер и получив параметры из $router._currentInstruction.component.params .

@andreiho, который дает вам только корневой маршрутизатор. Я бы придерживался получения параметров через хук routerOnActivate

Похоже, что PR был наконец объединен, поэтому я пошел дальше и построил маршрутизатор, чтобы исправить проблему с хуками жизненного цикла, не работающими с templateUrl .

Суть: https://gist.github.com/andreiho/abc94a492c5986678385

$router был переименован в $rootRouter , поэтому не забудьте обновить все ссылки.

@petebacondarwin @brandonroberts есть ли в настоящее время способ получить доступ к параметрам внутри хука $canActivate ? Имеет ли это вообще смысл с точки зрения жизненного цикла?

Поскольку canActivate вызывается инжектором, инструкции передаются как "локальные", которые также могут быть введены ...

function $canActivate($nextInstruction, $prevInstruction) {
  var nextParams = $nextInstruction.params;
}

См. Https://github.com/petebacondarwin/ng1-component-router-demo/blob/master/app/crisis-center.js#L28

(Между прочим, я думаю, что нам следует переименовать этот крючок, чтобы он был $routerCanActvate встроен в другие хуки.)

@petebacondarwin Спасибо, не подумал об этом.

(И я согласен, что было бы неплохо переименовать крючок. На самом деле это то, что я пробовал изначально и не мог понять, почему он не работает, поэтому мне пришлось зайти в исходный файл и найти, как он был назван)

Предполагается, что $canActivate можно использовать как компонентную опцию? Потому что здесь никогда не срабатывают:

angular.module('myApp').component('app', {
        template: '<ng-outlet></ng-outlet>',
        $routeConfig: [
          { path: '/', component: 'home', name: 'Home' } // works fine
        ],
        $canActivate: function($nextInstruction, $prevInstruction) {
            console.log('I never fire. :-( ')
        },
        controller: function() {

        }
    })

ИЗМЕНИТЬ Моя ошибка, я полагаю, вы не можете поместить $canActivate в тот же компонент, который определяет ваш $routeConfig . Я переместил $canActivate в один из моих дочерних компонентов, и теперь он, по-видимому, работает.

Да, $canActivate настоящее время должен отображаться в компоненте, который _будет активирован_.
На данный момент все это обсуждается и может быть изменено: вполне вероятно, что мы сделаем так, чтобы родительский компонент / маршрутизатор отвечал за принятие решения о том, может ли дочерний маршрут активироваться.

Класс ng-link-active действительно работает? Если да, то как это работает?

@diegohaz да, это работает. Класс ng-link-active добавляется, когда текущий маршрут совпадает с маршрутом, указанным в ng-link.

Но пока не вышла версия роутера 0.2.0.

@brandonroberts @petebacondarwin Понятно . Спасибо. Кстати, где я могу опубликовать вопросы о ngComponentRouter для Angular 1.x? Я хочу знать, поддерживает ли он просмотры состояний / братьев и сестер.

@diegohaz, вы должны подать их здесь: https://github.com/angular/angular

На самом деле для Angular 1.x вы можете начать публиковать в https://github.com/angular/router
Я перезагружаю его как место ожидания для Angular 1 Component Router.
(По-прежнему незавершенный проект, но его стоит посетить к концу месяца)

поэтому с недавним изменением на файл gulp angular2 gulp buildRouter.dev больше не работает.
какой официально рекомендуемый способ прямо сейчас заставить компонентный маршрутизатор работать в angularjs 1?

@geroyche в настоящее время нет рекомендуемого способа, поскольку маршрутизатор, который у нас был, больше не совместим с последним маршрутизатором для Angular 2, а старый маршрутизатор имеет нерешенные ошибки, которые не будут устранены.
Мы планируем портировать последний маршрутизатор на Angular 1 летом, но есть технические препятствия, которые необходимо преодолеть, связанные с объединением, DI, Zones и Observables.

это немного разочаровывает, так как это было заявлено как передовой подход к использованию компонентного маршрутизатора в проектах angular1.5, чтобы упростить будущий переход на angular2 (мы уже перешли с «angular-new-router» на backport "angular1_router").
думаю, нам придется подождать и посмотреть.

Мне очень жаль, и я понимаю ваше разочарование. Мы прилагаем все усилия, чтобы исправить это для вас, но у нас ограниченные ресурсы, и их тянут во многих направлениях. Если в сообществе есть люди, которые хотят поучаствовать в разработке того, как портировать маршрутизатор (и библиотеку http), я хотел бы связаться с ними.

Также стоит отметить, что ui-router поддерживает как ng1, так и ng2, а также гибридные приложения ng1 / ng2.

правда. мы специально решили не добавлять еще одну зависимость, ui-router, исходя из того, что новый угловой маршрутизатор (на данный момент) исправит недостатки, которые в первую очередь привели к существованию ui-router.

но да, возможно, нам стоит пересмотреть.

npm install "@ angular / router": "^ 0.2.0" -D
импортировать маршрут из '@ angular / router / angular1 / angular_1_router';