チャンピオンの比較Angular vs Vue

オリウィア・オレメク

現在、いくつかのフロントエンド・フレームワークが一般的に使用され、そのクリエイターたちによって常に開発されている。しかし、それらには共通点があるかもしれない。ここでは、GoogleのAngularとオープンソースのVue.jsを開発プロセスに基づいて比較します：

プロジェクトの設定

をキックオフする最速の方法である。プロジェクトを使用することである。 フレームワークの作者が提供するCLI.両者ともかなり良いサービスを提供しているが、いくつかの違いがある、 Vue より多くのオプションが用意されているため、最初からお客様のニーズに合わせてプロジェクトを調整することができます。あなたは Vueバージョンルーティングを使用する必要があるかどうか。Typescript、CSSプリプロセッサ、またはリンターのセットアップが必要かどうか。また、テスト（ユニットまたはE2E）を設定するかどうかも決定できます。

Angular コンポーネント、サービス、インターフェイス、ディレクティブをコンソールから直接作成できるジェネレーターが付属しています。コード特にMVCパターンなどを使用する場合は。Typescriptには Angular そして、それを使うようにあなたにプレッシャーをかける。まだやったことがない人は、なぜ試すべきなのか、便利な紹介があるのでチェックしてみてほしい。これ.

スタート地点で AngularのCLI は、ルーティングまたは優先するCSSプリプロセッサについてのみ尋ねます。 VueCLIは、あなたのアプリケーションの構造やスタイルを決める余地をあまり与えてくれません。しかし、CLIが要求する規約に従うのであれば、CLIはあなたを導いてくれるだろう。

プロジェクト体制

Vue SFC（Single File Components）を使用しているため、新しい開発者がフレームワークを使い始め、コードに足を踏み入れるのは非常に簡単だ。

指令

Vue また、`v-if, v-for`といったディレクティブも用意されており、`v-if, v-for`のほぼコピーであるため、非常に直感的に使うことができる。 Angular のものだ。 Vue は双方向のデータバインディングのために同じ規約を使い（プレフィックスに`v-model`のv-をつけるだけ）、何かに反応していることを示す@/v-onをつける。 Angular イベント・バインディングの場合は括弧を、プロパティ・バインディングの場合は角括弧を使う。

で Vue構造そのものはシンプルで、スタイルシートやロジック用に別々のファイルを作る必要がないため、すべてが整理され、親しみやすいものとなっている。もちろん、 Vue スタイルガイドには、プロジェクト作成時に従うべき推奨ルールが記載されている。

イベント

この場合だ、 Vue つまり、子コンポーネントからその親コンポーネントへイベントを発信するために必要なのは、(次のように使って) Vue 3 コンポジション API )は、セットアップでコンテキスト・オブジェクトからメソッドを受け取り、単にその時点で必要なものを何でも出す：

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); }.}

また、他のイベントへの応答として、テンプレート内で直接行うこともできる。

で Angularこの場合、まずEventEmitterを以下のように定義する必要がある：

CustomNameForYourEmitter = new EventEmitter()；

次に、EventEmitterのemitメソッドを呼び出す必要があります：

this.customNameForYourEmitter.emit(this.theDataYouWantToPass)；

スロット／コンテンツ・プロジェクション

どちらのフレームワークでも、若干の違いはありますが、子タグの中にhtmlを追加するだけで、親コンポーネントから子コンポーネントへ簡単にコンテンツ（単数でも複数でも）を移動させることができます：

Vue：

`。

Angular：

デフォルト：
    。

名前付きスロット：
    とする。

<p yourname>
   これはネームド・スロットである。
  </p>
  <p>これはデフォルトのスロットである。</p>

しかし、アプリケーションの一部を条件付きでレンダリングしたい場合は、次のようにする、 Vue よりも直感的である。 Angular を追加することで、より高速に実行できるようになります。 ブイエフ ディレクティブを <テンプレート タグを使えば、現在必要な部分だけをレンダリングすることができる。

。
</template

   </template
</template

一方 ngコンテンツ は常にレンダリングされるので、この場合は ngテンプレートそして後で、独自のカスタムディレクティブを作成する：

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

ディレクティブ({)
  selector: '[customDirectiveName]'
})
エクスポートクラス CustomDirective {
  コンストラクタ(public templateRef: TemplateRef) {}.
}

そして、あなたが自分の名前に ngテンプレート 属性を指定すると、Angularは何がレンダリングされるべきかを知ることができる：

を指定します。
  
</ng-template

また、コンポーネント内で、テンプレートを コンテンツチャイルド をクリックして、適切なテンプレートを入手してください：

ContentChild(CustomDirective) content!CustomDirective；

サービス対店舗

Angular その核心では、モデルにサービスを使うことができるMVCデザイン・パターンを使うことを奨励している。そのため、アプリケーションでデータを自由に操作するには、依存性注入パターンを学ぶ必要がある。APIコールの副作用を分離し、その時点で必要な部分をインジェクションすることで、プロジェクト全体で同じロジックを使用することができます。

Angular また、RxJsのobservablesを使ってよりリアクティブなアプローチを使いたい場合には、Reduxパターンに基づいたNgrx/storeフレームワークも付属しています。コンポーネントやサービスからユニークなイベントをディスパッチするAction、実行したい副作用や非同期アクションを処理するEffects、そして状態を変異させるReducersが付属しています。

で VueVuexライブラリは、Ngrx/storeと同様に、アクション、ミューテーション、ゲッターなどのツールを備えています。ユーザーストアやカートストアなど、ビューに異なるストアを設定することでモジュール化することができます。 名前空間: true プロパティを指定します。

以下は、サービスベースのアプローチとVuexのアプローチの比較である。製品お店のデータ

@Injectable() // 後でDIで使いたいことを示すデコレーター
エクスポートクラス ProductsService {
  private products：Product[] = []；

  コンストラクタ(private backend: BackendService) { }.

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => { //商品を好きなように扱う。
      // 商品に好きなことをする
    });
    return this.products；
  }
}

次に、コンポーネント内で、使用するサービスをインジェクトする：
コンストラクタ(private service: HeroService) { }.

で Vueバックエンドを呼び出すアクションをディスパッチするだけだ：

store.dispatch(getAllProducts)

そして actions.ts ファイルにアクションを定義する：

アクションを実行する：{
getAllProducts ({ commit }){ // 全ての商品を取得する。
    commit('setProducts', await getProducts();); // データを取得し、結果をストアに置く
}}

データの取得

と VueAxios/Fetchでも何でも好きなライブラリーを使えばいいし、プロミスを使った非同期呼び出しでも何でもいい。

を試す。
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('必要なことを何でもする'))
} catch (e) {
    //エラー処理
}

Angular observablesを使用するHttpClientライブラリが付属しており、これを適切に使用したり、データを操作したりするには、RxJsを学ぶ必要があります。繰り返しになるが、この抽象的な構造を流暢に使いこなすには、最初のうちは圧倒されるかもしれない。

Axiosを使うこともできるが、AxiosのGitHubページには次のように書かれている。 Angular'

private getAllItems(): void { {.
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('結果')、
tap(console.log('do whatever side effect you want to use here')
catchError((error) => { //エラーを処理する。
        //エラーを処理する
})
)
.subscribe((result: ResultType[])
    // 与えられた出力に対する最終操作
)
}

まとめ

続きを読む

JavaScriptは完全に死んだインターネット上のある男

Netlifyファンクションを使ってGraphQL/MongoDB APIをデプロイする

間違ったコーディングでプロジェクトを台無しにする方法

ソフトウェア開発

将来を見据えたウェブ・アプリケーションの構築：The Codestのエキスパート・チームによる洞察

The Codestが、最先端技術を駆使してスケーラブルでインタラクティブなウェブアプリケーションを作成し、あらゆるプラットフォームでシームレスなユーザー体験を提供することにどのように秀でているかをご覧ください。The Codestの専門知識がどのようにデジタルトランスフォーメーションとビジネス...

ザ・コデスト