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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

Jennifer Aniston

Feb 21, 2025 pm 12:28 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7873

Java チュートリアル

1649

CakePHP チュートリアル

1409

Laravel チュートリアル

1301

PHP チュートリアル

1245

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。