AngularJS 4 개발 관련 자료

Using Bootstrap with Angular

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a

Angular 4.3 HttpClient (Accessing REST Web Services With Angular)

https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

Angular 4 Event Binding

https://coursetro.com/posts/code/59/Angular-4-Event-Binding

Event Binding in Action

In our component template, let's create a button with a click event binding:

<button (click)="myEvent($event)">My Button</button>

Notice $event?  It's optional, and it will pass along a variety of event properties associated with that particular event.

In the component class, let's create the myEvent() method:

export class AppComponent {
  
  myEvent(event) {
    console.log(event);
  }

}

If you run ng serve in the console of the project, visit localhost:4200 in the browser, and click the button, you'll see a large object with a variety of properties that we can use in our method. In Chrome, just hit CTRL-SHIFT-I to see the console and the resulting console.

Try changing the (click) event to a different event from the list above or the Event reference page from Mozilla.org. You will find that you now have a large variety of user-initiated events from which you can make your Angular app responsive.

[ Angular 4 ] 데이터 양방향 바인딩 팁 [(ngModel)]="변수명"

http://blog.naver.com/PostView.nhn?blogId=wolfre&logNo=221024350851&categoryNo=36&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView

HttpClient POST request using x-www-form-urlencoded

https://stackoverflow.com/questions/46714480/httpclient-post-request-using-x-www-form-urlencoded

You're posting JSON data to the API instead of form data. The snippet below should work.

login(username, password): Observable<any> {
  const body = new HttpParams()
    .set('username', username)
    .set('password', password);

  return this.http.post('/login',
    body.toString(),
    {
      headers: new HttpHeaders()
        .set('Content-Type', 'application/x-www-form-urlencoded')
    }
  );
}

Spring Boot + WebSockets + Angular 5

https://medium.com/oril/spring-boot-websockets-angular-5-f2f4b1c14cee

Inside the project we have to install tree libraries with commands:

1. npm install stompjs;
2. npm install sockjs-client
3. npm install jquery (just to quickly access the DOM elements)

Here the code from app.component.ts

import { Component } from '@angular/core';
import Stomp from 'stompjs';
import SockJS from 'sockjs-client';
import $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private serverUrl = 'http://localhost:8080/socket'
  private title = 'WebSockets chat';
  private stompClient;

  constructor(){
    this.initializeWebSocketConnection();
  }

  initializeWebSocketConnection(){
    let ws = new SockJS(this.serverUrl);
    this.stompClient = Stomp.over(ws);
    let that = this;
    this.stompClient.connect({}, function(frame) {
      that.stompClient.subscribe("/chat", (message) => {
        if(message.body) {
          $(".chat").append("<div class='message'>"+message.body+"</div>")
          console.log(message.body);
        }
      });
    });
  }

  sendMessage(message){
    this.stompClient.send("/app/send/message" , {}, message);
    $('#input').val('');
  }

}