如何构建更复杂的 Angular 2 应用程序？答案

【问题标题】：How to structure a more complex Angular 2 application?如何构建更复杂的 Angular 2 应用程序？
【发布时间】：2016-07-12 01:02:01
【问题描述】：

我目前正在做一些关于 Angular 2 的研究，似乎有很多东西发生了变化，所以我想为我的项目重建一个非常常见的用例，它在 Angular 1 中看起来像这样，以获得基础知识。但我偶然发现了一些关于如何构建 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>

现在是 Angular 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 中获得类似的结果？
构建两个独立的应用程序会更好吗？一个用于自动完成，一个用于主应用程序，即使它们共享相同的资源（当前通过服务）
1. 我认为我不需要 app.component.ts 中的模板，但如果我删除它，我会收到此错误：angular2.dev.js:23730 原始异常：组件“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，你可以使用没有Template或TemplateUrl表示视图的Anguar2指令。

标签： angular angular2-template angular2-directives

【解决方案1】：

Micronyks 是对的：组件注释 (@Component) 需要模板或 templateUrl 属性，而 Directices 注释不需要 - 所以如果您不需要替换 html，请考虑使用指令。

关于结构，如果你看看 TourOfHeroes Google 教程 (https://angular.io/docs/ts/latest/tutorial/) 你会发现你需要：

index.html 包含 JS 脚本和 xx-app 标签
main.ts 文件，包括引导 App 组件
app.component.ts 模板包含许多 xxx-xxx 标签

对于您的文件夹结构，您可以为您的组件、服务、模板创建一个文件夹......

【讨论】：

这是我读到的，但本教程假设您有 app.component.ts，您必须在其中注册指令。那么如果不使用组件，那么哪个是注册指令的替代位置呢？
认为目前最好遵循您可以找到的任何教程提供的结构，因为 Angular2 还没有准备好用于生产用途..