Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Angular generator #40

Open
mysiar opened this issue Sep 28, 2017 · 15 comments · May be fixed by #386
Open

Add Angular generator #40

mysiar opened this issue Sep 28, 2017 · 15 comments · May be fixed by #386

Comments

@mysiar
Copy link
Member

mysiar commented Sep 28, 2017

Add Angular generator to API-Platform client-generator.
With React, Vue.js and shortly coming React Native this could be the most comprehensive front app support for API-Platform

@dunglas
Copy link
Member

dunglas commented Sep 28, 2017

There is an existing community project: https://github.com/momenttech/lysis, see momenttech/lysis#1.

(ping @momenttech)

@sbacem
Copy link

sbacem commented Oct 13, 2017

Any news for this ?

@mysiar
Copy link
Member Author

mysiar commented Oct 13, 2017

@sbacem you are more than welcome to develop this if you are interested

@sbacem
Copy link

sbacem commented Oct 17, 2017

I am very interested, but i haven't time to do it 😞 😞

@dunglas
Copy link
Member

dunglas commented Oct 18, 2017

You can try https://github.com/momenttech/lysis

@luca-nardelli
Copy link
Contributor

Hi all, I'm writing under this issue because I also was looking for an Angular generator.

I've just tried lysis on a project of mine but I got some errors:

Starting API 'http://localhost/api/docs.jsonld'...
Error for API 'http://localhost/api/docs.jsonld'
The class http://www.w3.org/ns/hydra/core#ApiDocumentation doesn't exist.

Did anyone manage to make it work recently?

In any case, I've started to work on a generator for Angular.
Is there a minimum set of features that should be present in the generator in order to merge that?

At the moment, I'm generating the following for each resource:

  • Interface class (the same as the typescript generator)
  • Service class: this handles getCollection,addItem,getItem,putItem,deleteItem operations

plus an utils file that handles some common stuff.

I also wanted to handle subresources, but it seems quite complicated to do with the current data that's parsed from the Hydra documentation. Does anyone from the maintainers know of an easy way to handle subresources?

Anyway, this is an example of generated files from a project of mine with the current generator:

Resource Interface:

import { Company } from "./company";

export interface Client {
  '@id'?: string;
  id: string;
  name?: string;
  legalName?: string;
  legalAddressCity?: string;
  legalAddressStreet?: string;
  legalAddressStreetNumber?: string;
  legalAddressZipcode?: string;
  phone?: string;
  email?: string;
  vatNumber?: string;
  taxNumber?: string;
  readonly updatedAt?: Date;
  readonly createdAt?: Date;
  readonly agency?: Company;
  readonly locationsCount?: number;
}

Resource service:

import { Client } from "../interfaces/client";
import { HttpClient } from "@angular/common/http";
import { APIPlatformPagedCollection } from "../utils/utils";
import { Inject, Injectable} from '@angular/core';

@Injectable()
export class ClientService {

  constructor(
    private http: HttpClient,
    @Inject('BASE_API_URL') private baseUrl: string
  ) {
  }

  getCollection(){
    return this.http.get<Client>(`${this.baseUrl}/api/clients`);
  }

  addItem(item: Client){
    return this.http.post<Client>(`${this.baseUrl}/api/clients`, item);
  }

  getItem(id: string){
    return this.http.get<Client>(`${this.baseUrl}/api/clients/${id}`);
  }

  updateItem(item: Client){
    return this.http.put<Client>(`${this.baseUrl}/api/clients/${item.id}`, item);
  }

  deleteItem(id: string){
    return this.http.delete<{}>(`${this.baseUrl}/api/clients/${id}`);
  }
}

Utils file:

export interface APIPlatformPagedCollection<T> {
  "hydra:totalItems"?: number;
  "hydra:member"?: T[];
  "@context"?: string;
  "@id"?: string;
  "@type"?: string;
  "hydra:view"?: {
    "@id"?: string;
    "@type"?: string;
    "hydra:first"?: string;
    "hydra:last"?: string;
    "hydra:previous"?: string;
    "hydra:next"?: string;
  };
}

export interface APIPlatformCollection<T> {
  "hydra:totalItems"?: number;
  "hydra:member"?: T[];
  "@context"?: string;
  "@id"?: string;
  "@type"?: string;
}

@simocheccoli
Copy link

Hi @dunglas, is there the possibility that this angular generator will be developed by core members?

@dunglas
Copy link
Member

dunglas commented Apr 20, 2021

@simocheccoli I'm not aware of any core member working on this (nor using Angular actually), but we'll be glad to merge a generator if the community contributes one!

@simocheccoli
Copy link

@dunglas we can try it! maybe with @luca-nardelli helps

@simocheccoli
Copy link

simocheccoli commented May 7, 2021

@dunglas we are creating a dummy angular generator with @luca-nardelli 😄
We also want generate a simple material design template angular generator, maybe next week we can sumbit a pr

@krstns
Copy link

krstns commented Apr 7, 2022

Hello. Are there any updates on this?

@dunglas
Copy link
Member

dunglas commented Apr 8, 2022

No, but a contribution is still very welcome.

@simocheccoli
Copy link

@dunglas @krstns we are still working about it

@jalexmelendez
Copy link

@simocheccoli any updates? I'd like to contribute to the project if needed.

@metaclass-nl
Copy link

A good starting point for making a generator is an example client app that works with Api Platform. One then builds a generator that generates the same app code. I followed this proces with my tutorial and the accompanying extended generators for react and next.js.

I even added working Angular app examples:

But my extended generators did get little stars so i did not bother to make one for Angular. However, if someone would like to sponsor me i would be happy to develop a generator similar the the react or next.js generator.

BTW, Angular also supports PWA, similar to next.js but i did not look into that.

@dunglas dunglas linked a pull request Jun 5, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants