角度コントローラーを工場とサービスで整理します-jsチュートリアル-php.cn

角度コントローラーを工場とサービスで整理します

Jennifer Aniston

リリース： 2025-02-21 12:28:10

オリジナル

435 人が閲覧しました

Tidy Up Your Angular Controllers with Factories and Services

キーポイント

構文を使用して、テンプレートのバインディングを簡素化し、controllerAsの使用に関連する一般的な落とし穴を避け、それによりコードの読みやすさと保守性を向上させます。 $scope 再利用可能なロジックをサービスまたは工場に移動することにより、コントローラーをリファクタリングします。これは、主にビュー関連のロジックを扱うクリーンで集中したコントローラーを維持するのに役立ちます。
テストコントローラー、サービス、および工場を使用します。
コードの複製を回避し、アプリケーションのさまざまな部分で使用される機能の更新と管理を促進するために、サービスまたは工場への抽象的または共有された機能。

制御不能になるのはどうしてそんなに簡単ですか？

最も基本的なAngularJSアプリケーションでさえこの突然の複雑さがどのように発生するかを示すために、アプリケーションの構築を開始し、どこで間違っているのかを観察しましょう。次に、後で解決策を見ます。

簡単なアプリケーションを作成してみましょう

作成するアプリケーションは、Dribbble Playerスコアリングアプリケーションです。 Dribbbleユーザーの名前を入力して、スコアボードに追加することができます。ネタバレ - ここで最終製品の効果的な実装を見ることができます。最初に、次のコンテンツを含むindex.htmlファイルを作成します。

AngularJSアプリケーションを作成

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 重构</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <🎜>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">Dribbble 玩家分数</div>
        <div class="panel-body">
          <p>添加 Dribbble 玩家以查看他们的排名：</p>
          <div class="form-inline">
            <input class="form-control" type="text" />
            <button class="btn btn-default">添加</button>
          </div>
        </div>
        <ul class="list-group"></ul>
      </div>
    </div>
  </body>
</html>

ログイン後にコピー

以前に角度アプリケーションを書いたことがある場合、次のいくつかのステップは非常によく知られているはずです。まず、AngularJSアプリケーションをインスタンス化するapp.jsファイルを作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 重构</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <🎜>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">Dribbble 玩家分数</div>
        <div class="panel-body">
          <p>添加 Dribbble 玩家以查看他们的排名：</p>
          <div class="form-inline">
            <input class="form-control" type="text" />
            <button class="btn btn-default">添加</button>
          </div>
        </div>
        <ul class="list-group"></ul>
      </div>
    </div>
  </body>
</html>

ログイン後にコピー

次に、index.htmlファイルに含めます。また、Angularアプリケーションをブートストラップするために、

属性をng-app="dribbbleScorer"タグに追加します。 <html>

var app = angular.module("dribbbleScorer", []);

ログイン後にコピー

アプリケーションが設定され、起動されたので、アプリケーションのビジネスロジックの処理を開始できます。

（次のコンテンツは元のテキストに似ていますが、文と語彙は、元の意味を変えないように調整されており、出力の長さを制御するためにいくつかの繰り返しの手順が省略されています。）関数（フォーム、ドリブルデータ収集、プレーヤーの削除、プレーヤーの使用、プレーヤーオブジェクト、スコア計算）を徐々に追加することにより、元のテキストはアプリケーションを段階的に「実行」する方法を示していますが、コントローラーコードも発生します。肥大化して複雑になる。

Angular Factoryを使用して、焦点を抽象化します

プレーヤーを追加および削除するという2つの概念は、コントローラーの一部です。これは、コントローラーがこれらの機能を公開するほどではなく、むしろその実装にも責任があるということです。コントローラーの関数が、実際にプレーヤーを追加するインとアウトを処理するためにアプリケーションの別の部分にリクエストを渡した場合、それは良いことではないでしょうか？これは、Angularjsの工場が出てくる場所です。

addPlayer()（元のテキストの工場作成と使用部分が書き直されています。これはより簡潔で明確で、コアロジックを保持しています）

ファクトリーを作成しました。これは、ドリブルプレーヤーオブジェクトを作成するためのコンストラクターです。この工場は、Dribbble APIからデータを取得し、プレーヤーオブジェクトに追加する責任があります。この工場を使用することにより、プレーヤーの追加と削除のみを担当するように、コントローラーを簡素化しました。

（

およびDribbblePlayerメソッドを追加するなど、元のテキストの工場関数の改善も同様に書き直されて、より簡潔にするために）

また、プレーヤーオブジェクトの方法としてスコア計算方法をファクトリに追加します。このように、コントローラーコードはより簡潔であり、ビューに関連するロジックのみを担当します。 likeScore() commentScore()概要

DribbblePlayerこの記事では、「使いやすい」コードを簡単に記述する方法と、維持が迅速に困難になる方法を示しています。機能と責任に満ちた混oticとしたコントローラーになります。ただし、リファクタリングの後、コントローラーファイルは次のようになりました。

読みやすく、非常に少数のことに焦点を当てるのは簡単です - それがリファクタリングの目的です。 AngularJSアプリケーションを構築するためのより良い方法について考え始めるために必要なツールを提供していただければ幸いです。幸せなリファクタリング！このチュートリアルのコードはGitHubで入手できます！

（元のテキストの最後にあるFAQパーツは、記事が長すぎてコアコンテンツと弱い関係を持っているため、省略されています。必要に応じて、別のFAQ質問に答えることができます。）

以上が角度コントローラーを工場とサービスで整理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。