1
私は現在Angular 2についていくつかの調査をしています。多くのものが変更されているようですので、Angular 1のように見えるプロジェクトの非常に一般的な使用例を再構築したいと考えています。しかし、私は角度2アプリケーションをどのように構築するかについての一般的な質問に遭遇しました。より複雑なAngular 2アプリケーションを構成する方法は？
ここで私はAngular 1でこれをどのように解決するのかを例を挙げて説明しましょう。
- 基本的には、私はちょうど私が角2用今ルーティング
<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>
を必要としないDOM
を拡張するためのディレクティブを使用して、単一ページのアプリケーション
<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では、アプリケーションコンポーネントをコンテナとして使用してアプリケーションを初期化しました。
- したがって、コンポーネントを構造化して、角度2で同様の結果を得ることができますか？
- 代わりに2つの独立したアプリケーションを構築する方がよいでしょうか？同じリソース（現在はサービス経由）を共有していても、オートコンプリート用とメインアプリケーション用の2種類です。
- app.componentにテンプレートは必要ありません.tsしかし、私はそれを削除する場合、私はこのエラーが発生します：angular2.dev.js：23730元の例外：コンポーネント 'AppComponent'は、 'テンプレート'または 'templateUrl'のいずれかを設定する必要があります。前と同じように、私はDOMを拡張し、ディレクティブを1か所で初期化したいだけです。
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() {
}
}
のTSあなただけのDOMを拡張したい場合は、あなたが使用することができます'Template'または' TemplateUrl'を持たないAnguar2ディレクティブは、ビューを意味します。 – micronyks