1

Estoy estudiando Angular 2/4 para poder usar pronto ese framework, pero estoy muy confundido con la parte de POST.

Estoy usando el API de Github para postear un "issue" en mi repositorio pero sigo sin lograrlo... por lo que estaría muy agradecido si me pueden aclarar ese punto para poder mandar un "issue" tipo prueba para poder entender cómo funciona en Angular 2/4, ya que entiendo que se tiene que mandar en formato "JSON" para que funcione pero no entiendo cómo... ando usando el api del github: https://developer.github.com/v3/issues/#create-an-issue

Aquí mi código:

github.service.ts

import { Injectable } from '@angular/core';
import {Http, Headers, Response} from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class GithubService {

  private username: string;
  private reponame: string;
  private client_id = '+++++++++++++++++++++++';
  private client_secret = '++++++++++++++++++++++++++++';

  constructor(private http: Http) {
    console.log('Github Service Ready...');
    this.username = 'anubis';
  }

  getGithubUser() {
    return this.http.get('http://api.github.com/users/' + this.username
      + '?client_id=' + this.client_id
      + '&client_secret=' + this.client_secret )
      .map( res => res.json());
  }

  getGithubRepository() {
    return this.http.get('http://api.github.com/users/' + this.username
      + '/repos'
      + '?client_id=' + this.client_id
      + '&client_secret=' + this.client_secret )
      .map( res => res.json());
  }

  // to search another user and show his/her repositories
  SearchAgain(usernamenew: string) {
    this.username = usernamenew;
  }

tengo problemas en esa parte...

  addIssue(forms) {
    this.reponame = 'LinioAngularProfileListMarcoAntonioVMontoyaCardenas';
    const headers = new Headers({'Content-Type': 'application/json'});

    return this.http.post('http://api.github.com/repos/ ' + this.username + ' / '
        + this.reponame + ' /issues?' + forms
      + '?client_id=' + this.client_id
      + '&client_secret=' + this.client_secret,
      {headers: headers}).map(res => res.json());
  }

}

issue.component.ts

import { Component, OnInit } from '@angular/core';
import { GithubService } from '../../Services/github.service';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
  selector: 'app-issue',
  templateUrl: './issue.component.html'
})
export class IssueComponent implements OnInit {

  user: any;
  repo: any[];
  username: string;

  constructor(private service: GithubService,
              private route: ActivatedRoute,
              private router: Router) { }

  ngOnInit() {
    this.user = false;

    this.route.params
      .subscribe(
        (params: Params) => {
          // this.id = +params['id'];
          // this.editMode = params['id'] != null;
          // this.initForm();
        }
      );
  }

  OnSearchUser() {
    // get user information
    this.service.getGithubUser().subscribe(userGit => {
      console.log(userGit);
      this.user = userGit;
    });

    // get user repositories
    this.service.getGithubRepository().subscribe(userRepo => {
      console.log(userRepo);
      this.repo = userRepo;
    });

    this.service.SearchAgain(this.username);
  }

  addIssue( title: string,
            body: string,
            assignee: string,
            milestone: number,
            labels: string) {

    var newIssueAdd = {
      // title: title,
      // body: body,
      // assignee: assignee,
      // milestone: milestone,
      // labels: labels
      title: 'test1',
      body: 'ksjdlkafjslkdf',
      assignee: 'sdljflksjadflñdks',
      milestone: 1,
      labels: 'testlbl'
    };

    console.log(newIssueAdd);

    this.service.addIssue(newIssueAdd).subscribe(
        (response) => console.log(response),
        (error) => console.log(error)
      );

    // this.service.addIssue(newIssueAdd);

  }
}

issue.component.html solamente estoy usando un boton para mandarlo para pruebas ya que luego voy a crear un formulario pero necesito que funcione el "POST"

<div class="row">
  <div class="col-md-12">
    <form class="well-lg">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search Username..."
               [(ngModel)]="username" name="username" (keyup)="OnSearchUser()">
      </div>
    </form>
  </div>
</div>

<div *ngIf="user">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">{{user.name}}</h3>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-4">
          <img src="{{user.avatar_url}}" alt="" class="img-thumbnail">
          <a href="{{user.html_url}}" target="_blank" class="btn btn-default btn-block">View Profile</a>
        </div>
        <div class="col-md-8">
          <div class="stats">
            <span class="label label-default">{{user.public_repos}} Public Repositories</span>
            <span class="label label-primary">{{user.public_gists}} Public Github Gists</span>
            <span class="label label-success">{{user.followers}} Followers</span>
            <span class="label label-info">{{user.following}} Following</span>
          </div>
          <br>
          <ul class="list-group">
            <li class="list-group item"><strong>Username: </strong>{{user.login}}</li>
            <li class="list-group item"><strong>Location: </strong>{{user.location}}</li>
            <li class="list-group item"><strong>Email: </strong>{{user.email}}</li>
            <li class="list-group item"><strong>Blog: </strong>{{user.blog}}</li>
            <li class="list-group item"><strong>Member Since: </strong>{{user.created_at}}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">User Repositories</h3>
      </div>
      <div class="panel-body">
        <div *ngFor="let re of repo">
          <div class="row">
            <div class="col-md-9">
              <h4><a target="_blank" href="{{re.html_url}}">{{re.name}}</a></h4>
              <button class="btn btn-primary" (click)="addIssue()">Create Issue</button>
              <p>{{re.description}}</p>
            </div>
            <div class="col-md-3">
              <span class="label label-default">{{re.watchers}} Watchers</span>
              <span class="label label-default">{{re.forks}} Forks</span>
            </div>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
</div>
2

1 respuesta 1

1

Para empezar la URL esta mal formada. Como lo dice la documentación de la API, debe tener la siguiente estructura:

/repos/:owner/:repo/issues
/repos/anubis/LinioAngularProfileListMarcoAntonioVMontoyaCardenas/issues

Cuando la petición es POST, no van parámetros por query string, es necesario mandarlos como BODY.

Para la versión de Angular < 4.3 sería:

this.http.post(url, 
{
  "title": "Found a bug",
  "body": "I'm having a problem with this.",
  "assignees": [
    "octocat"
  ],
  "milestone": 1,
  "labels": [
    "bug"
  ]
})

Donde URL es la que definimos anteriormente.

Dependiendo de la versión de angular que instales es como se arma la petición. Desde la versión 4.3 de Angular, se agregó HttpClient.

https://angular.io/guide/http

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.