次に、最初の記事 "" $ locationとangularjsビルトインサービスの機能の詳細な説明 "
セクション2：ページネーションディスプレイ効果を実装します
次に、目に見えないようにし、ロケーションセッターメソッドを使用して現在のURL情報を設定します。デモを改善するために、この比較的完全な例では、AngularJSマルチルーティングテクノロジー、ネストされたコントローラー間のデータ転送、スコープ継承、HTTP通信、イントリンク転送変数などを導入しました。
最初にホームページテンプレートを作成します
<！doctype html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.js"> </script> <スクリプトsrc = .turnpagebuttonarea {background-color：＃f07a13;幅：500px;高さ：30px; Line-Height：30px;テキストアライグ：センター;マージン：10px Auto;パディング：20px; } button {margin-right：20px;幅：100px;高さ：30px;フォントサイズ：15px; } .pagenum {width：50px;高さ：23px;テキストアライグ：センター; } body {font-family：microsoft yahei; } h1 {text-align：center; } .totalpages {color：#ffffff} </style> </head> <body ng-controller = "indexcontroller"> <h1> angularjsターンページby $ location service </h1> <div-view> </div> <div> <button ng-click = "" button </button </button </button </button </button </button </button </button> </button < type = "number" ng-model = "currentPage"> <button ng-click = "gotopage（）"> go </button> <span>合計{{allpage}}ページ</span> </div> </body> </html>ページのレイアウトは、いくつかの単純なCSSスタイルで変更されます。
次に、ホームページの要素にいくつかのNGAPPとコントローラーを設定します。
属性ngviewのdiv要素では、他のHTMLに埋め込まれているテンプレート。
すぐ下に、3つのボタンを配置しました。最初の2つは、前のページのページターンボタンと次のページです。入力ボックスを使用すると、ユーザーはジャンプしたいページ番号を入力できます。その隣のボタンは、ページ番号の送信ボタンとして機能します。クリックした後、ページはすぐにページを回します。
3つのボタンすべてにngclick属性があり、ユーザーがボタンをクリックすると、対応する関数が実行されることを示します。
JS AngularJSコードを説明する前に、スクリーンショットを使用して、ファイルのディレクトリ構造を確認します。
上記のindex.htmlは前の2つの例からのものなので、それを無視できます。
簡単にするために、すべてのスクリプトをturnpage.htmlファイルの下に配置します。このファイルの完全なコードは次のとおりです。
turnPage.html
<！doctype html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.js"> </script> <スクリプトsrc = .turnpagebuttonarea {background-color：＃f07a13;幅：500px;高さ：30px; Line-Height：30px;テキストアライグ：センター;マージン：10px Auto;パディング：20px; } button {margin-right：20px;幅：100px;高さ：30px;フォントサイズ：15px; } .pagenum {width：50px;高さ：23px;テキストアライグ：センター; } body {font-family：microsoft yahei; } h1 {text-align：center; } .totalpages {color：#ffffff} </style> </head> <body ng-controller = "indexcontroller"> <h1> angularjsターンページby $ location service </h1> <div-view> </div> <div> <button ng-click = "" button </button </button </button </button </button </button </button </button> </button < type = "number" ng-model = "currentPage"> <button ng-click = "gotopage（）"> go </button> <span>合計{{allpage}}ページ</span> </div> <script> //ユーザー自身のNGAPPオブジェクトをインスタンス化します。ルーティングメカニズムはここで使用されているため、ngrouteモジュールは依存関係注射で記述されますvarターンパギアップ= angular.module（ 'ターンパジアップ'、['ngroute']）; /*異なるURLのさまざまなテンプレートとコントローラーを設定します。この例では1つのテンプレートのみが使用されるため、遭遇するルーティング状況は1つだけです。つまり、「/id」 */turnPageApp.config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider。 'StudentController'}）。 //親コントローラーIndexControllerを登録します。テンプレート内の子コントローラーの値は親コントローラーに渡す必要があるため、支援するにはルートドメイン$ルーツスコープが必要であり、ルートドメインオブジェクトを返す機能に渡す必要があります。 //さらに、この例はURLの操作に基づいてページターンを実装しているため、この組み込み$ロケーションサービスはターンパギアップのコントローラー（ 'indexcontroller'、function（$ rotscope、$ scope、$ location）に渡す必要があります。ターンページ＃/1： "/1" // javascriptのシルセ関数をスラッシュして、1またはマイナス1に変換します。最初のページ}は、最初のページにない場合、このページをターンすることです（PageNum> $ Rootscope.Allert（ 'これは最後のページ'）; $ scope.currentpage //プログラムの厳格さと可用性については、最初に入力が空であるかどうかを判断する必要があります。 $ rootscopeとその属性は、この属性の値がページ番号の総数です。次に、詳細を説明します。 //これは、ホームページに埋め込まれたテンプレートページのコントローラーです。 //子ドメインと親ドメイン間の通信にはルートドメインのヘルプが必要なため、$ rotscopeオブジェクトは依存関係に渡されますインスタンスの複雑さを制御するために、JSONファイルを直接書き、いくつかの偽データを作成しました。 //ここで$ routeparamsはオブジェクトであり、このオブジェクトにプロパティがあります。これは、以前にconfig（）関数で見たid（/：id）です。このIDは変数であり、アドレスバーのパスは何ですか、IDは何ですか。 IDの値は、$ routeParamsオブジェクトを介して取得する必要があります。 turnPageApp.Controller（ 'StudentController'、['$ rotscope'、 '$ scope'、 '$ http'、 '$ routeparams'、function（$ rootscope、$ scope、$ http、$ routeparams）{//このデータは、アレイまたはオブジェクトになります。アレイは0から始まります。1$ scope.Student [$ routeparams.id -1]サブドメインの属性は、同じ名前の親ドメインの属性を継承します。この要素は、親の範囲の属性の値を継承します。これは、ページの総数を間接的に表示しますview/sustent.html
<Table CellPacing = "0"> <tr> <td> id </td> <td> {{sustent.id}} </td> </tr> <td> name </td> <td> {{desudent.name}}} </td> </tr> <td> </td> <td> </td> < <td> {{sustent.sex}} </td> </tr> <tr> <td> age </td> <td> {{desudent.age}}} </td> </tr> <tr> <td> <td> <td> <td> </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td>コース</td> <td> <ul> <ul> <li ng-repeat = "course in Student.Courses"> {{course}}}} </li> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td>コース</td> <td> <ul> <li ng-repeat = "course in student.courses"> {{{{course}} type = "text/css"> table {border：solid 1px＃000000;マージン：0px auto; } td {パディング：10px 10px 10px 20px;マージン：0px;ボーダー：ソリッド1PX＃000000; } tr {マージン：0px;パディング：0px; } .title {background-color：＃207ef0;テキストアライグ：センター;色：#ffffff; } ul {list-style：none;マージン：0px;パディング：0px; } li {float：left;マージン：10px; } </style>data/sustent.json
[{"id"：1、 "name"： "frank li"、 "sex"： "male"、 "age"： "30"、 "courses"：["html"、 "css"、 "javascript"、 "java"、 "php"、 "mysql"、 "ubuntu"、 "mongodb"、 "nodejs"、 ""、 "" "Bootstrap" ] }, { "id": 2, "name": "Cherry", "sex": "female", "age": "27", "courses": [ "Anderson's Fairy Tales", "Pride and Prejudice", "Vanity Fair", "Oliver Twist" ] }, { "id": 3, "name": "John Liu", "sex": "male", "age": 「29」、「コース」：[「アートの紹介」、「スケッチ」、「作曲」、「彫刻」]}]これが最初の様子です。アドレスバーのデフォルトパスは /1なので、最初の学生の情報が直接表示されます。ページの総数も取得できます。
前のボタンをクリックした後の効果。もうページをめくることができません
効果は、4ページのときに次のボタンをクリックするとき。ページを元に戻すことができません。
ページ番号範囲内でページをめくるのに問題はありません！
長さを考えると、入力されたページ番号が範囲外であることを実証しません。上記のスクリーンショットは、ページ番号の正しい範囲を入力してGOボタンをクリックする効果です。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。