HTML の単一ページを Angular に導入する

要件:
Angular で静的 HTML ページにルーティングできる必要があります。ここでは、ルーティングにおける権限の問題を解決する必要があります。

解決策:
1 まず、別の HTML ページをネイティブの Html に導入する方法を思い出してください。

(1) jQueryのloadメソッドを利用する

load( url, [data], [callback] )
url: インポートされるファイルのアドレスを参照します
data: オプションのパラメータ; Load は静的 HTML ファイルだけでなく、PHP ファイルなどの動的スクリプトもインポートできるため、動的ファイルをインポートするときに、ここに渡すパラメータを置くことができます。
callback: オプションのパラメータ; ロードメソッドを呼び出してサーバーから応答を取得した後に実行される別の関数を指します。
例:
1 $("# myID") .load("test.php"); //
ID #myID の要素に test.php をインポートした後の結果
2 $ ("#myID").load("test.php",{"name" : "Adam"});
//インポートされた php ファイルには、次のような受け渡しパラメータが含まれています: test.php?name=Adam
3 $("#myID").load("test.php",{"name" : " Adam", "site": "61dh.com"});
渡された複数のパラメーターを含む PHP ファイルをロードします。注: パラメーターはカンマで区切られています。インポートされた php ファイルには、次のような受け渡しパラメーターが含まれています: test.php?name=Adam&site=61dh.com 4 $("#
myID").load("test.php",{ ' myinfo[]', ["Adam", "61dh.com"]});
//インポートされた php ファイルにはパラメータを渡す配列が含まれています。
ここに画像の説明を挿入します

(2) $.html() $.append()
ここに画像の説明を挿入します
(3) ここでは紹介しませんが、誰もが知っている iframe を使用します
(4) オブジェクトを使用します
ここに画像の説明を挿入します
(5) ネイティブ JavaScript メソッド
i: insertAdjacentHTML このメソッドはスクリプトを実行しません
ここに画像の説明を挿入します
ii :document.write() は iii:innerHTML を完全にカバーしており
ここに画像の説明を挿入します
、要素に対して正確である可能性がありますが、スクリプト
ここに画像の説明を挿入します
iv:document.createDocumentFragment(); ドキュメントの断片化操作は実行されません (ここでは詳しく説明しません)。

次に、angular で使用法を追加し、angular で a タグを使用し、target="xxxxx" を使用してルーティングします。

おすすめ

転載: blog.csdn.net/wangbiao9292/article/details/126963337