angular.js - angularjs and jquery-mobile conflict on front-end routing

Question

Currently, the partial view is refreshed. Some styles of jquery-mobile will become invalid and the entire page needs to be forced to be refreshed.
How to refresh the entire page?

Supplement: If you use location.replace(), first use location.replace('page/page1.html) to directly locate the specific location. In this case, you will only have the code of that page. In fact, that page is a template page, then the template page is pure HTML, without CSS. part.
Then using location.replace(#page1) just switches the partial view and has no effect.
If it is $location.reload(), it will jump to the location defined by / in the route instead of refreshing the current page…………
How to refresh the current entire page? or

How to configure the routing? Should refreshing the page refresh the current page instead of jumping to the homepage?

If the current page is http://localhost:8080/#/setting
After F5 is http://localhost:8080/setting#/
Then route to otherwise, which is /

Original question: How to refresh the entire page in angular?

Answer 1

Solution process

You need to force refresh the entire page. Partial refresh is not possible
It’s the effect of F5
=====================>
Found after refreshing url会变化
If the url does not change, then we can use window.reload
So we need to solve the problem of URL changes
=====================>
Because the page keeps reporting error loading page error
I checked and this is from jquery-mobile
Then I blocked the JS and CSS files of JQM and found URL变化是JQM引起的
Find related solutions
=====================>
Oh, if you want to persistjquery-mobile+angular
You need to use jqm's page jump.
=====================>
Front-end UI framework by jquery-mobile替换为bootstrap

Conclusion

jqm和angular关于前端路由方面有冲突,
If you insist on using jqm, you cannot use angular's front-end routing. You must use jqm's jq to write page jumps, which may cause the page to be messy.
So it took half a day to replace it with bootstrap.

Answer 2

location.href? location.hash?

Answer 3

If this is not easy to use, just use jquery, what do you think

Answer 4

I don’t know why, but I really want to help you when I see your situation. Currently I am also integrating JQM and Angularjs and have some ideas!
Specifically, configure some parameters when initializing jqm:

    $( document ).on( "mobileinit", function() {
        $.mobile.page.prototype.options.domCache = false;// 关闭缓存
        $.mobile.initializePage = false;
        $.mobile.defaultPageTransition = "fade";
        $.mobile.autoInitializePage = true;
        $.mobile.hideUrlBar = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.ajaxEnabled = false;

    });

Please refer to the official API documentation for each configuration.
One of these configurations is to solve the URL conflict problem, which is to turn off JQM routing.