angleJSのルート（ルーティング）
概念に入る前に、Webアプリケーションがどのように機能するかを再考しましょう。
Mục lục
サーバー側レンダリングの概念
php、java、c＃などのサーバープログラミング言語（SSR /サーバー側レンダリング）では、メカニズムは次のように機能します：
- ユーザーはブラウザのリンク（URL）にアクセスし、 GETメソッドを使用してリクエスト（リクエスト）をサーバーに送信します
- サーバーはシグナルを受信し、パスとパスパラメーター（リクエストの定義に使用されるパスとパラメーター）に基づいて、対応するWebページコンテンツ全体をHTML、CSS、JAVASCRIPTを含むフルテキストとして返します。
- クライアントは返されたデータを受け取り、ブラウザはHTML、CSS、JSなどのテキストコンテンツに依存してそれをインターフェイスにレンダリングし、ユーザーが操作できるように表示します。
- ユーザーが表示されたインターフェースを操作した後、ユーザーがWebサイトを操作してサーバーに情報を送信し続けると（登録、ログイン、フォームの送信など）、ブラウザーはメソッドを介してサーバーにメッセージ情報を送信し続けます。 （GETまたはPOST）通常、SSRプログラミング言語では、リクエストを送信した後、ページをリロードするか、新しいページに切り替えます。 （理解を深めるために、HTMLでFORMをさらに学習してください）。
クライアント側のレンダリングの概念
単一ページアプリケーション（SPA）の概念で一般的に知られているangularjs、angular、reactjs、vuejsなどのクライアントプログラミング言語（CSR /クライアント側レンダリング）では、アクションのメカニズムは次のとおりです：
- 最初のヒットで、リクエストは引き続きサーバーに送信され、サーバーはHTMLを返し、HTMLにはjavascriptフレームワークが統合され、最初の実行時にアプリケーション全体が初期化されます（アプリケーションは完全にjavascriptで記述されます） ）。クライアント側を実行します）
- アプリケーションの実行後、サーバーとの次の通信で、ユーザーはインターフェースと対話し、AJAX（非同期JavaScriptおよびXML）メカニズムを介してサーバーに要求を送信します。このメカニズムにより、クライアントはサーバーと通信し、JavaScriptを介してすべてのデータを送受信します。つまり、ページ全体をリロードすることなく、JavaScriptを介してHTML部分インターフェイスのコンテンツを更新できます。
2つのメカニズムの長所と短所を比較する
| SSRとCSRの比較 | SSR | CSR |
| 処理ロジックとインターフェース | サーバ | クライアント |
| 初期化時間（最初のページの読み込み） | もっと早く | もっとゆっくり |
| 次回対話する時間 | もっとゆっくり | もっと早く |
| キャッシング | 弱い | より多くの利点 |
| SEO | より多くの利点 | 弱い |
クライアント側のレンダリングを使用したAngularJSのルート
ユーザーナビゲーション用のメニュー機能を備えたWebサイトの例を考えてみましょう。HTMLまたはPHP、C＃、Javaに到達すると、ユーザーがクリックするたびに、ページが別のページに移動します。新しいページ、またはユーザーが送信するたびに表示されます。フォームでは、ユーザーがサイトをリロードするか、新しいページに切り替えます。たとえば、現在のサイトでは、サーバー側のレンダリングメカニズムを備えたwordpressのCMSを使用しています。上記のリンクナビゲーションをクリックすると、アプリケーションは新しいページに切り替わります。サーバーはHTMLインターフェイスを返し、ブラウザはページをリロードし、すべてのHTML、Javascript、cssを再レンダリングします…
angleJSのルートメカニズムに関しては、次のような違いがあります。ユーザーがangularJSアプリケーションでメニューのリンクをクリックすると、メカニズムが正しく記述されている場合、ブラウザーはページをリロードしません。ヘッダー、フッターはリロードします。変更しない（Javascript、CSSを再度RENDERにする必要はありません）。変更するのは、更新する必要があるHTML領域のみです（メニューをクリックした場合は、メニューの下のメインコンテンツ全体になります）。これにより、ブラウザーが保存されます。 HTML、JS、CSS全体をリロードする必要がありますが、更新が必要な領域で新しいHTMLを更新するだけで済み、アプリケーションが次の対話でパフォーマンスを大幅に向上させるのに役立ちます。
依存性注入メカニズム（依存性注入手法）を介してangularJSでルートを使用できるようにするための初期化構文については、次の記事で説明します。
シリーズで初めて、要素を文字列として2番目のパラメーターとして受け取るangularJSアプリケーションを確認しました。その上に、アプリケーションをロードするためのangular-route.min.jsファイルを記事に含める必要があります。 。私たち全員が空の配列（要素なし）を渡す前に：
<script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> ... var app = angular.module('myApp', ['ngRoute']);プロジェクトにngRouteオブジェクトを含めた後、 $routeProviderサービスを介してangularJSのルートを使用できるようになりました
以下の例を検討してください。 $routeProviderを使用し、angularJSアプリケーションのルートを構成してリダイレクトアプリケーションを作成します。
ステップ1：ファイルindex.htmlを作成する
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Examole Routes AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> <style> .container { max-width: 400px; margin: 0 auto; padding: 15px; align-items: center; } .flex-wrap { display: flex; flex-wrap: wrap; } .list-none { list-style: none; } .menu-list { padding: 0px; margin: 0px; justify-content: flex-end; } .menu-list li { margin: 0px 5px; } .menu-list li a { text-decoration: none; color: #000; } .menu-list li a:hover { color: #46b8e6; } .no-margin { margin: 0; } .main-header { display: flex; background: #f5f5f5; } .logo-wrap { width: 45px; } .main-header nav { width: calc(100% - 46px); } .main-footer { background: #fa726c; } .white { color: #fff; } .blue { color: #46b8e6; } </style> </head> <body ng-app="myApp"> <div ng-controller="headerController" ng-class="[gc.container, gc.mainheader ,gc.flexwrap]"> <div ng-class="gc.logowrap"> <h2 ng-class="[gc.nomargin, gc.blue]">{{logotext}}</h2> </div> <nav> <ul ng-class="[gc.flexwrap , gc.listnone, gc.menulist]"> <li><a ng-href="#!">Home</a></li> <li><a ng-href="#!about">About</a></li> <li><a ng-href="#!contact">Contact</a></li> </ul> </nav> </div> <div ng-controller="mainController" ng-class="[gc.container, gc.mainbox, gc.flexwrap]"> <div ng-view></div> </div> <div ng-controller="footerController" ng-class="[gc.container,gc.flexwrap,gc.mainfooter,gc.white]"> {{copyRight}} </div> </body> <script> var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider. when('/', { templateUrl: 'templates/index.html' }) .when('/about', { templateUrl: 'templates/about.html' }) .when('/contact', { templateUrl: 'templates/contact.html' }); }); app.run(function ($rootScope) { // global class variable $rootScope.gc = { container: 'container', mainheader: 'main-header', mainfooter: 'main-footer', flexwrap: 'flex-wrap', listnone: 'list-none', menulist: 'menu-list', nomargin: 'no-margin', white: 'white', logowrap: 'logo-wrap', blue: 'blue' }; }); app.controller('headerController', function ($scope, $location) { $scope.navigation = [ { name: 'Home', url: '/', controller: 'mainController' }, { name: 'About', url: '/about', controller: 'mainController' }, { name: 'Contact', url: '/contact', controller: 'mainController' } ]; $scope.logotext = 'web888.vn'; }); app.controller('mainController', function ($scope, $location) { $scope.homedata = { title: 'Home', description: 'This is home page' }; $scope.aboutdata = { title: 'About', description: 'This is about page' }; $scope.contactdata = { title: 'Contact', description: 'This is contact page' }; }); app.controller('footerController', function ($scope) { $scope.copyRight = '@copyright web888.vn'; }); </script> </html>ステップ2：シーケンシャルソースコードを使用して、テンプレートフォルダーとhome.html、about.html、contact.htmlファイルを作成します。
<div> <h2>{{homedata.title}}</h2> <p>{{homedata.description}}</p> </div> <div> <h2>{{aboutdata.title}}</h2> <p>{{aboutdata.description}}</p> </div> <div> <h2>{{contactdata.title}}</h2> <p>{{contactdata.description}}</p> </div>ブラウザ表示インターフェース、メニューとの対話が可能、データはページをリロードせずに更新されます
より柔軟で高度な機能が必要な場合は、ルーターをカスタムディレクティブと組み合わせて使用して、複雑な構造と高い再利用性を備えたSPAアプリケーションを作成できます。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
