나는 가능한 한 일부 프로그래밍 문장이 사용하는 프레임워크 싸움 서사에 참여하지 않을 것이다.하지만 나는 AngularJS(일명 Angular1)에 대해 줄곧 까다롭다는 것을 인정한다.문법과 구조는 나에게 있어서 항상 서투르게 보이고, 잘못된 소식은 처리하는 것이 결코 재미있지 않다!React가 유행함에 따라 나도 점점 유행하는 구성 요소 기반 구조를 더욱 좋아한다.Angular 2에 있는 rocky가 뒤로 호환되지 않아서 나는 어쩔 줄 몰랐다. 나는 더 이상 Angular에 관심을 가지지 않았다.
최근에 저는 Angular5에 대한 토론을 더 많이 들었습니다. 저는 제 체험을 Vue를 사용한 체험과 비교하고 반응을 하려고 합니다. 왜냐하면 저는 이런 체험을 자주 사용하기 때문입니다.

입문

나는 Angular 사이트의 강좌를 시작했는데, 그것은 매우 간단해 보였고, 개념적으로 다른 프레임워크와 유사했다.TypeScript는 Angular의 가장 큰 차이점일 수 있습니다. 저는 그것을 정말 좋아합니다!내가 그들의 예시를 읽은 후에, 나는 프로젝트를 만드는 것이 매우 편안하다고 느꼈다. 특히 프로젝트가 너무 커서!나는 몇 시간이 걸려서야 다 보았다.
슈퍼히어로 테마는 매우 귀엽다. 나는 루트, API 요청, CLI와 서비스를 포함하는 방식을 좋아한다.그것의 틀에 대한 소개는 매우 투철하다!

최종 항목

나는 Go에서 인코딩 자원을 표시하는 API를 구축했기 때문에 이번 주에 그 응용 프로그램을 위해 전단을 구축하고 싶다!이 점에서 나는 거의 완전히'마이크로 서비스'스타일의 응용 프로그램에서 일한다. 나는 전단과 후단을 각각 구축하고 싶다.이 프로그램도 예외가 아니다. 이번 주 프로젝트는 완전히 정적이며, GitHub 페이지에 위탁되어 있다.
자원을 인코딩하는 구성 요소, 자원을 위한 TypeScript 모드에서 시작하여 API에 연결하는 서비스입니다.나는 시종 이런 구조를 유지한다.그것은 매우 간단한 응용 프로그램이기 때문에, 나는 현재 하위 구성 요소나 유사한 것이 필요하지 않다고 생각한다.
서비스는 다음과 같습니다.

@Injectable()
export class ResourcesService {
  private resourcesUrl = 'https://helpful-coding-resources.herokuapp.com/resources';

  constructor (
    private http: HttpClient,
  ) {}

  getResources (): Observable<Resource[]>{
    return this.http.get<Resource[]>(this.resourcesUrl)
               .pipe(
                  tap(resources => console.log('done! 😀'));
               )
  }

나는 확실히 Angular가 당신이 좋아하는 서비스를 사용하는 것이 아니라 자신의 AJAX 서비스를 가지고 있다는 것을 발견했다. 이것은 매우 재미있다.나는 보통 Axios를 사용하는데, 그것을 사용하는 것도 좋지만, 그것이 라이브러리에 포함되어 있어서 매우 기쁘다.
방주: 저는 자바스크립트에서 번호를 사용하는 것에 익숙하지 않지만 이 프로젝트에서 번호를 사용했습니다. 주로 VSCode가 TypeScript 파일에 자동으로 번호를 삽입했기 때문에 설정을 변경하기 싫습니다!
그리고 나서 나는 구성 요소 자체를 연구했는데 결과는 다음과 같다.

export class ResourcesComponent implements OnInit {
  resources: Resource[];
  initialResources: Resource[];
  showSearch: boolean;

  constructor(private resourceService: ResourcesService) { }

  ngOnInit() {
    this.getResources();
  }

  getResources(): void {
    this.resourceService.getResources()
        .subscribe(resources => {
          this.resources = resources;
          this.initialResources = resources;
        });
  }

  toggleSearch(): void {
    this.showSearch = !this.showSearch;
  }

  search(val): void {
    this.resources = this.initialResources.filter(resource => {
      return resource.Tags.some(tag => {
        return tag.toLowerCase().startsWith(val.toLowerCase());
      });
    });
  }
}

나는 템플릿 언어도 좋아한다. 그것은 Vue와 매우 유사하다고 느낀다.흥미로운 것은 Angular에서 HTML과 JS 코드의 관심사는 여전히 분리되어 있다는 것이다. 특히 React 구조에 비하면.

<div *ngIf="resources">
  <div class="search-div">
    <i
      class="material-icons"
      (click)="toggleSearch()"
    >
      search
    </i>
    <input
      #searchInput
      [ngClass]="{'shown': showSearch}"
      class="search-box"
      (keyup)="search(searchInput.value)"
      type="text"
      placeholder="Filter Resources"
    />
  </div>
  <div class="list">
    <div class="resource" *ngFor="let resource of resources">
        <a href="{{ resource.Link }}"><h3>{{ resource.Name }} <span class="author">{{ resource.Author }}</span></h3></a>
        <p>{{ resource.Description }}</p>
    </div>
  </div>
</div>
<div *ngIf="!resources">
  <div class="loader"></div>
</div>

나는 현재 표시된 자원을 포함하는 두 개의 수조가 있고, 다른 하나는 API에서 얻은 자원을 포함한다.이것은 나로 하여금 표기에 기초한 필터를 쉽게 실현할 수 있게 한다.검색란이 사용되지 않을 때 숨기는 전환이 하나 더 있습니다.마지막으로, 자원에 첨부된 태그를 필터링할 수 있는 검색 방법이 있습니다.

모든 아이템 표시

검색된 글

나는 애니메이션도 쉽게 추가했다.Angular에서 직접 구현하는 문서가 있지만 CSS에서 구현하는 것을 선택하겠습니다.나는 이 점에 더욱 익숙해졌고, 그것도 최적화되었다.

배치

Angular 5 응용 프로그램을 GitHub 페이지에 배치하는 npm 패키지를 발견했습니다. 모든 정적 트랜잭션에 사용합니다.그것은 상대적으로 간단해서 나는 페이지를 배치하기 쉽다.

다음 단계

AngularJS 이래로 나는 모서리 생태계가 장족한 발전을 이루었다는 것을 보고 매우 기뻤다.나는 구성 요소 구조를 좋아한다. 문법이 개선된 것 같다.나는 모든 것이 잘 통합되고 CLI도 매우 좋다고 생각한다.
즉, 나는 개인적으로 Angular 5를 필요로 하거나 사용하지 않는다고 생각하지 않는다.이 패키지는 매우 방대하다. 나에게 있어서 문제적으로 지원을 찾는 것이 React나 Vue에서 지원을 찾는 것보다 훨씬 어렵다. (버전 제어가 빠르기 때문일 수도 있다.)정적 유형을 원한다면 React에서flow를 사용하거나 Vue에서 TypeScript를 통합할 수 있습니다.저는 Angular가 안정성을 중시하는 기업 응용 프로그램의 go-to 프레임워크가 되도록 노력하고 있다고 생각합니다.구글의 이름이 뒤에 있는 것은 매우 중요한데, 그것이 포괄하는 대역명도 도움이 될 수 있다.나는 여전히 React와 Vue 코드의 구조를 더 좋아한다. 나는 그것들이 제공하는 더 큰 유연성을 더 좋아한다.
간단히 말하면, 나는 Angular 5를 사용하는 것을 좋아한다. 만약 누군가가 나에게 그것을 사용하라고 요구한다면, 나는 조금도 주저하지 않고 다른 응용 프로그램을 만들 것이다. 그러나 다른 프레임워크에 비해 나는 그것을 스스로 사용하지 않을 것이다.Vue는 매우 배우기 쉽고 생태계가 매우 일치하며 React의 체계 구조는 이미 업계로 바뀌었다.나는 결코 Angular 5를 싫어하지 않는다. 나는 단지 그것에 대해 다른 도구처럼 그렇게 흥미를 느끼지 않을 뿐이다.
Full Code
App
myOn Learning New Things 시리즈의 일부