В настоящее время я занимаюсь некоторыми исследованиями в области Angular 2, и мне кажется, что это очень много изменений, поэтому я хотел перестроить очень распространенный вариант использования для моих проектов, который выглядит примерно так в Angular 1, чтобы получить основы. Но я наткнулся на некоторые общие вопросы о том, как структурировать приложение Angular 2.Как структурировать более сложное приложение Angular 2?
Позвольте мне привести пример, как я решаю это в Angular 1 прямо сейчас.
- В основном это не одно приложение страница
- Я просто использовать директивы для расширения DOM
не нужна маршрутизация
<html ng-app=my-app> <head></head> <body> <my-autocomplete></my-autocomplete> <!-- Some server side code --> <my-navigation-menu></my-navigation-menu> <!-- Some server side code --> <my-main-app> <my-filter facet="one" /> <my-filter facet="two" /> <my-filter facet="three" /> </my-main-app> </body> </html>
Теперь Угловая 2 состав.
<head>
<base href="/elasticsearch_frontend/">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
myapp: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('myapp/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-autocomplete></my-autocomplete>
<!-- Some server side code -->
<my-main-app></my-app>
Таким образом, проблема заключается в следующем:
Похоже, что все должно быть в корневом каталоге приложения. Я больше привык к стилю Angular 1, где я использовал директивы для дерева html. Теперь в Angular 2 я использовал компонент приложения в качестве контейнера для инициализации моего приложения.
- Так как же я могу структурировать свои компоненты для достижения аналогичного результата в Angular 2?
- Возможно, лучше построить два независимых приложения? Один для автозаполнения и один для основного приложения, даже если они используют одни и те же ресурсы (в настоящее время через службу).
- Я думаю, что мне не нужен шаблон в app.component .ts, но если я удалю его, я получу эту ошибку: angular2.dev.js: 23730 ORIGINAL EXCEPTION: Компонент «AppComponent» должен иметь либо «шаблон», либо «templateUrl». Как и раньше, я просто хочу расширить DOM и инициализировать директивы в одном месте.
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
app.ts
import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {SearchService} from './search.service';
import {CatalogComponent} from './catalog.component';
import {AutocompleteComponent} from './autocomplete.component';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
`,
directives: [AutocompleteComponent],
providers: [
SearchService
]
})
export class AppComponent implements OnInit {
public title = 'Elasticsearch Products Prototype';
public queryParams : String[] = [];
ngOnInit() {
}
}
Если вы просто хотите расширить DOM, вы можете использовать Директивы Anguar2, которые не имеют «Template» или «TemplateUrl», означают просмотр. – micronyks