URL中#后感叹号(!)的作用是什么？Angular教程相关疑问

Hey there! Let me break down that confusing #!/ in your URL from the Angular phonecat step-9 tutorial. This is a relic of older AngularJS (Angular 1.x) routing, and here's what you need to know:

What's the # for? #

You already have a grasp on this, but to tie it all together: the # in URLs is a fragment identifier. In single-page applications (SPAs) like the Angular phonecat app, everything after the # is handled entirely by your browser (the frontend) instead of being sent to the web server. This lets the app switch "pages" without reloading the entire site—core to how early SPAs worked.

What's the ! doing there? #

The ! paired with the # is part of Hashbang Mode, a convention that served two key purposes back when AngularJS was widely used:

1. SEO for AJAX Apps: Years ago, search engine crawlers struggled to parse dynamic content loaded by JavaScript (like in SPAs). Google introduced an AJAX crawling scheme where URLs with #!/ told crawlers: "Hey, this part after the ! is a dynamic route—fetch the rendered version of this content." Crawlers would convert #!/phones to ?_escaped_fragment_=phones and request that from the server, which would return a static, crawlable version of the page.
2. AngularJS Default Behavior: AngularJS 1.x came with Hashbang Mode enabled by default. It uses the $locationProvider.hashPrefix('!') configuration to automatically add that ! after the # for all routes. That's exactly why when you tried to remove the !, it kept coming back—the app's routing system was enforcing this default setting.

About that weird URL you saw #

When you removed the ! and it reset to http://angular.github.io/angular-phonecat/step-9/app/#!/phones#%2Fphones, the %2F is just the URL-encoded version of /. The double # here is a quirk of the routing system correcting your manual edit, but the critical part is still the initial #!/ that marks the Hashbang route.

As a quick side note: Modern Angular (2+) and most modern SPAs use History Mode instead, which uses clean URLs without # or !, since browsers and crawlers now handle dynamic content much better. But this Hashbang pattern was a big deal for early SPAs like the Angular phonecat example.

内容的提问来源于stack exchange，提问作者HardikT