AngularJS ui-route中URL内"!"符号的含义及路由URL差异问题

Hey there! Let's clear up that confusing ! in your URL—it's not a mistake, and it's totally tied to how AngularJS handles routing, especially in older versions of the framework.

What's the ! all about? #

That #!/ pattern is called hashbang mode, which was AngularJS 1.x's default way of handling single-page application routing back in the day. It was a workaround to address two key issues:

• Ensuring browser history worked correctly for SPA navigation (so the back/forward buttons behaved as expected).
• Helping early search engines crawl and index SPA content, since they couldn't interpret client-side routing at the time.

Why does the example use /#/home instead of /#!/home? #

There are two likely reasons for this difference:

1. AngularJS version discrepancy:
   • Before AngularJS 1.6, the framework automatically added ! as the hash prefix by default (via $locationProvider.hashPrefix('!')).
   • Starting with version 1.6, the default hash prefix was changed to an empty string. So if your sample project uses AngularJS 1.6+, it'll use /#/ instead of /#!/.
2. HTML5 Mode is enabled:
   The example might be using HTML5 Mode, which leverages the HTML5 History API to create cleaner URLs without the hash (or hashbang) entirely. But this requires extra server configuration to redirect all requests to your index.html file (otherwise, refreshing the page will throw a 404 error).

How can you adjust this in your project? #

If you want to remove the ! from your URLs, you have a couple of options:

Option 1: Change the hash prefix (keep hash-based routing) #

If you want to stick with hash routing but lose the !, add this to your AngularJS config block:

angular.module('yourAppName', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    // Your route definitions here
    $routeProvider.when('/home', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    });

    // Remove the ! prefix
    $locationProvider.hashPrefix('');
  });

Option 2: Enable HTML5 Mode (cleaner URLs) #

For URLs like http://localhost:8080/home, enable HTML5 Mode with these steps:

1. Add the base tag to your index.html <head>:

   <base href="/">
   

2. Update your AngularJS config:

   angular.module('yourAppName', ['ngRoute'])
     .config(function($routeProvider, $locationProvider) {
       $routeProvider.when('/home', {
         templateUrl: 'home.html',
         controller: 'HomeController'
       });
   
       // Enable HTML5 Mode
       $locationProvider.html5Mode(true);
     });
   

3. Critical: Configure your server to redirect all requests to index.html. For example:
   • Apache: Add a .htaccess file with rewrite rules.
   • Nginx: Add a try_files directive in your server block.

Don't worry—your app is working fine! #

The presence of the ! doesn't mean you missed a key configuration. It's just AngularJS using its older default routing pattern. As long as your navigation works, you're good to go. If you prefer the cleaner URL style, pick one of the options above to adjust it.

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