私は家で退屈し、たまたまAngular Onlineについてのチュートリアルを見つけました。 Angular、UI-Router、Ng-Gridの2つのモジュールを学び、模倣して小さなものを作りました。
コードはGitHubにアップロードされており、アドレスはhttps://github.com/wwervin72/angularにあります。
興味のある友達は見ることができます。次に、ここで最初にこれら2つのモジュールの使用を理解します。
まず、主にディープレベルのルーティングを実装するために使用されるUIルーターモジュールについて説明しましょう。実際、Angularには組み込みの命令ng-routeがあります。プロジェクトにネスティングの問題がない場合、この命令を使用してページ間でジャンプを達成するのは非常に便利ですが、その欠点は、ネストされた深いルートを使用する方法がないことです。したがって、最初に、このモジュールを使用したい場合は、ダウンロードする必要があります。
ダウンロードアドレスはhttp://www.bootcdn.cn/angular-ui-router/です。
ダウンロード後、プロジェクトにインポートできます。このモジュラーはAngularに基づいているため、Angular JSファイルをこの前にインポートする必要があることに注意してください。これは、Angularの公式Webサイトからダウンロードできます。
その後、上記のすべての準備が完了した後、手書きコードを書くことができます。
HTMLパーツ
<div> <div ui-view> </div> </div>
Divに追加された属性は、もはやng-viewではなく、ui-viewであることに注意してください。
JSパート
var app = angular.module（ 'app'、['ui.router'、 'loginmodel'、 'listmodel']）; app.config（function（$ stateprovider、$ urlrouterprovider）{$ urlrouterprovider.otherwider（ '/'/index '）; $ stateProvider。 TemplateUrl： 'tpls/start.html'}）.state（ 'register'、{url： '/register'、templateurl： 'tpls/register.html'}）.state（ 'main'、{url： '/main {positiontype：[0,9] {1,5} {{1,5}}'、views： 'tpls/main.html'}、 'typelist@main'：{tplateurl： 'tpls/typelist.html'}、 'tbhero@main'：{tpls/tbhero.html '}}}}}}}} 'tpls/addhero.html'}）.state（ 'find'、{url： '/findpwd'、templateurl： 'tpls/findpwd.html'}）.state（ 'detail'、{url： '/detail/：id'、tpls/dation/dation/desagle '}）注意を払うべき3つの場所があります：
1.ネスティングするとき、私の最も外側の層が主要な部分であり、その後、タイプリストとTbheroの部品が内部にネストされています。ここでは、執筆方法に注意を払う必要があります。
2。選択に応じて異なるコンテンツを開く必要がある場合、パラメーターを次のページに渡す必要があります。詳細な部分は次のとおりです。また、ここで執筆方法にもっと注意を払う必要があります。
3. Angular.moduleを使用してアプリアプリケーションを作成する場合、UI.Routerモジュールをインポートする必要があります。また、作成したモジュールでは、ここでインポートする必要があります。
4. $ stateProviderを使用して、$ routeproviderではなくルートを構成し、ここで使用されている状態をいつではありません。
ルーティングが構成された後、残りはTPLSの各部分のコードを記述することです。ここではあまり紹介しません。ここで最も重要なことは、ルーティング構成です。
さて、NG-Gridの使用法を見てみましょう。これがダウンロードアドレスhttp://www.bootcdn.cn/ng-grid/です。
HTMLパーツ
主な部分
<div> <div ui-view = "typeList"> </div> <div ui-view = "tbhero"> </div> </div>
タイプリストパーツ
<div> <div> div> <a href = "javascript：void（0）;">ヒーローポジショニングタイプ</a> <a ui-sref = "main（{positiontype：0}）">すべてのポジショニング</a> <a ui-sref = "main（{positiontype：1}）" ui-sref = "main（{positionType：2}）">ミドルレーン</a> <a ui-sref = "main（{positiontype：3}）"> top lane </a> <a ui-sref = "main（{positiontype：4}）"> jungler </a> <a ui-sref = "main（{positionType：5}）"> assist </a> </div> </div> </div>tbheroパーツ
<div ng-controller = "listctrl"> <div> <div> <button ui-sref = "addhero（）"> add hero </button> <button ui-sref = "index（）"> exit </button> </div> <div> <form> <input type = "text" ng-model = "filttions.filttions.filttions.filtertext" plicehold "plicehold" filltex </div> </div> <div> <div> <div ng-grid = "gridoptions"> </div> </div> </div> </div> </div>
JSパート
var listmodel = angular.module（ 'listmodel'、['nggrid']）; listmodel.controller（ 'listctrl'、['$ scope'、 '$ http'、 '$ state'、 '$ stateparams'、function（$ scope、$ http、$ state、$ stateparams：scope.pagions = scope.pageoptions） [5,15,20]、Pagesize：5、$ scope.filtertext： ''、useexternalfilter：true} $ scope.getDates = 0; SearchText.TolowerCase（）; $ http.get（ 'data/hero.php？params.positionType）.success（var data = data.filter（項目）{return json.stringify（item）.indexof（searchtext） i+1; $ http.get（ 'data/hero.php？param ='+$ stateparams.positionType）.success（function（data）{data.foreach（function（item、i）{item.index = i+1;}）; $ scope.totalserveritems = data.late.legt.lence.datas = data.slice（page-1） }）（function（data）{allert（ '）;}}}}}; $ scope.getdates（$ scope.pagingoptions.pagesize、pagingoptions.currentpage）、$ scope。 $ scope.getdates（$ scope.pagingoptions.pagesize.pagingoptions.cope.filteroptions.filtertext）、true）{data： 'datas'、 [endabledcellselection：true、//選択]を選択することができます。並べ替えることができます}、{field： 'name'、displayname： 'name'、width：120、sortable：true、inpinable：true}、{field： 'alias'、displayname： 'alias'、displayname： 'alias'、displayname： 'alias'、width： 'prut：true：true：fielpth：' prue：field：field：field：field：field： 'field：field：field：fiel 'position'、width：70、sortable：true、inpinnable：true}、{field： 'displayname：' disply： 'inpime'、width：500、sortable：true、pinnable：true}、{field： 'id'、displayname： 'datear戦略'、並べ替え：false、celtemplate： '<div> < ui-sref = "detail（{id：row.getproperty（col.field）}）" id = "{{row.getProperty（col.field）}}"> details </a> </div> '}]、実施：true、//ページshowfooter：true：' totalseriTemsの端を表示することができます。 //データの総数PagingOptions：$ Scope.PagingOptions、//ページパーツFilterOptions：$ scope.filteroptions //データフィルターパーツ}}））ここで最も重要なことは、$ scope.gridoptionsです。同時に、最後の詳細ガイドのパラメーターの執筆方法にもっと注意を払う必要があります。
ここにいくつかのレンダリングがあります：
ここにいくつかのレンダリングがあります：
さらに、ここでは、角度形態の検証、サービス、ウィザード、PHPなどの内容は紹介しません。執筆に何か問題がある場合は、メッセージを残してお知らせします。ありがとう ^_ ^。
AngularJSのUIルーターとNG-Gridモジュールの上記の簡単な分析は、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。