Search code examples
cssangularstructurecomponentssharing

Angular 2 Module / Application Structure

I'm just evaluating how to use Angular 2 for some web applications that sharing some services and components. As far as I understand I can create component libraries to share components. Each component may have it's own css which only effects the component. What is the best approach to share services?

I'm currently using Angular 1 and the bootstrap components. One requirement is, that our application should offer the possibility to create custom skins for it. The application on itself should work in every website by adding a java script snippet. This is a big different to other SPA that are just made to run in one specific website. Currently we offer a bootstrap less variables file which can be customized an uploaded to create via less a new skin. The advantage of this is, that nearly every web designer knows how bootstrap works. But this also means that the css is defined global and not inside the components. What is the best approach to offer people customize css in angular 2 in a very easy way?

In our case it might be needed that two applications interact with each other. In example imagine you have a hotel booking application and a flight booking application. After a user books a flight you may like to offer also the hotel booking application within the same page. Both applications may share the components like a date range selection form or a result page.Is it correct to talk about different applications or would I only create two modules (hotel + flight)? What about lazy load to load only that part that is needed for the current application to reduce the initial loading time on bigger projects?

Any ideas what would be the best structure for that kind of projects?

Solution

  • The way I can picture it is .

    Application with two main routes

    /Flights
|--Holds other routes for the Flights part of the application
|i.e. 
/Flights/flights
/Flights/seating
/Flights/payment

/Hotels
|--Holds other routes for the Hotels part of the application
|i.e. 
/Hotels/booking
/Hotels/payment

    So it'll be one application with two main routes that nest routes for their specific needs.