18 の一般的な角度のある面接の質問 (回答分析付き)

この記事では、angular の面接でよくある 18 の質問 (回答分析付き) を要約して共有し、基本的な知識を整理し、Angular の知識の蓄えを強化するのに役立ちます。

#1. angular はデータ バインディングにどのようなメカニズムを使用しますか?原理を詳しく説明してください

回答: ダーティ チェック メカニズム。

分析:

双方向データ バインディングは、AngularJS の中核メカニズムの 1 つです。ビュー内のデータが変更されると、そのデータがモデルに更新されます。モデル内のデータが変更されると、ビューも同期的に更新されます。当然、これには監視が必要です。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

原則として、Angular はスコープ モデルにリスニング キューを設定して、データの変更を監視し、ビューを更新します。ビューに何かをバインドするたびに、AngularJS は $watch キューに $watch を挿入し、監視しているモデルに変更があるかどうかを検出します。ブラウザーが Angular コンテキストによって処理できるイベントを受信すると、$digest ループがトリガーされ、すべての $watch を走査し、最後に dom を更新します。

2. AngularJS の双方向データ バインディングはどのように実装されますか?

回答:

1. 各双方向バインド要素にはウォッチャーがあります

2. 特定のイベントが発生したとき、ダイジェストされたダーティ データは検出と呼ばれます。

これらのイベントには、フォーム要素の内容の変更、Ajax リクエストの応答、ボタンのクリックによって実行される関数などが含まれます。

3. ダーティ データ検出では、ルートスコープ内のすべてのウォッチャー要素が検出されます。

$ダイジェスト関数はダーティ データ モニタリングです

3. angularjs プロジェクト開発で使用したサードパーティのプラグインは何ですか

回答: AngularUi ui-router oclazyload など https://segmentfault.com/a/1190000003858219

4 を詳しく見るための記事が添付されています。 -もし ？

回答: ng-show/ng-hide が実際に表示を介して非表示にしたり表示したりすることは誰もが知っています。そして、ng-if は実際に dom ノードの追加と削除を制御します。したがって、異なる条件に基づいて dom ノードをロードすると、ng-if のパフォーマンスは ng-show よりも優れています。それとスコープの間でしょうか？

回答: 平たく言えば、r o o tScrope ページはすべての rootScrope ページとすべての rootScrope ページのすべてのスコープの父です。

分析:

ro o tScope、rootScope、rootScope とスコープを生成する方法を見てみましょう。

ステップ 1:Angular は ng-app を解析し、メモリ内に $rootScope を作成します。

ステップ 2: angular は解析を続行し、{{}} 式を見つけて、それを変数に解析します。

step3: 次に、ng-controller を含む div が解析され、コントローラー関数が参照されます。このとき、コントローラー関数は $scope オブジェクトのインスタンスになります。

6. 異なるモジュール間の通信を実装する方法を少なくとも 3 つ挙げてください。

回答:

Service

events、バインドされたイベントを指定します
• $rootScope
• controller を直接使用します$parent、$$childHead などを使用します。
• ディレクティブを使用してデータ バインディングの属性を指定します
• 7.式 {

{yourModel}} とは何ですか?仕事？

回答:

これは、$interpolation サービスに依存しています。ページ HTML を初期化した後、これらの式を見つけてマークします。そのため、{

が発生するたびに、 { }} の場合、$watch が設定されます。 $interpolation はコンテキスト パラメータを持つ関数を返します。関数が最終的に実行されると、式はそのスコープに対して $parse されます。

8. angular の $http

#回答: $http は AngularJS のコア サービスで、リモート サーバーからデータを読み取るために使用されます。 組み込みの http サービスを使用して、外部の世界と直接通信できます。 http サービスは外部と直接通信します。 http サービスは外部と直接通信します。 http サービスは、ブラウザのネイティブ XMLHttpRequest オブジェクトを単純にカプセル化します。

9. ng-repeat が配列を反復するとき、配列内に同じ値がある場合、何が起こり、どのように解決しますか?

回答: リピーター内での重複は許可されていないというプロンプトが表示されます。問題を解決するには、$index でトラックを追加してください。もちろん、配列内の各項目を一意に識別できる限り (dom とデータ間の関連付けを確立できる)、通常の値によってトレースすることもできます (

10. angularjs mvc または mvvm フレームワークです)

回答: mvvm分析:

まず、mvc と mvvm についての理解を説明してください:

そもそも、なぜ mvc と mvvm が必要なのでしょうか。 ?MVC?コードのサイズがますます大きくなるにつれて、責任を分割するのが一般的な傾向であり、後のメンテナンスの便宜のために、1 つの関数を変更しても他の関数には影響を与えないためです。ロジックの多くは同じであるため、再利用することもできます。 MVC は単なる手段であり、最終的な目標はモジュール化と再利用です。

mvvmの利点

低結合: ビューはモデルとは独立して変更および修正でき、同じビューモデルを複数のビューで再利用できます。ビューとモデルの変更は相互に影響しません。

再利用性: はい複数のビューを再利用するための ViewModel のビュー ロジック;

独立した開発: 開発者はビジネス ロジックとデータ (ViewModemvvmdi) の開発に集中でき、デザイナーは UI (ビュー) のデザインに集中できます。 #テスト容易性: Clear View レイヤ化により、プレゼンテーション レイヤのビジネス ロジックのテストがより簡単かつシンプルになります。

Angular の MVVM パターンは、主に 4 つの部分に分かれています:

View: に重点を置いています。インターフェースの表示とレンダリング. Angular では、これは多くの宣言ディレクティブを含むビュー テンプレートです.

ViewModel: ビューとモデルの接着剤であり、ビューとモデルの相互作用とコラボレーションを担当します。表示されたデータをビューに提供し、ビューの Command イベントがモデルを操作する方法を提供する責任があります。Angular では、$scope オブジェクトが ViewModel の役割を果たします。

Model:これは、アプリケーションのビジネス ロジックに関連するデータのカプセル化キャリアです。ビジネス ドメイン内のオブジェクトです。モデルは、それがどのように表示され、操作されるかを気にしません。そのため、モデルにはインターフェイスに関連するロジックは含まれません。 Web ページでは、ほとんどの一部のモデルは Ajax サーバーからデータを返すか、グローバル構成オブジェクトですが、Angular のサービスは、モデルに関連するビジネス ロジックをカプセル化して処理する場所です。このタイプのビジネス サービスを使用できます。他のサービスによって再利用される複数のコントローラーまたはドメイン サービスによって使用されます。

コントローラー: これは MVVM パターンの中核要素ではありませんが、ViewModel オブジェクトの初期化を担当します。1 つ以上のサービスを組み合わせて、ビジネス ドメイン Model を取得し、それを ViewModel オブジェクトに配置します。これにより、ロード開始時にアプリケーション インターフェイスが使用可能な状態に達します。

mvc のインターフェイスはロジックと密接に関連しており、データはデータベースから直接読み取ります。mvvm のインターフェイスは viewmode と疎結合されており、インターフェイス データは viewmodel から取得されます。そのため、angularjs は mvvm

11 を好みます。$scope、controller、 angularjs の mvvm でのディレクティブとサービス プレイ

答え: わからない場合は、最初の質問の分析は非常に明確です。もう一度注意深く読んでください

12. Angular プロジェクトで静的リソースの適切な読み込みを制御するにはどうすればよいですか

回答: なし

13. コントローラーを作成するときに注意する必要があることは何ですか論理？

回答:

1. コードを簡素化します (これはすべての開発者に必要です)

2. 断固として dom ノードを操作しないでください。なぜそうではありませんか?

答えは次のとおりです。DOM 操作はディレクティブ内でのみ使用できます。最後に表示される場所はサービス中です。 Angular はテスト駆動開発を推奨しており、DOM 操作がサービスまたはコントローラーに現れる場合、それはテストに合格できないことを意味します。もちろん、これは 1 つのポイントにすぎません。重要なのは、Angular を使用する利点の 1 つである双方向のデータ バインディングにより、山積みの DOM 操作に対処することなくビジネス ロジックの処理に集中できることです。 Angular コードにまださまざまな DOM 操作が含まれている場合は、jquery を使用して開発してみてはいかがでしょうか。

テスト駆動開発とは何ですか?普及:

テスト駆動開発 (英語の正式名は Test-Driven Development、略して TDD) は、従来のソフトウェア開発プロセスとは異なる新しい開発手法です。特定の関数のコードを記述する前にテスト コードを記述し、その後はテストに合格する関数コードのみを記述し、テストを通じて開発全体を推進する必要があります。これにより、簡潔で使いやすい高品質のコードを作成し、開発プロセスをスピードアップできます。

14. コントローラー間の通信方法

答え:

1. イベント

ここでは 2 つの方法があります。は、scope.scope.emit で、rootScope のイベントをリッスンしてパラメータを取得します。もう 1 つは、rootScope のイベントでパラメータを取得します。もう 1 つは、rootScope のイベントでパラメータを取得します。もう 1 つは、rootScope.br o a d c a s t です。 、by ブロードキャストをリッスンし、ブロードキャストをリッスンしてパラメーターを取得し、スコープ イベントをリッスンします。

最新バージョンの Angular では、これら 2 つのメソッドにパフォーマンスの違いはありません。主な理由は、イベント送信の方向が異なるためです。実際の状況に応じて選択できます。

2、サービス

専用のイベント サービスを作成することも、ビジネス ロジックに従って分割して、対応するサービス

3、$rootScope にデータを保存することもできます

このメソッドは少し汚いかもしれませんが、より便利です。つまり、データは rootScope に保存され、各サブ rootScope が各サブ rootScope 内にあるため、各サブスコープはライフ サイクルを見てみましょう

4. sc o p e を直接使用します。scope.scope.$nextSibling および同様のプロパティ

同様のものには、 sc o p e があります。スコープ.スコープ.親。この方法にはさらに欠点があり、$$ で始まる属性の使用は公式には推奨されていません。結合が増加するだけでなく、非同期の問題に対処する必要があり、スコープの順序が固定されていません。推奨されません

もう 1 つの方法は、ローカル ストレージ、グローバル変数、または最新のブラウザの postMessage を介してパラメータを渡すことです。特別な事情がない限り、この方法は避けてください。

15. カスタム命令のいくつかのパラメーター

答え:

次に、よく使用されるいくつかのパラメーターについて説明します。制限: dom 内の命令の宣言形式 E (要素) A (属性) C (クラス名) M (コメント)

template: 2 つの形式、1 つの HTML テキスト、2 つのパラメーターを受け入れることができる 1 つの関数、 tElemetn と tAttrs を返し、テンプレートを表す文字列を返します。テンプレート文字列にはルート DOM 要素

templateUrl が必要です。2 つの形式、1 つは外部 HTML ファイルのパスを表す文字列、2 つのパラメータを受け入れることができる関数、パラメータは tElement と tAttrs であり、戻り値を返します。外部 HTML ファイルへのパスの文字列

compile (オブジェクトまたは関数): コンパイル オプションはオブジェクトまたは関数を返すことができます。コンパイル関数が設定されている場合は、命令やリアルタイム データを DOM に配置する前に DOM 操作を実行する必要があることを意味し、この関数内でノードの追加や削除などの DOM 操作を実行しても安全です。基本的に、リンク オプションを設定すると、実際に postLink() リンク関数が作成され、compile() 関数がリンク関数を定義できるようになります。

次にポータルがあります: http://www.cnblogs.com/mliudong/p/4180680.html

コンパイルとリンクの違い:

コンパイル時, コンパイルは dom を変換し、バインドされたリスナーに遭遇すると最初に保存します。いくつか保存され、最後にリンク関数にまとめられて一緒に実行されるため、パフォーマンスが向上します。

16. angular と jquery の違い

回答:

angular はデータドリブンに基づいているため、angular は複雑なプロジェクトに適しています。データ操作 (ここで、シングルページ アプリケーションについてもう一度説明します。方法がわからない場合は、利点をもう一度ここに示します http://www.zhihu.com/question/20792064)

jquery はベースですプロジェクト

17. angular

回答:## のフォームについてどのくらい知っていますか?

#Angular は入力要素の型を拡張し、次の合計 10 種類を提供しました:

text

• number

• url

• メール

• ラジオ

• チェックボックス

• 非表示

• #ボタン

• 送信

• reset

• フォームの角度 4 つの組み込み CSS スタイルがあります。

ng-valid 合法的なステータスを確認します

• ng-invalid 違法なステータスを確認します

• ng- pristine ネイティブ フォームを使用したい場合は、この値を設定する必要があります

• ng-dirty フォームはダーティ データ状態です

• Angular はフォームを処理しています自動検証を実行するとき、Model の属性が検証されます。ng-model が設定されていない場合、Angular は myForm.$invalid の値が true かどうかを認識できません。

検証内容

必須 内容を入力するかどうかを示します

• ng-maxlength 最大長

• #ng-minlength 最小長

• 例: ポータル https://github.com/18500047564/clutter

18. どれくらいの量ですかフィルターとは何か知っていますか？カスタム フィルターの実装

回答:

date(日付)

• currency(通貨)

• limitTo (配列または文字列の長さを制限)

• orderBy (並べ替え)

• lowercase (小文字)

• uppercase (大文字)

• number (数値をフォーマットし、千の位の区切り文字を追加し、小数点の数を制限するパラメーターを受け取ります)

• filter (配列を処理し、特定の部分文字列を含む要素を除外します)

• json (フォーマットされた json オブジェクト)

• フィルターを使用するには 2 つの方法があります。

1 つはページ内で直接使用します:

<p>{{now | date : ‘yyyy-MM-dd’}}</p>

もう 1 つは JS で使用します:

$filter(‘过滤器名称’)(需要过滤的对象, 参数 1, 参数 2,…)
$filter(‘date’)(now, 'yyyy-MM-dd hh:mm:ss’);

重複排除配列をカスタマイズする

app.filter("unique", function() {
  return function(arr) {
    var n = [];
    var obj = {};

    for (var i = 0; i < arr.length; i++) {
      if (!obj[arr[i]]) {
        n.push(arr[i]);
        obj[arr[i]] = 1;
      }
    }

    return n;
  };
});

プログラミング関連の知識については、

プログラミング チュートリアル

をご覧ください。 ！

以上が18 の一般的な角度のある面接の質問 (回答分析付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。