最近、このプロジェクトは非常に忙しいです。私は日中仕事に行かなければならず、夜に戻ってきて、同僚のために角張った知識ポイントPPTをする必要があります。結局のところ、私は年末に辞任しますが、誰かがまだプロジェクトのその後の開発を引き継ぐ必要があるので、夜の勉強には時間がかかります。これらのサードパーティのプラグインの勉強メモを書くことを計画したことはありませんが、モジュールをオンデマンドでロードして正常に使用することは本当に利点だと思いますので、記録する必要があります。この獣は要件を深く使用していないため、この獣はこれとrequesJの違いを知らず、これがAngularのオンデマンド荷重と見なされるかどうかを明確に説明することはできません。
この研究ノートナレッジポイントの効果を達成するには、以下を使用する必要があります。
Angular：https：//github.com/angular/angular.js
ui-router：https：//github.com/angular-ui/ui-router
oclazyload：https：//github.com/ocombe/oclazyload
これ以上苦労せずに、私はポイントに到達します...
まず、ファイル構造を見てみましょう。
Angular-OclazyLoad ---デモフォルダースクリプト---フレームワークとプラグインフォルダーAngular-1.4.7 --- Angular Not Angular-UI-Router --- UiRouterはOclazyloadを説明していません--- oclazyload --- Bootstrapはブートストラップを説明しません。 Angular-Bootstrap --- Angular-BootstrapはJSを説明しません--- JSフォルダーJSファイルはデモコントローラー用に記述されています---ページコントローラーフォルダーAngular-Tree-Control.js --- Angular-Tree-Control Controller Code Default.js ---デフォルトコントローラーコードNG-Table.JS --- NG-Table Controller Coderter App.config.config.config.config.config.config。 oclazyload.config.js ---ロードモジュール構成コードroute.config.js ---ルート構成とロードコードビュー--- HTMLページフォルダーAngular-Tree-Control.html --- Angular-Tree-Control Plug-in Effect Page Default.html ---デフォルトページNg-Table.html uibootstrapプラグイン効果ページindex.html ---メインページ
注：このデモはネストされたルーティングを行いません。単にシングルビュールーティングを実装して効果を表示します。
メインページのコードを見てみましょう。
<！doctype html> <html lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta charse href = "scripts/bootstrap/dist/css/bootstrap.min.css"/> <script src = "scripts/angular-1.4.7/angular.js"> </script> <スクリプト> <src = "scripts/angular-ui-router/release/rilease/angular-ui-router.min.min.js"> </</script> src = "scripts/oclazyload/dist/oclazeload.min.js"> </scrip> <script src = "js/app.config.js"> </script> <script> <script src = "js/oclazyload.config.js"> </script> <script src = "js/route.config.js"> < src = "js/route.config.js"> </script> </head> <body> <div ng-app = "templateapp"> <div> <a href = "＃/default"> home </a> <a href = "＃/uibootstrap"> ui-boottrap </a> <a href = "＃/ng-table"> href = "＃/ngtree"> angular-tree-control </a> </div> <div ui-view> </div> </div> </body> </html>
このページでは、BootstrapのCSS、Angular JS、UI-Router JS、OClazyLoad JS、および3つの構成JSファイルのみをロードします。
4ページのHTMLコードを見てみましょう。
Angular-Tree-Control効果ページ
<treecontrol tree-model = "ngtree.treedata" options = "ngtree.treeoptions"> {{node.title}} </treecontrol>ページにプラグインを使用するコマンドがあります。
デフォルトページ
<div> {{default.value}} </div>ここでは、それを使用して、default.jsを正しく実行して実行することを証明しています。
NGテーブルエフェクトページ
<div> <div> <h3> ng-table </h3> </div> <button ng-click = "ngtable.tableparams.sorting（{}）"> clear sorting </button> <p> <strong>ソート：</strong> {{ngtable.tableparams.sorting（）| json} </p> <tail ng-table = "ngtable.tableparams"> <tr ng-repeat = "user in $ data"> <td data-title = "'name'" sortable = "'name'"> {{user.name}} </td> <td data-title = "'age'" sortable "" "{user"> </table> </div>ここにいくつかの単純なNGテーブル効果があります。
ui-bootstrap効果ページ
<span uib-dropdown> <a href id = "simple-dropdown" uib-dropdown-toggle>プルダウンボックストリガー</a> <ul aria-labelledby = "simple-dropdown">プルダウンボックスコンテンツ。動的荷重を実現するために、ここに効果の証明を書く</ul> </span>
プラグインが正しく使用されて使用されていることを証明するためのドロップダウンボックス効果のみです。
OK、HTMLを読んだ後、読み込み構成とルーティング構成を見てみましょう。
「Strictを使用」var tempapp = angular.module（ "templateapp"、["ui.router"、 "oc.lazyload"]）。 tempapp.controller.register = $ complider.filter = $ filtprovider.register;
上記のコードは、モジュール登録のUI.Routerとoc.Lazyloadにのみ依存しています。構成は、後続のJSがTempappのメソッドを認識できるようにモジュールを構成するように構成されているだけです。
次に、OClazyLoadロードモジュールの構成を見てみましょう。
"strict" tempapp.constant（ "modules_config"、[{name： "ngtable"、module：true、files：["scripts/ng-table.min.css"、 "" scripts/ng-table/dist/ng-table.min.js}}、 「スクリプト/Angular-Bootstrap/ui-bootstrap-tpls-0.14.3.min.js "]}、{name：" treecontrol "、module：true：[" scripts/angular-tree-master/css/tree-control.csss "、 「スクリプト/Angular-Tree-Control-Master/CSS/Tree-Control-Attribute.css」、「Scripts/Angular-Tree-Tree-Master/Angular-Tree-Control.js "]}]） routefn（$ oclazyloadprovider、modules_config）{$ oclazyloadprovider.config（{debug：false、events：false、modules：modules_config}）;};ルーティング構成：
"strict" tempapp.config（["$ stateprovider"、 "$ urlrouterprovider"、routefn]）; function routefn（$ stateprovider、$ urlrouterprovider）{$ urlrouterprovider.OtherWise（ "/default"）; $ stateProvider .State（ "default"、{url： "/default"、templateurl： "Views/default.html"、controller： "defaultctrl"、controlleras： "default"、resolve：{deps：["$ oclazyload"、function（$ oclazyload）{$ oclazyload. .state（ "uibootstrap"、{url： "/uibootstrap"、templateurl： "Views/ui-bootstrap.html"、Resolve：{deps：["$ oclazyload"、function（$ oclazeload）{return $ oclazyload.load（ "ui.boottrap"）; url： "/ngtable"、templateurl： "Views/ng-table.html"、controller： "ngtablectrl"、controlleras： "ngtable"、resolve：{deps：[$ oclazyload "、function（$ oclazeload）{return $ oclazyload.load.load（" ngtable "）。 $ oclazyload.load（ "js/controllers/ng-table.js"）; deps：["$ oclazyload"、function（$ oclazyload）{return $ oclazyload.load（ "treecontrol"）。UI-BOOTSTRAPのドロップダウンボックスの簡単な実装では、コントローラーを必要としないため、NG-TableおよびAngular-Tree-ControlのコントローラーJSのみを見てみましょう。
ng-table.js
（function（）{"strict" strict "tempapp.controller（" ngtablectrl "、[" $ location "、" ngtableparams "、" $ filter "、ngtablectrlfn]）; function ngtablectrlfn（$ location、ngtableparams、$ $ filter）{aver：bir：[moroni"、 "moroni"、 "moroni"、 "moroni "Tiancum"、age：43}、{name： "jacob"、age：27}、{name： "nephi"、age：29}、{name： "enos"、age：34}、{name： "tiancum"、age：43}、 "enos"、age：34}、{name： "tiancum"、age：43}、{name： "jacob"、age：27}、{name： "nephi"、age：29}、{name： "enos"、age：34}、{name： "tiancum"、age：43}、 " 「nephi」、age：29}、{name： "enos"、age：34}]; this.tableparams（//デフォルトの構成とURLパラメーターAngular.Extend（{1ページ：1、//最初のページ数：10、//データボリューム並べ」 、{Total：data.length、//合計データgetData（$ defer、params）{$ location（params.url（））; $ defer.resolve（ordereddata.slice（（params.page（） - 1） * params.page（） * params.count（））;};}）（）;Angular-Tree-Control.js
（function（）{"strict" tempapp.controller（ "ngtreectrl"、ngtreectrlfn）; function ngtreectrlfn（）{// tree data this.treedata = [{id： "1"、title： "tag1"、childlist：[{id： "" 1-1 "タイトル： "child1"、childlist：[{id： "1-1-1"、title： "child1"、childlist：[{id： "1-2"、title： "child2"、childlist：[{id： "1-2-1"、タイトル： "child2"、childlist：[{id： "1-2-1"、 "child2：" 1-1 "、" 1-1-1 " ChildList：[]}]}]}、{id： "1-3"、title： "Child level 3"、ChildList：[]}]}、{id： "2"、title： "Tag 2"、ChildList：[{id： "2-1"、Title： "Child Level 1"、ChildList：[]}、{id： "2-2" ID： "3-1"、タイトル： "child1"、childlist：[]}、{id： "3-2"、title： "child2"、childlist：[]}、{id： "3-3"、title： "child3"、childlist：[]}]}]} };};}）（）;Default.jsを無視しましょう。結局のところ、「Hello Wrold」のみがあります。
github url：https：//github.com/program-monkey/angular-oclazyload-demo
上記は、AngularJSの動的荷重モジュールと依存関係に関する情報のコレクションです。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！