CODEWITHSUNDEEP
angularangular2-templateangular2-directives
Azngeek
Azngeek

Reputation: 2503

How to structure a more complex Angular 2 application?

I am currently doing some research about Angular 2 and it seems like a lot of stuff changes so i wanted to rebuild a very common use case for my projects which looks something like this in Angular 1 to get the basics. But i stumbled upon some general questions about how to structure an Angular 2 application.

Let me give you an example how i solve this in Angular 1 right now.

Now for the Angular 2 structure. 

<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>

So the problem is the following:

It seems like that everything must be in the root of the application. I am more used to the Angular 1 style, where i used to use the directives to html tree. Now in Angular 2 i used the application component as a container to initialize my application.

  1. So how could i structure my components to achive a similar result in Angular 2?
  2. Might it be better to build two independent applications instead? One for the autocomplete and one for the main application, even if they share the same resources (currently via a service)
    1. I think that i do not need the template in the app.component.ts but if i remove it i will get this error: angular2.dev.js:23730 ORIGINAL EXCEPTION: Component 'AppComponent' must have either 'template' or 'templateUrl' set. Like said before, i just want to extend the DOM and initialize the directives in one place.

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() {

    }
}

Upvotes: 1

Views: 1478

Answers (1)

intuix
intuix

Reputation: 268

Micronyks is right : Components annotations (@Component) need a template or templateUrl attribute whereas Directices annotations dont - so consider using directives if you don't need html to replace.

About the structure, if you take a look at TourOfHeroes Google tutorial (https://angular.io/docs/ts/latest/tutorial/) you will find out that you need :

  • index.html with JS scripts included and xx-app tag
  • main.ts file including bootstrap App component
  • app.component.ts with template containing many xxx-xxx tags

And for your folder structure you can have a folder for your components, services, templates,..

Upvotes: 1

Related Questions