Angular2 + Typcript1.5 Маршрутизация

Я пытаюсь запустить тестовое приложение, чтобы понять, как работает маршрутизация в AngularJS2. Я попытался следующий код:Angular2 + Typcript1.5 Маршрутизация

/// <reference path="reference.ts" /> 

import { Component, View, bootstrap } from 'angular2/angular2' 
import { Location, RouteConfig, RouterLink, Router, RouterOutlet } from 'angular2/router'; 
import { routerInjectables, Pipeline } from 'angular2/router'; 
import { Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2'; 

import { DrinksService} from 'services' 

import { Drinkers } from 'components/drinkers' 
import { Drinks } from 'components/drinks' 
import { Contact } from 'components/contact' 

@Component({ 
    selector: 'my-app' 
}) 

@View({ 
    directives: [RouterOutlet, RouterLink], 
    template: ` 
    <nav> 
     <ul> 
     <li><a router-link="drinks">Drinks</a></li> 
     <li><a router-link="drinkers">Drinkers</a></li> 
     <li><a router-link="contact">Contact</a></li> 
     </ul> 
    </nav> 
    <main> 
     <router-outlet></router-outlet> 
    </main> 
    ` 
}) 

@RouteConfig([ 
    { path: '/', component: Contact, as: 'contact'}, 
    { path: '/drinks', component: Drinks, as: 'drinks'}, 
    { path: '/drinkers', component: Drinkers, as: 'drinkers'} 
]) 

class MyAppComponent { 
    name:string 
    buttonName:string 
    showup:boolean 

    constructor(public router: Router) { 
     this.name = 'Alice and Bob' 
     this.buttonName = 'are going to see rabbit whole' 
     this.showup = true 
    } 

    goToDrink =() => { 
     alert('Sicher?') 
     this.showup = false 
    } 

    isVisible =() => { 
     return !this.showup 
    } 

    goToDrinkReally =() => { 
     this.router.parent.navigate('/home') 
    } 

} 

bootstrap(MyAppComponent, [routerInjectables])

index.html:

<!-- index.html --> 
<html> 
<head> 
    <title>Angular 2 Quickstart</title> 
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> 
    <script src="https://jspm.io/[email protected]"></script> 
    <script src="angular25minutes/angular25minutes.js"></script> 
</head> 
<body> 
<!-- The app component created in app.ts --> 
<my-app></my-app> 
<script>System.import('app')</script> 
</body> 
</html>

Все компилируется, но в браузере я получаю пустой экран. Как html я могу видеть только

<html><head> 
    <title>Angular 2 Quickstart</title> 
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script><style type="text/css"></style> 
    <script src="https://jspm.io/[email protected]"></script><script type="text/javascript" src="https://jspm.io/[email protected]" data-init="upgradeSystemLoader"></script> 
    <script src="angular25minutes/angular25minutes.js"></script> 
</head> 
<body> 
<!-- The app component created in app.ts --> 
<my-app></my-app> 
<script>System.import('app')</script> 

</body></html>

Что я делаю неправильно?

А иногда после компиляции в консоли появляется следующая проблема:

ОРИГИНАЛ ИСКЛЮЧЕНИЕ: Нет базы HREF набор. Либо укажите привязку к «appBaseHrefToken», либо добавьте базовый элемент.

, но это довольно случайный случай.

источник

2015-08-13 Łukasz Rzeszotarski

Смотрите https://github.com/angular/angular/pull/3122 –

Спасибо это работает Теперь. Кстати, этот маршрутизатор можно использовать и с угловым1, не так ли? –

Честно говоря, я не знаю:/ –

Несколько вопросов здесь:

Это не кажется, что вы загружаете файлы маршрутизатора. Их можно найти по адресу code.angularjs.org, среди других мест.

Для получения более полного представления о том, как использовать Угловой 2-роутер, проверьте Meteor-Angular2 Tutorial.

В настоящее время по умолчанию HTML5LocationStrategy, похоже, имеет много проблем, я бы предложил установить HashLocationStrategy в вашем приложении.

В файле приложения корневой, импортировать необходимые файлы:

import { 
    Component, 
    View, 
    bootstrap, 
    provide 
} from 'angular2/angular2' 
import { 
    LocationStrategy, 
    HashLocationStrategy 
    ROUTER_PROVIDERS, 
} from 'angular2/router';

Затем связываются с места, когда самонастройки:

bootstrap(MyAppComponent, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy).toClass(HashLocationStrategy) 
]);

Update

routerInjectables был изменен ROUTER_PROVIDERS
bind было изменено на provide

Источник:

[email protected]/CHANGELOG.md

источник

2015-08-14 06:52:05 shmck

Наконец-то мне удалось настроить его. Вы можете увидеть мой проект здесь https://github.com/lrzeszotarski/angular2-in-5minutes. Спасибо за ответ. –

Похоже, что метод предоставления услуг был изменен в бета-версии. Попробуй это.bootstrap (MyAppComponent, [ ROUTER_PROVIDERS, обеспечить (LocationStrategy, {useClass: HashLocationStrategy}) ]); –

ответ

Смежные вопросы