最近、同僚がルートやテンプレートを学習するプロセスでいくつかの問題に遭遇しました。それで今日、私は彼女のために例を書き、それをAngularjsを学んでいる人々と共有しました。
そういえば、AngularJS Development Projectは非常にエキサイティングであり、その楽しみは開発モデルであり、コードをより明確に、読みやすく、より簡潔で、より保守しやすくします。ただし、Angularjsを使用して開発する際に頭痛を与えるものもあります。つまり、現在のフロントエンドフレームワークはjQueryにより焦点を合わせており、多くのプラグインはjQueryに依存しており、Angulajsのプラグインはほとんどありません（Angularuiを除く他のAngularプラグインがわかりません。コントローラー内のコードが明確で混乱していないことを確認するために、DOMがコントローラーで操作することを許可されていないことを規定しているため、DOM要素を操作する必要があるたびに、それを完了するための指示であるため、存在します。多くのjQueryプラグインを操作するために指示に変換する必要があります。これは非常に嫌なことです。それは長い道のりのようです、OK ~~
目次：
1。AngularJSルーティングの紹介
2。AngularJSルーティングインスタンス
3.AngularJSは、Webサーバーリダイレクトと組み合わせてHTML5モードルーティングを使用して、ルーティングアドレスを簡素化します
1。AngularJSルーティングの紹介
AngularJSルーティングは、BackEnd MVCルーティングとは異なります。 AngularJSフロントエンドルーティングでは、指定された（NG-APP）のルーティングルール（routeProvider）をテンプレートページで事前に定義し、次に（NG-APP）を指示して、どのページ（HTML）が異なるURLをロードしてから（NG-APP）ビュー（NG-view）にレンダリングする必要があります。 MVCルーティングは、さまざまなURL要求を介してコントローラーのアクションを要求し、ルーティングルールに従ってビューを返すことです。 AngularJSは純粋なフロントエンドルートです。その後、構成ファイルを組み合わせてルーティングアドレスを簡素化します。
2。AngularJSルーティングインスタンス
新しいJSファイルを作成します。ここでは、app.jsに名前を付け、次のコードをファイルに書き込みます。
1 Angular.module（ "app"、[2 'ngroute' 3]）4 .config（['$ routeprovider'、function（$ routeprovider）{5 $ routeprovider.when（ "/list"、{6テンプレート： "これはリストページ" 7}）。 Redirectto： "/list" 12}）13}]））
新しいHTMLファイルを作成し、IT Index.htmlという名前を付けます。コードと説明は次のとおりです。
1 <！Doctype HTML> 2 <HTML XMLNS = "http://www.w3.org/1999/xhtml" ng-app = "app"> 3 <head> 4 <title> </head> 5 </head> 6 <body> 7 <header> 8 <h2> ng-view> </div> 12 </content> 13 <footer> 14 <h3>これはボトムです</h3> 15 </footer> 16 </body> 17 </html> 18 <スクリプトsrc = "/scripts/angular/angular.min.js"> </script> "/scripts/angular/scripte/<route <スクリプトsrc = "/scripts/app.js"> </script>
例を実行してください、効果は次のとおりです。
ブラウザの入力アドレスを開きます：http：// localhost：2987/index.html＃/detailおよびhttp：// localhost：2987/index.html＃/list、次の図に示されているページを見ることができます。
3。AngularJSはHTML5モードルーティングをWebサーバーと組み合わせて使用して、ルーティングアドレスを簡素化します
上の写真では、リクエストアドレスが非常に長いことがわかります。強迫性障害を持っている人がこのタイプの住所を受け入れることは難しいので、私はそのような変化を起こすことにしました。
1）AngulajsはHTML5モードルーティングを有効にし、＃番号を削除します。
Angulajsの場合、デフォルトはHTML5ルーティングモードがオンになっていないことです。次の方法に従うことにより、HTML5ルーティングモードを有効にします。
1 Angular.module（ "app"、[2 'ngroute' 3]）4 .config（['$ routeprovider'、 '$ locationprovider'、function（$ routeprovider、$ locationprovider）{5 // open html5ルーティングモード6 $ locationprovider.html5mode（true）テンプレート： "これはリストページ" 9}）。
このようにして、上記のリクエストアドレスに従って＃番号を削除した後、ページは更新されました。プロンプト404はページを見つけることができませんでした。その理由は、そのようなアドレスがバックグラウンドIIに要求された場合、対応するファイルが見つからないため、404エラーページが直接返されるためです。したがって、WebServer構成を構成ファイルに追加し、次のようにファイルをリダイレクトする必要があります。
1 <System.Webserver> 2 <Rewrite> 3 <rules> 4 <ルールname = "name"> 5 <match url = "^list | detail*" true "/> 6 <条件logicalgrouping =" matchall "> 7 <add" input = "{request_filename}" matchtype = "negate =" negate "" negate " matterype = "isdirectory" negate = "true"/> 9 </条件> 10 <アクションタイプ= "url ="/index.html "/> 11 </rule> 12 </rules> 13 </rewrite> 14 </system.webserver>
上記のコードに示すように、<match url = "^list | detail*" ingorecase = "true"/>は、リクエストアドレスにリストまたは詳細が含まれている場合（要件に応じて正規表現自体を記述）、index.htmlページにリダイレクトされることを意味します。 http：// localhost：2987/Pageの詳細をページに入力すると、IISは最初にテンプレートページ（index.html）に戻り、次にAngulajsルートの実行が開始されます。
http：// localhost：2987/browserに詳細を入力してください。必要な結果が得られなかったことを発見しました。つまり、ルートは一致しませんでした。
オンラインで長い間検索した後、最終的にソリューションを見つけました。これは、次のように<base>タグをHTMLページに追加することです。
1 <！Doctype HTML> 2 <HTML XMLNS = "http://www.w3.org/1999/xhtml" ng-app = "app"> 3 <head> 4 <title> </title> 5 <base href = "/"/"/> 6 </head> </header> 11 <content> 12 <div ng-view> </div> 13 </content> 14 <footer> 15 <h3>これはボトムです</h3> 16 </footer> 17 </html> 19 <スクリプトsrc = "/scripts/angular/angular.min.js" src = "/scripts/angular-route/angular-route.min.js"> </script> 21 <script src = "/scripts/app.js"> </script>
このようにして、http：// localhost：2987/の詳細をブラウザに入力すると、必要な結果が表示されます。スクリーンショットは次のとおりです。
レガシーの質問：<base href = " /" />タグを追加して、なぜ成功できるのですか？この質問についてすべてのブロガーに尋ねたいと思います。
上記のコンテンツに何か問題がある場合は、それについて文句を言ってください！ ！ ！
上記は、AngularJSルーティングとテンプレートの例の完全な内容と、編集者がお届けした単純化方法（必読）のルーティングです。誰もがwulin.comをもっとサポートすることを願っています〜