Introduce html single page into angular

Requirements:
We need to be able to route to a static Html page in angular. Here we need to solve the permission problem in routing.

Solution:
1 Let’s first recall how we introduce another html page into an Html in native.

(1) Use jQuery’s load method

load( url, [data], [callback] )
url: refers to the address of the file to be imported
data: optional parameter; because Load can not only import static html files, but also dynamic scripts, such as PHP files, so you need to When importing a dynamic file, we can put the parameters to be passed here
callback: optional parameter; refers to another function that is executed after calling the load method and getting a response from the server.
Example:
1 $("#myID") .load("test.php"); //Result 2
after importing test.php into the element with ID #myID $ ("#myID").load("test.php",{"name" :
"Adam"});
//The imported php file contains a passing parameter, similar to: test.php?name=Adam
3 $("#myID").load("test.php",{"name" : " Adam", "site": "61dh.com"});
Load a php file that contains multiple passed parameters. Note: The parameters are separated by commas. The imported php file contains a passing parameter, similar to: test.php?name=Adam&site=61dh.com
4 $("#myID").load("test.php",{' myinfo[]', ["Adam", "61dh.com"]});
//The imported php file contains an array passing parameter.
Insert image description here

(2) $.html() $.append()
Insert image description here
(3) Use iframe, which will not be introduced here, everyone knows it
(4) Use object
Insert image description here
(5) Native javascript method
i: insertAdjacentHTML This method will not execute script
Insert image description here
ii :document.write() fully covers
Insert image description here
iii:innerHTML and can be accurate to the element, but will not execute script
Insert image description here
iv:document.createDocumentFragment(); document fragmentation operation, which will not be introduced in detail here.

Then add the usage in angular, use the a tag in angular, and use target="xxxxx" to route

Guess you like

Origin blog.csdn.net/wangbiao9292/article/details/126963337