2

I'm new Angular2 and learning it using TypeScript. I understood that everything is component in Angular2 and we do not render whole HTML page but by just specific component. I have 2 basic queries here:-

1) In my sample, Angular 2 app, I have service component class which brings static data to my component class using Dependency Injection. Instead of static, I want to bring data from my database (MongoDB). Between service layer and database, I'm quite confused. May I know what are industry best approaches to integrate service layer and database layer in a regular Angular 2 app? Do we have tightly coupled architecture like normal JAVA J2EE MVC architecture from controller to service to dao to hibernate/JDBC/ibatis or do we integrate using web services (RESTful APIs'), loose-coupled fashion?

2) Secondly, how do we package this Angular 2 web app? Do we simply zip it or export as WAR file? Currently, I'm running it on my local system using my Node.js (npm start, etc on command prompt) and using Visual Studio Code for coding? How to create WAR file and does Tomcat App server supports Angular 2 apps?

Thank you

smnbbrv
  • 23,502
  • 9
  • 78
  • 109
Vinod Kumar
  • 665
  • 3
  • 13
  • 31
  • I think this would deserve 2 separate questions, for the sake of clarity and for future searchers. – Pac0 Jul 13 '17 at 14:44
  • about the second part (deployment), please see https://stackoverflow.com/questions/35539622/how-do-you-deploy-angular-2-apps – Pac0 Jul 13 '17 at 15:06

1 Answers1

1

I will address the first part of the question, about the services component.

Inherently, Angular is a Frontend framework, whereas a JAVA EE MVC or or ASP.NET MVC with Razor application typically handle both front and back ends.

In an Angular application, the idea is that the data service is the layer responsible to acquire and transmit data from and to your one-page application. The framework and your code do the job of rendering the web pages.

In the Angular tutorial, the first services just initialize static data. but of course, the goal is to obtain the data from wherever it is, this is your architectural choice.

For example, if you have a typical REST API to query to obtain your data, you can use http queries with something like that :

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class MyDataService {
    protected myApiEndPoint = "http://myapi"

    constructor(protected http: Http) { }

    fetchMyObject(id: number): Observable<MyClass> {
        return <Observable<MyObject>> this.http.get(`${this.myApiEndPoint}/id`)
            .map(response => {
                return <MyObject>response.json();;
            })
            ;
    }

you can then use your Observable by subscribing to it.

Of course, much more varations are possible, but this is the first to come in mind.

This assumes that you have a running Backend Server, don't forget Angular is just you front end application !

In a way this is, IMHO, good, because it forces you to uncouple your backend application logic and interface from the front.

Note also that nothing prevent you to use ASP.NET MVC framework to do the backend server and deliver your data in JSON format (instead of delivering full HTML rendered pages). I don't know about J2E MVC but I think it should be possible to serialize your data into JSON as well, instead of rendering them into a full served page.

Pac0
  • 21,465
  • 8
  • 65
  • 74