1. Angular のデータ バインディングにはどのようなメカニズムが使用されますか?詳細な原則的な
答え: ダーティ チェック メカニズム。
分析:
双方向データ バインディングは、AngularJS の中核メカニズムの 1 つです。ビュー内のデータが変更されると、そのデータがモデルに更新されます。当然、これには監視が必要です。 [関連チュートリアルの推奨:「Angular チュートリアル」]
原則として、Angular はスコープ モデルにリスニング キューを設定して、データの変更を監視し、ビューを更新します。何かをビューにバインドするたびに、AngularJS は $watch キューに $watch を挿入し、監視しているモデルに変更があるかどうかを検出します。ブラウザーが Angular コンテキストによって処理できるイベントを受信すると、$digest ループがトリガーされ、すべての $watch を走査し、最後に dom を更新します。
2. AngularJS の双方向データ バインディングはどのように実装されますか?
回答:
1. 各双方向バインド要素にはウォッチャーがあります。
2. 特定のイベントが発生すると、ダイジェスト ダーティ データ検出が呼び出されます。
これらのイベントには、フォーム要素のコンテンツの変更、Ajax リクエストの応答、ボタンのクリックによって実行される関数などが含まれます。
3. ダーティ データ検出により、ルートスコープ内のすべてのウォッチャー要素が検出されます。
$digest 関数はダーティ データの監視です。
3. angularjs プロジェクト開発で使用したサードパーティのプラグインは何ですか?
回答: AngularUi ui-router oclazyload など。詳しく見るための記事が添付されています https://segmentfault。 com/a /1190000003858219
4. ng-show/ng-hide と ng-if の違いは何ですか?
回答: ng-show/ng-hide が実際に表示を介して非表示にしたり表示したりすることは誰もが知っています。そして、ng-if は実際に dom ノードの追加と削除を制御します。したがって、異なる条件に基づいて dom ノードをロードすると、ng-if のパフォーマンスは ng-show よりも優れています。
5. root Scrope とは何か、また rootScrope、rootScrope、scope との違いを説明します。
回答: 平たく言えば、ルート Scrope ページは、すべての rootScrope ページ、すべての rootScrope ページ、およびすべてのスコープの父です。
分析:
ルート S コープ、rootScope、rootScope とスコープを生成する方法を見てみましょう。
step1:Angular は ng-app を解析し、メモリ内に $rootScope を作成します。
ステップ 2: angular は解析を継続し、{{}} 式を見つけて、それを変数に解析します。
ステップ 3: 次に、ng-controller を含む div が解析され、コントローラー関数がポイントされます。 このとき、コントローラー関数は $scope オブジェクトのインスタンスになります。
6. 異なるモジュール間の通信を実装する方法を少なくとも 3 つ挙げてください。
回答:
7. Expression { {yourModel}} はどのように機能しますか?
回答:
ページ HTML を初期化した後、これらの式を見つけてマークするため、{ が見つかるたびに $interpolation サービスに依存します。 {}} の場合、$watch が設定されます。そして、$interpolation はコンテキスト パラメーターを含む関数を返します。関数が最終的に実行されると、式 $parse がそのスコープに適用されます。
8. Angular の $http
回答: $http は AngularJS のコア サービスで、リモート サーバーからデータを読み取るために使用されます。
組み込みの http サービスを使用して、外部の世界と直接通信できます。 http サービスは外部と直接通信します。 http サービスは外部と直接通信します。 http サービスは、ブラウザのネイティブ XMLHttpRequest オブジェクトを単純にカプセル化します。
9. ng-repeat が配列を反復するとき、配列内に同じ値がある場合、何が起こり、どのように解決しますか?
回答: 問題を解決するには、$index によるトラックの追加が許可されていないことを確認するメッセージが表示されます。
もちろん、配列内の各
項目を一意に識別できる限り、通常の値でトレースすることもできます (dom とデータ間の関連付けを確立し
ます
)
。
mvc と mvvm の理解:
まず第一に、なぜ MVC が必要なのでしょうか?コードのサイズがますます大きくなるにつれて、責任を分割するのが一般的な傾向であり、後のメンテナンスの便宜のために、1 つの関数を変更しても他の関数には影響を与えないためです。ロジックの多くは同じであるため、再利用することもできます。 MVC は単なる手段であり、最終的な目標はモジュール化と再利用です。
mvvm の利点は
結合度が低いことです。ビューはモデルとは独立して変更および変更でき、同じビューモデルを複数のビューで再利用でき、ビューとモデルの変更は相互に独立して行うことができます
。 ViewModel に配置すると、複数の View を再利用できる;
独立した開発: 開発者はビジネス ロジックとデータ (ViewModemvvmdi) の開発に集中できる; デザイナーは UI (View) の設計に集中できる;
テスト容易性: 明確な View 階層化により、
Angular では、プレゼンテーション層のビジネス ロジックをテストするのがより簡単かつ簡単になります。
Angular では、MVVM パターンは主に 4 つの部分に分かれています。
ビュー: Angular では、
インターフェイスの表示とレンダリングに焦点を当てており、宣言的なディレクティブ ビューが多数含まれています
。テンプレート
: ビューとモデルの間の接着剤であり、ビューとモデル間の対話とコラボレーションを担当し、ビューのコマンド イベントが角度でモデルを操作する方法を提供します。 $scope オブジェクトは、ViewModel の役割として機能します。
モデル: アプリケーションのビジネス ロジックに関連するデータのカプセル化キャリアです。モデルは、それがどのように表示されるかは気にしません。 Web ページでは、ほとんどのモデルは Ajax サーバーからデータを返すか、グローバル構成オブジェクトであり、ビジネス ロジックをカプセル化して処理する場所になります。この種のビジネス サービスは、複数のコントローラーまたは他のサービスによって再利用できるドメイン サービスです。
コントローラー: これは、MVVM パターンの中核要素ではありませんが、ViewModel オブジェクトの初期化を担当します。 1 つ以上のサービスを組み合わせてビジネス ドメインの Model.ViewModel オブジェクトを取得し、ロード開始時にアプリケーション インターフェイスが使用可能な状態になるように
、mvc のインターフェイスからデータを直接読み取ります。 mvvm のインターフェイスは viewmode と疎結合されており、インターフェイス データは viewmodel から取得されるため、angularjs は mvvm 11 を好みます。 angularjs
の mvvm では、
$scope、controller、directive、service はどのような役割を果たしますか?
分からない場合は、最初の質問の分析が非常に明確です。もう一度よく読んでください。
12. Angular でプロジェクト内の静的リソースの適切な読み込みをどのように制御しますか?
回答: なし
13. 支払う必要があるものは何ですか。コントローラーロジックを書くときの注意点は？
答え:
1. コードを簡素化する (これはすべての開発者が必要とすることです)
2. 現時点では、なぜ dom ノードを操作できないのか疑問に思うかもしれません。
答えは次のとおりです。DOM 操作はディレクティブ内でのみ使用できます。最後に表示される場所はサービス中です。 Angular はテスト駆動開発を推奨しています。DOM 操作がサービスまたはコントローラーに現れた場合、それはテストに合格できないことを意味します。もちろん、これは 1 つのポイントにすぎません。重要なのは、双方向のデータ バインディングである Angular を使用する利点の 1 つであり、山積みの DOM 操作に対処することなくビジネス ロジックの処理に集中できることです。 Angular コードに依然としてさまざまな DOM 操作が含まれている場合は、開発に jquery を直接使用してみてはいかがでしょうか。
テスト駆動開発とは何ですか?普及するには:
テスト駆動開発 (英語の正式名は Test-Driven Development、略して TDD) は、従来のソフトウェア開発プロセスとは異なる新しい開発手法です。特定の関数のコードを記述する前にテスト コードを記述し、その後はテストに合格する関数コードのみを記述し、テストを通じて開発全体を推進する必要があります。これにより、簡潔で使いやすい高品質のコードを作成し、開発プロセスをスピードアップできます。
14.
コントローラー間の通信方法への答え:
1.
イベントには 2 つのメソッドがあります。1 つは、root S のイベントをリッスンしてパラメーターを取得する方法です。 ; もう 1 つはパラメータを取得する rootScope のイベントで、もう 1 つはブロードキャストをリッスンし、スコープのイベントをリッスンすることによってパラメータを取得します。
最新バージョンの Angular では、これら 2 つの方法にパフォーマンスの違いはありません。主な理由は、イベント送信の方向が異なるためです。実際の状況に応じて選択できます。
2. サービスは
専用のイベント Service を作成することも、ビジネス ロジックに従って分割して、対応する Service にデータを格納することもできます。3
.
$rootScope メソッドは少し汚いかもしれませんが、より便利です。データはルート Scope に保存されるため、各サブ rootScope に保存され、各サブ rootScope に保存されるため、各サブスコープを呼び出すことができますが、ライフ サイクルに注意する必要があります。
4. スコープを直接使用する.scope.scope.$nextSibling および同様のプロパティ
。scope.scope.parent に似ています。この方法にはさらに欠点があり、公式には、$$ で始まる属性の使用は推奨されていません。結合が増加するだけでなく、非同期の問題に対処する必要があり、スコープの順序も固定されません。
最新のブラウザでは、ローカル ストレージ、グローバル変数、または postMessage を介してパラメータを渡すことはお勧めできません
。特別な事情がない限り、この方法は避けてください。
15. カスタム命令のいくつかのパラメータ
答え:
以下のような、一般的に使用されるいくつかのパラメータ
について
説明します。
2 つの形式。HTML テキストの一種。tElemetn と tAttrs という 2 つのパラメータを受け取り、テンプレートを表す文字列を返す関数。テンプレート文字列にはルート DOM 要素
templateUrl が必要です。2 つの形式、1 つは外部 HTML ファイルのパスを表す文字列、2 つのパラメータを受け入れることができる関数、パラメータは tElement と tAttrs で、外部 HTML の文字を返します。ファイル パス 文字列の
コンパイル (オブジェクトまたは関数): コンパイル オプションはオブジェクトまたは関数を返すことができます。コンパイル関数が設定されている場合は、命令とリアルタイム データが 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 は dom ドライバーに基づいています。
17. jquery は
dom 操作が多いプロジェクトに適しています。angular?
回答:
Angular では入力要素の種類が拡張され、次の合計 10 種類が提供されています。
テキスト
番号
URL
電子メール
ラジオ
チェックボックス
隠し
ボタン
送信
リセット
Angular にはフォーム用の 4 つの CSS スタイルが組み込まれています。
ng-valid は正当な状態を検証します。
ng-invalid は不正な状態を検証します。
ng-pristine ネイティブ フォームを使用する場合は、この値を設定する必要があります
。 ng-dirty フォームがダーティ データ状態にある
場合、Angular はモデルを検証します
。ng-model が設定されていない場合、Angular は myForm.$invalid の値が true であるかどうかを認識できません。
検証に必要な内容は、
ng-maxlength、最大長
ng-minlength、最小長
を入力するかどうかを示します
例：ポータル https://github.com/18500047564/clutter
18. filterer ってどれくらい知っていますか？カスタム フィルターの
回答を実装します。
date (日付)、
currency (通貨)、
limitTo (配列または文字列の長さの制限)、
orderBy (並べ替え)、
小文字 (小文字)、
大文字 (大文字)、
数値 (数値の書式設定、桁区切り記号の追加、および受信)パラメータは小数点の数を制限します)
filter (配列を処理し、特定の部分文字列を含む要素を除外します)
json (json オブジェクトをフォーマットします)
filter を使用するには 2 つの方法があり、
1
つはページ上で直接使用します。
date : 'yyyy-MM-dd'}}</p>
もう 1 つは、js で使用する方法です:
$filter('フィルター名')(フィルター対象のオブジェクト、パラメーター 1、パラメーター 2、...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');重複排除配列をカスタマイズする
app.filter("unique", 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;
}
}
n を返します。
};
});