AngularJSのMVVMスタイルのタブを実装する前に、まず一般的に使用されるjQuery実装を出力します。
1。JQueryは、シンプルで粗いタブ効果を達成します
var nav = $（ "。tabs"）; //タブスイッチvar box = $（ "。box"）; // container nav.on（ "click"、function（）{// click event var this_index = $（this）.index（this）.addclass（ "active"）。 box.eq（this_index）.show（）。siblings（）。hide（）;}）;JSの中核部分のみがここに記載されており、HTMLとCSSは詳細ではありません。
上記のコードは、タブの効果を簡単かつ大まかに実装し、クリックイベントを使用してelem.index()を取得し、インデックスとコンテナを一緒に文字列で囲んでディスプレイを制御して非表示にします。
2。AngularJSは、単純なタブ効果を実装します
HTMLパーツ
<セクションng-app = "myApp"> <div ng-controller = "tabcontroller as tab"> <nav> <ul> <li ng-class = "{'current'：tab.isset（1）}"> <a href = "＃" ng-click = "tab.setcurrent（1） ng-class = "{'current'：tab.isset（2）}"> <a href = "＃" ng-click = "tab.setcurrent（2）"> <span> work </span> </a> </li> <li ng-class = "{'current'：tab.isset（3）}" ng-click = "tab.setcurrent（3）"> <span> blog </span> </a> </li> <li ng-class = "{'current'： 'current'：tab.isset（4）}"> <a href = "ng-click =" tab.setcurrent（4） "> <span> </span> </a> </li> < ng-class = "{'current'：tab.isset（5）}"> <a href = "＃" ng-click = "tab.setcurrent（5）"> <span>連絡先</span> </a> </li> </nav> <div> <section id = "section-1" ng-shohshow = "tab.isset（ ng-show = "tab.isset（2）"> <p> 2 </p> </section> <セクションid = "section-3" ng-show = "tab.isset（3）"> <p> 3 </p> </section> <section id = "section-4" ng-show = "tab.isset（4）"> <p ng-show = "tab.isset（5）"> <p> 5 </p> </section> </div> </section> CSSパート（ Less構文の使用を促進するために、子供の靴はCSSをカスタマイズしてパーソナライズされた効果を実現できます）
* {マージン：0;パディング：0;} body {background：＃e7ecea; font-weight：600; font-family： 'raleway'、arial、sans-serif;テキストアライグ：center;} a {color：＃2cc185;テキスト装置：なし;アウトライン：なし; ＆：hover {color：＃74777b; }}。tabs {position：relative;幅：100％;マージン：30px auto 0 auto; nav {ul {position：relative;ディスプレイ：Flex;最大幅：1200px;マージン：0 Auto;リストスタイル：なし;フレックスフロー：rowラップ; justify-content：center; li {flex：1; ＆.current a {color：＃74777b; }}}}} a {display：block;位置：相対;オーバーフロー：隠し;ラインハイト：2.5; span {vertical-align：middle; Font-Size：1.5EM; }}}。content {position：relative;セクション{ /*表示：なし; */マージン：0 Auto;最大幅：1200px; ＆.content-current { /* display：block; */} p {color：rgba（40,44,42、0.4）;マージン：0;パディング：1.75em 0; font-weight：900; font-size：5em; Line-Height：1; }}}。tabs-style {nav { /* background：rgba（255,255,255,0.4）; */ ul li {a {overflow：visible;境界線：1pxソリッドRGBA（0,0,0,0.2）; -webkit-transition：色0.2秒;遷移：0.2sの色。 }} ul li li.current a {＆：afted＆：before {content： '';位置：絶対;トップ：100％;左：50％;幅：0;高さ：0;境界線：固体透明。 }＆：After {Mirvish -Left：-10px;境界線：10px;ボーダートップカラー：＃e7ecea; }＆：{margin -left：-11px;境界線：11px;ボーダートップカラー：RGBA（0,0,0,0.2）; }}}}JSパート
angular.module（ 'myApp'、[]）.controller（ 'tabController'、function（）{this.current = 1; this.setCurrent = function（tab）{this.current = tab;}; thiseT = function（tab）{return this.current == tab;};};};};};最終効果を以下の図に示します。
上記のコードを通して、実装のコアは、AngularJSに組み込まれたng-classとng-clickおよびng-showディレクティブであることがわかります。
簡単に言えば、コントローラーは現在のデータを定義します。データのデフォルト値は1です。ng ng-clickクリックイベントの関数をカスタマイズし、 currentデータを変更します。 ng-class current値結合条件を取得し、現在選択されているインデックスにcurrentスタイルを追加します。コンテナはまた、 controller内のcurrentデータを取得し、 ng-showコントロールを介して非表示に表示されます。
3. AngularJSは、わずかに複雑なモバイルタブ効果を実現します
HTMLパーツ
<Script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"> </script> <script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular-tuch ng-app = 'myApp' ng-controller = "mycontroller"> <div> <div ng-repeat = "item in [1,2,3,4]" ng-click = "changeindex（$ index）"> tab {{item}} </div> </div> <div> <div> div> </div> ng-swipe-right = "swiperight（）" ng-swipe-left = "swipeleft（）"> <div style = "left：{{-100*active index}}％"> <div ng-repeat = "item in [1,2,3,4]"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </h1> </div> </div> </div> </div> </div> </div> </div>CSSパーツ
*{パディング：0;マージン：0; font-family： 'arial';}。type-tabs {width：100％;高さ：40px;}。type-tabs div {float：left;幅：25％; Line-Height：40px;テキストアライグ：センター;カーソル：ポインター;ユーザーセレクト：なし; -webkit-user-select：none;}。guid-bar {position：relative;マージントップ：-3px;}。guid-bar-content {width：25％;高さ：3px;バックグラウンドカラー：＃345;位置：絶対;左：50％;トランジション：すべての400ms容易さ;}。タブコンテント{width：100％;高さ：500px;バックグラウンドカラー：#ccc;オーバーフロー：hidden;}。tab-content-inner {width：400％;位置：相対;トランジション：すべて400ms;}。タブコンテントアイテム{width：25％;フロート：左;テキストアライグ：センター;}JSパート
var myapp = angular.module（ 'myApp'、['ngtouch']）; myApp.controller（ 'myController'、function（$ scope）{$ scope.activeIndex = 0; $ scope.changeindex = function（index）{$ scope.activeindex = index;}; $ scope.act.active.check = cope.activeIndex = - $ scope.check（）; if（$ scope.activeindex <0）$ scope.activeindex = 3;効果は次のとおりです。
さて、今日はこれらの2つの例を挙げます。コードを直接見ることで、Angularjsについて学んだ子供の靴をすばやく理解できます。あなたが理解したことのない子供用の靴は、これら2つの例を通じてMVVMのブラックマジックとそのコード組織構造についても学ぶことができます。
4. jQueryのDOM操作よりも、AngularjsのMVVMモードについて何が優れていますか？
1。マクロの観点からは、データを操作してデータを処理することであり、もう1つはDOMとUIの相互作用を操作することです。
一般的なWebプロジェクトのプロセスは、次の3つのプロセスに要約できます。1）インターフェイスのデータを取得する2）バックグラウンドでデータを交換する3）データを取得した後、インターフェイスを再レンダリングします。このプロセスでは、バックエンドでデータ交換をどのように実装しますか？ jqueryのajax。データ交換APIが20以上を想定している場合、すべてを含めるために$ .getまたは$ .ajaxを何回書く必要がありますか？さらに、すべてのAPIリンクは同じ場所にありません。これは、管理するのが非常に面倒です。 Angularjsはrouteを構成するだけです。
データを取得した後、このデータをどのように管理し、どのようにしてデータをインターフェイスにレンダリングしますか？
さまざまなイベントを管理する方法は？ jQuery自体は、イベントトリガーによって特徴付けられます。多くの場合、イベントをトリガーするプロセスを作成したときです - >データの処理データです。明らかに、より多くの機能があると、コードは麺のように絡み合っています。私の周りには2、3年の間、多くの伝統的なjQueryのフロントエンドがたくさんあります。イベント委任、DOM操作、ブラウザレンダリングプロセス、プラグインコンポーネントパッケージなどに関する詳細な研究を研究していないため、コードの品質がどれほど悪いか想像できます。実際、JQueryはクラスライブラリであり、開発フレームワークではありません。 JQはJSネイティブAPIのさらなるカプセル化であり、DOM操作、アニメーション操作、AJAXをより幸せに実行できます。それはまさに柔軟性が高すぎるため、維持が困難なコードを書くのが簡単であるためです。
2。パフォーマンス：DOM操作は遅く、DOMオブジェクト自体もJSオブジェクトです。厳密に言えば、このオブジェクトを操作することは遅いということではありませんが、このオブジェクトを操作した後、レイアウトや絵画など、一部のブラウザー動作がトリガーされることです。
要約します
Web製品がますます複雑になるにつれて、階層アーキテクチャが不可欠です。したがって、双方向結合は、長い間人気があったMVCフレームワークと組み合わせて、解毒剤として使用され、MVVMアーティファクトが導出されました。ブロガーは、MVVMがフロントエンドの究極のソリューションになると固く信じています。 DOM操作からデータ操作まで、適応するにはプロセスが必要ですが、結果が良好である限り、これらの努力は価値があります。このプロセスでは、それはあなたの専門的な能力の改善でもあります。さあ、友達！ ！ ！