48 top angularjs interview questions
AngularJSの面接に関する最もよくある質問のリストと、初心者および経験豊富な専門家向けの詳細な回答:
AngularJSは、世界中で最新のWeb開発フレームワークの1つです。
ほぼすべての面接で、高い目標を達成し、夢の仕事を得るには、激しい競争に苦しむ必要があります。したがって、事前に十分に準備する必要があります。
この旅であなたをサポートするために、AngularJSの面接で最もよくある質問のリストと、面接時に面接官が期待する回答を示しました。
私たちを読んでください 一連のAngularJSチュートリアル 概念のより多くの知識のため。 AngularJSをテストするための分度器ツール アプリ 前のチュートリアルで説明しました。
最もよくあるAngularJSインタビューの質問
以下に、AngularJSでの面接に関する上位の質問と回答のリストを示します。これは、誰もが面接を成功させるのに役立ちます。
探検しよう!
Q#1)AngularJSで何を理解していますか?
回答: AngularJSは、リッチで拡張可能なWebアプリケーションを作成するために使用されるJavaScriptフレームワークです。
プレーンなJavaScriptとHTMLで実行されるため、機能させるために他の依存関係は必要ありません。 AngularJSはシングルページアプリケーション(SPA)に最適です。これは基本的に、JavaScriptオブジェクトをHTMLUI要素にバインドするために使用されます。
Q#2)AngularJSの機能を定義します。
回答:機能は次のとおりです。
- テンプレート(表示)
- スコープ(モデル)
- コントローラー(コントローラー)
- サービス
- フィルター
- 指令
Q#3)データバインディングを定義します。
回答: データバインディングは、ビューコンポーネントとモデルコンポーネント間のデータの自動調整です。
Q#4)AngularJS式とJavaScript式を区別します。
回答:AngularJS式とJavaScript式にはいくつかの違いがあります。
- AngularJS式をHTMLで記述できますが、JavaScript式をHTMLで記述できません。
- AngularJSで条件付き反復、ループ、および例外を使用することはできませんが、JavaScript式でこれらすべての条件付きプロパティを使用できます。
- フィルタはAngularJSでサポートされていますが、JavaScriptではサポートされていません。
Q#5)設定するためのすべてのステップを書いてください n Angularアプリ(アプリ内)。
回答:Angularアプリをセットアップするには、以下に説明する特定の手順に従う必要があります。
- angle.moduleが最初に作成されます。
- コントローラーがモジュールに割り当てられます。
- モジュールは、Angularアプリ(ng-app)を使用してHTMLテンプレート(つまり、UIまたはビュー)にリンクされます。
- HTMLテンプレートは、ng-controllerディレクティブを使用してコントローラー(つまりJS)にリンクされます。
Q#6)Angularモジュールとは何ですか?
回答: 角度モジュールは、角度コードを記述できる角度アプリケーションをまとめて定義します。モジュールには、Angularアプリケーションのさまざまな部分が含まれています。モジュールは、angular.module関数によってangularで作成されます。
Q#7)AngularJSのディレクティブスコープとは何ですか?
回答: AngularJSでは3つのディレクティブスコープを使用できます。
彼らです:
- 親スコープ: 親スコープからのディレクティブに加えた変更はすべて、親スコープにも反映され、デフォルトのスコープでもあります。
- 子スコープ: これは、親スコープからプロパティを継承するネストされたスコープです。また、スコープのプロパティと関数が親スコープディレクティブに接続されていない場合は、新しい子スコープディレクティブが作成されます。
- 分離スコープ: これは再利用可能であり、自己完結型のディレクティブを作成するときに使用されます。これは、プライベートおよび内部使用にのみ使用されます。つまり、親スコープのプロパティは含まれていません。
Q#8)AngularJSのコントローラー間でデータを共有するにはどうすればよいですか?
回答: まず、サービスを作成する必要があります。サービスは、AngularJSのコントローラー間で、非常に明快で簡単かつ最速の方法でデータを共有するために使用されます。 $ rootScopeを使用して、イベント、$ parent、next sibling、およびcontrollerを使用します。
Q#9)AngularJsのダイジェストサイクルとは何ですか?
回答: これは、AngularJSでのデータバインディングのプロセスの一部です。各ダイジェストサイクルで、スコープモデル値の新旧バージョンを比較します。
ダイジェストサイクルは自動的にトリガーされます。ダイジェストサイクルを手動でトリガーする場合は、$ apply()を使用して使いやすさを向上させることもできます。
Q#10)一方向バインディングと双方向バインディングの違いを説明してください。
回答: 一方向バインディングは、HTMLテンプレートまたはビューを自動的に更新せずに、モデルからビューにデータをバインドするために使用されます。
したがって、HTMLテンプレートを更新するには、データがモデルからビューにバインドされるたびにビューを更新するカスタムコードを作成する必要があります。
一方、双方向バインディングは、カスタムコードを記述せずに、HTMLテンプレートを自動的に更新することにより、モデルからビューに、またはその逆(つまり、ビューからモデル)にデータをバインドするために使用されます。
Q#11)sessionStorage、cookies、localStorageの違い。
回答:違いは次のとおりです。
- SessionStorage – データは特定のセッション用に保存されます。ブラウザタブが閉じられるか、特定のセッションが終了すると、データは失われます。保存される最大サイズは最大5MBです。
- ローカルストレージ - データは有効期限なしで保存されます。データは、JavaScriptまたはブラウザのキャッシュをクリアすることによってのみクリアできます。ストレージ制限は、sessionStorageおよびcookieよりも最大です。
- クッキー - いくつかのリクエストでサーバーに返送する必要のあるデータを保存します。 Cookieの有効期限は、サーバー側またはクライアント側のいずれかから設定されたタイプと期間によって異なります。保存される最大サイズは4KB未満にすることができます。
Q#12)AngularJSでの$ routeProviderの役割は何ですか?
回答: これは、ユーザーがリンクをクリックするたびにページ/リンクを個別にロードすることなく、異なるページ/リンク間を移動するのに役立つ$ routeProviderです。
ngRoute config()メソッドは、routeProviderを構成するために使用されます。
Q#13)$ scopeとscopeの違いは何ですか?
回答: AngularJSでは、$ scopeは依存性注入を実現するために使用され、scopeはView(つまりHTML)とController(つまりJS)の間のリンクに使用されます。
Q#14)AngularJSプレフィックス$と$$はどのように使用されますか?
回答: AngularJSの$$変数は、ユーザーコードとの偶発的なコードの衝突を防ぐために使用されるため、プライベート変数として使用されます。
一方、$プレフィックスは、角度のあるコア機能(変数、パラメーター、プロパティ、メソッドなど)を示すために使用できます。
Q#15)AngularJSのDOM操作はどこに実装できますか?
回答: DOMの操作はディレクティブ内にあり、これを除けば、コントローラーのサービスやその他の場所に存在してはなりません。
Q#16)スコープ変数に1回限りのバインディングのみを含める必要があることをどのように示すことができますか?
回答: ワンタイムバインディングを表示するには、「 ::: スコープの前にある」。
Q#17)AngularJSのSPA(シングルページアプリケーション)とは何ですか?
回答: これは、単一のHTMLページをロードし、ユーザーがアプリに接続するとページを動的に更新するWebアプリケーションです。
AJAXとHTMLを使用することで、不変のページをリロードすることなく、流動的でレスポンシブなWebアプリをSPAで作成できます。これにより、ページのちらつきのないレスポンシブUIを作成できます。
Q#18)AngularJSには何種類のデータバインディングがありますか?
回答: AngularJSは、一方向と双方向の両方のバインディングをサポートしています。
一方向のバインディングでは、データモデルを変更した場合、ビューに表示される動的な変更はありませんが、双方向のバインディングでは、データモデルに変更が加えられるたびに動的な変更が行われます。
Q#19)AngularJsのバインディングディレクティブとは何ですか?
回答:バインディングディレクティブには次のものが含まれます。
- ng-bind
- ng-bind-html
- ng-bind-template
- バインド不可の
- ng-model
Q#20)ng-bindおよびng-bind-htmlディレクティブについて説明してください。
回答:
ng-bind :HTML要素のコンテンツを割り当てられた変数または式の値に置き換えるディレクティブです。
HTML要素の内容は、変数または式の値を変更することによって変更されます。
これは({{expression}})のようなもので、この構文は次のとおりです。
ng-bind-html :コンテンツをHTML要素(ビュー)に安全な方法でバインドするディレクティブです。 $ sanitizeサービスは、コンテンツをサニタイズしてHTML要素にバインドするために使用されます。これを行うには、「angular-sanitize.js」をアプリケーションに含める必要があります。
Windows 764ビット用の最高の無料バックアップソフトウェア
これを書くための構文、
Q#21)ng-bind-templateとng-non-bindableについて説明してください。
回答:
ng-bind-template :要素のテキストコンテンツをテンプレートの補間によって置き換えます。複数のダブルカーリーマークアップを含めることができます。
バインド不可 :このHTML要素とその子ノードのコンテンツをコンパイルしないようにAngularJSを指定します。
Q#22)AngularJsのng-modelディレクティブについて説明してください。
回答: これは、アプリケーションデータへのカスタムHTML入力フォームコントロール(input、textarea、selectなど)を使用した飛躍的な可能性があります。双方向バインディングによるフォーム検証動作を提供します。
< input ng-bind='expression' />
Q#23)AngularJSでファクトリメソッドを定義します。
回答: これはサービスと非常によく似ており、ファクトリは、ファクトリメソッドを使用してモデルの構築に使用されるオブジェクトを生成するモジュールパターンを実装します。
ファクトリでは、メソッドオブジェクトは、新しいオブジェクトを作成し、プロパティとして関数を追加することにより、最後に返されます。
構文 :
module.factory(‘factoryName', function);
Q#24)AngularJSのng-repeatディレクティブとは何ですか?
回答: アイテムのコレクションをレンダリングまたは反復し、DOM要素を作成します。データのソースを定期的に監視して、変更に応じてテンプレートを再レンダリングします。
構文:
{{stu.name}} {{stu. grade}}
Q#25)AngularJSのコントローラーとは何ですか?
回答: コントローラは、指定されたスコープにバインドされているJavaScript関数です。 Angularは新しいコントローラーオブジェクトをインスタンス化し、依存関係として新しいスコープを挿入します。
コントローラを使用して、スコープオブジェクトの初期状態を設定し、オブジェクトに動作を追加できます。コントローラーを使用してコントローラー間でコードや状態を共有することはできませんが、その代わりにAngularサービスを使用できます。
Q#26)AngularJSのフィルターとは何ですか?
回答: フィルタの主な機能は、パイプ文字を使用して式またはディレクティブにマージできるようにデータを変更することです(これは、(|)であるパイプの角度記号にフィルタを適用するために使用されます。シンボル)。
フィルタは、ユーザーに表示する式の値をフォーマットします。これらはビューテンプレート、コントローラー、またはサービスで使用でき、独自のフィルターも簡単に作成できます。フィルタは、AngularJSによって提供されるモジュールです。フィルタには、それによって提供される9つのコンポーネントがあります。
例: 通貨、日付、フィルター、JSON、limitToなど。
Q#27)AngularJSのng-Appディレクティブとは何ですか?
回答: AngularJsアプリケーションを定義するために使用されます。アプリケーションのルート要素を指定し、orタグの近くに保持されます。
HTMLドキュメント内で任意の数のng-appディレクティブを定義できますが、自動的にブートストラップできるのは1つのAngularJSアプリケーション(自動ブートストラップ)のみであり、他のアプリケーションは手動でブートストラップする必要があります。
例:
My first expression: {{157 + 122}}
Q#28)AngularJSのng-switchとは何ですか?
回答: これは、スコープベースの式に基づくテンプレートでDOMの構造を条件付きで交換するために使用されます。
このディレクティブを使用すると、式に応じてHTML要素を表示または非表示にできます。
Q#29)AngularJsでのダブルクリックイベントの使用は何ですか?
回答: これにより、Webページ上のマウスのダブルクリックイベントでのカスタム動作を指定できます。次のようなHTML要素の属性として使用できます(ng-dblclick)。
...
Q#30)AngularJsのng-includeおよびng-clickディレクティブとは何ですか?
回答:
ng-include メインページにさまざまなファイルを含めるのに役立ちます。 ng-includeディレクティブには、外部ファイルからのHTMLが含まれます。
含まれるコンテンツは、指定された要素の子ノードとして含まれます。 ng-include属性の値は、ファイル名を返す式にすることもできます。
デフォルトでは、インクルードされたファイルはドキュメントと同じドメインに配置する必要があります。
ng-clickは、ボタンをクリックしたときや操作を実行したいときなどのシナリオで使用できます。 HTML要素がクリックされたときに何をするかをAngularJSに指示します。
例:
OK
上記のコードは、ボタンがクリックされるたびにカウント変数を1つ増やします。
Q#31)AngularJsのRepresentational State Transfer(REST)とは何ですか?
回答: RESTは、HTTPリクエストを介して動作するAPIスタイルです。
要求されたURLは操作対象のデータを識別し、HTTPメソッドは実行される操作を識別します。 RESTは正式な仕様ではなくAPIのスタイルであり、RESTfulとは何かについて多くの議論と意見の相違があります。RESTfulは、RESTスタイルに従うAPIを示すために使用される用語です。
AngularJSは、RESTfulWebサービスの利用方法に柔軟性があります。
Q#32)AngularJsグローバルAPIとは何ですか?
回答: これは、オブジェクトの比較、オブジェクトの反復、データの変換などのタスクを実行するために使用されるグローバルJavaScript関数の組み合わせです。
次のような一般的なAPI関数がいくつかあります。
- 角度。小文字: 文字列を小文字の文字列に変換します。
- 角度。大文字: 文字列を大文字に変換します。
- 角度。 isString: 現在の参照が文字列の場合はtrueを返します。
- 角度。 isNumber: 現在の参照が数値の場合はtrueを返します。
Q#33)AngularJsのプロバイダーメソッドとは何ですか?
文字列配列javaを作成する方法
回答: プロバイダーは、より多くの制御を可能にすることによってサービスオブジェクトを作成するオブジェクトです。
$ get()メソッドは、サービスオブジェクトを返すプロバイダーで使用されます。サービス名とファクトリ関数は、プロバイダーメソッドに渡される引数です。 AngularJSは$ provideを使用して新しいプロバイダーを登録します。
構文:
serviceApp.provider('logService', function ())
Q#34)イベント処理とは何ですか?
回答: AngularJsでのイベント処理は、高度なAngularJsアプリケーションを作成する場合に非常に便利です。
マウスのクリック、移動、キーボードの押下、変更イベントなどのDOMイベントを処理する必要があります。 AngularJsには、ng-click、ng-dbl-click、ng-mousedown、ng-keydown、ng-keyupなどのリスナーディレクティブがいくつかあります。
Q#35)AngularJs DOMとは何ですか?
回答: AngularJには、AngularJsアプリケーションデータをHTML要素の無効な属性にカプセル化するために使用されるいくつかのディレクティブがあります。
例: ng-disabledディレクティブは、アプリケーションデータをHTMLDOM要素のdisabled属性にカプセル化します。
Click Me!
Button
{{ mySwitch }}
Q#36)新しいAngularJsディレクティブの作成中に使用できる属性は何ですか?
回答: 新しいディレクティブの作成中に使用できる属性がいくつかあります。
それらが含まれます:
- テンプレート: インラインテンプレートを文字列として記述します。
- テンプレートURL: この属性は、AngularJs HTMLコンパイラーを指定して、テンプレート内のカスタムディレクティブを別のファイル内にあるHTMLコンテンツに置き換えます。
- 交換: 条件がtrueの場合は現在の要素を置き換え、falseの場合はこのディレクティブを現在の要素に追加します。
- トランスクルージョン: これにより、ディレクティブの元の子を新しいテンプレート内の場所に移動できます。
- 範囲: 親スコープを継承するのではなく、このディレクティブの新しいスコープを作成します。
- コントローラ: ディレクティブ間で通信するためのAPIを公開するコントローラーを作成します。
- 必要とする: 現在のディレクティブを効率的に機能させるには、別のディレクティブが存在する必要があります。
- リンク: 結果として生じるDOM要素インスタンスを変更し、イベントリスナーを追加し、データバインディングを設定します。
- コンパイル: 他のディレクティブで使用される場合と同様に、ディレクティブのコピー全体で機能のDOMテンプレートを変更します。コンパイル関数は、リンク関数を返して、結果の要素インスタンスを変更することもできます。
Q#37)AngularJsでネストされたコントローラーは可能ですか?
回答: はい。ビューを使用している間、ネストされたコントローラーは分類された方法で明確に定義されているため、可能です。
Q 38)AngularJSはすべてのブラウザーに適していますか?
回答: はい、Safari、Chrome、Mozilla、Opera、IEなどのすべてのブラウザとモバイルブラウザに対応しています。
Q 39)AngularJSでサービスを定義します。
回答: AngularJSサービスは、明確なタスクを実行するために使用されるシングルトンオブジェクトまたは関数です。それはいくつかの企業のアイデアを包含しており、これらの目的はコントローラー、ディレクティブ、フィルターなどと呼ぶことができます。
Q 40)AngularJSの利点を説明してください。
回答:利点は次のとおりです。
- MVCフォームをサポートしています。
- AngularJSを使用してデータバインディングの2つの方法を整理します。
- クライアント/サーバー相互通信をサポートします。
- シミュレーションをサポートします。
Q#41)サービスと工場の違い。
回答: ファクトリはオブジェクトを返す関数であり、サービスは新しいキーワードによって使用されるオブジェクトのコンストラクタ関数です。
構文:
工場 – module.factory( `factoryName`、function);
サービス – module.service( `serviceName`、function);
Q#42)工場とサービスの両方が同等である場合、いつそれらを使用する必要がありますか?
回答: ファクトリプロバイダーはオブジェクトを使用することをお勧めしますが、サービスプロバイダーはクラスを使用することをお勧めします。
Q#43)AngularJSとReact.JSの違い。
回答: AngularJSは、2010年10月にGoogleによってリリースされたTypeScript言語ベースのJSフレームワークです。これは完全に無料のフレームワークであり、SPAプロジェクト(つまり、シングルページアプリケーションプロジェクト)で使用されるオープンソースです。
React.JSは、UIを構築するために2013年3月にFacebookによって開発されたJavaScriptライブラリです。 Reactコンポーネントは複数のページで使用できますが、SPA(つまり、シングルページアプリケーション)としては使用できません。
Q#44)ng-bindディレクティブとng-modelディレクティブの違い。
回答: ng-bindディレクティブには一方向のデータバインディングがあり、データはオブジェクトからUIにのみ流れ、その逆はありません(つまり、$ scope >> view)。ng-modelディレクティブには双方向のデータバインディングがあり、UIからオブジェクトとその逆にデータが流れます。逆(つまり、$ scope >> view and view >> $ scope)。
Q#45)AJAXとAngularJSの違いは何ですか?
回答: AJAXはAsynchronousJavaScriptの略で、ページを読み込まずにサーバーから応答を送受信するために使用されます。
一方、AngularJSは、MVCパターンに従ったタイプスクリプト言語ベースのJavaScriptフレームワークです。
Q#46)ng-if、ng-show、ng-hideを定義します。
回答: ng-ifディレクティブは、式がfalseになった場合にHTML要素を削除するif句として使用されます。
構文
ng-showディレクティブは、式がtrueになった場合にHTML要素を表示するために使用されます。また、式がfalseになると、HTML要素は非表示になります。
構文
ng-hideディレクティブは、式がfalseになった場合にHTML要素を非表示にするために使用されます。
構文
ng-showとng-hideはどちらもdisplaypropertyメソッドを使用します。
Q#47)ngRouteとui-routerの違いは何ですか?
回答: ngRouteは、コアangularJSフレームワークの一部であるangularJSチームによって開発されたモジュールです。一方、ui-routerは、ngRouteの問題を克服するためにサードパーティコミュニティによって開発されました。
ngRouteは場所またはURLベースのルーティングであり、ui-routerはネストされたビューを許可する状態ベースのルーティングです。
Q#48)AngularJsでCookieを設定、取得、クリアするにはどうすればよいですか?
回答: AngularJSにはngCookiesというモジュールがあるため、ngCookiesを挿入する前に、angular-cookies.jsをアプリケーションに含める必要があります。
- クッキーを設定する – putメソッドは、CookieをKey-Value形式で設定するために使用されます。
$cookies.put(“username”, $scope.username);
- クッキーを取得する– GetメソッドはCookieを取得するために使用されます。
$cookies.get(‘username’);
- クッキーを消す - RemoveメソッドはCookieを削除するために使用されます。
$cookies.remove(‘username’);
結論
この記事は、AngularJSの基本と高度なレベルを理解するのに役立つと確信しています。
ここにリストされているAngularJSに関するこの一連の面接の質問と回答により、AngularJSの面接をより新鮮な経験レベルでうまくクラックすることができます。これらは、インタビューでよく聞かれる質問です。それは今のところすべてです。
この記事は、AngularJSに関連する面接をクラックして直面するのに役立ちます!!このAngularJSシリーズのすべてのチュートリアルを楽しんでいただけたでしょうか。