Home > Developer > JavaScript
Angular. JS removes # From the access path URL,
Contents
I. Question about # Of the URL
All users who use AngularJS should understand that the AngularJS Framework defines their own front-end routing controllers and uses different URLs to refresh the deployment of views (ng-view) on one side (ng-app, it also supports the history record function of HTML5. For details, refer to the article: AngularJS routing and templates.
By default, the HTML5 mode is disabled. The URL contains a # sign to distinguish between the path managed by AngularJS and the path managed by WebServer.
For example, the following URL with # is the path managed by AngularJS.
http://onbook.me/http://onbook.me/#/http://onbook.me/#/bookhttp://onbook.me/#/about
This kind of experience is actually unfriendly, especially for people like me who like concise design. The appearance of # is not voluntary, so how can we feel uncomfortable. The AngularJS framework provides an HTML5 routing mode, which can be directly removed.
Set$locationProvider.html5Mode(true)That's all.
Book. config (['$ routeProvider', '$ locationProvider', function ($ routeProvider, $ locationProvider ){//.. code skipping 5 Mode (true);}]);
Supports HTML5 routing URLs.
http://onbook.me/http://onbook.me/bookhttp://onbook.me/about
The following problem arises: when the path is set in this way. If the user accesses from the home page (http://onbook.me/), then jump to the book page (http://onbook.me/book) Everything works. But if the user opens the book page directly (http://onbook.me/book), 404 error will occur.
That is why I had to use a URL with the # sign for a long time.
Ii. Locate the cause of the Error
So what is the cause of this problem? An error occurred while parsing the path.
From the beginning, AngularJS is a single-page application. An ng-app corresponds to a page and a URL. AngularJS implements its own front-end routing so that an ng-app can manage multiple URLs and then correspond to multiple ng-vews. When we access the URL (http://onbook.me/book), how to determine whether this path is WebServer background management URL or AngularJS foreground management URL?
In two cases:
1. If the user first access the home page (http://onbook.me), and then jump to the page (http://onbook.me/book), then this jump is managed by AngularJS foreground URL, access is normal.
2. When the user directly accesses the page (http://onbook.me/book), the request is first submitted to the WebServer background, the background route does not have the corresponding page (http://onbook.me/book) Routing Management, there will be a 404 error.
If you can understand this layer, it will be technically easy to solve. We asked WebServer to send all the routing URLs managed by AngularJS to ng-app to solve the 404 problem. At the same time, without the # number, you can also query HTML5 history records !!
There are two solutions:
1. Static Website: Pure front-end website (JS + HTML + CSS), providing Web services through Nginx.
2. Dynamic Website: front-end (JS + HTML + CSS) + back-end Node. js provides Web Services.
3. Static website Solutions
For static websites, we need to modify three files.
Index.html: ng-app definition file
App. js: corresponding to the ng-app Control File
Nginx. conf: nginx website configuration file
Edit index.html and add the base tag.
<Html lang = "zh-CN" ng-app = "book">Edit app. js and add
$locationProvider.html5Mode(true);Book. config (['$ routeProvider', '$ locationProvider', '$ sceProvider', 'tplprovider', function ($ routeProvider, $ locationProvider, $ sceProvider, tplProvider) {$ routeProvider. when ('/', {templateUrl: tplProvider.html ('Welcome '), controller: 'welcomectrl '}). when ('/Book', {templateUrl: tplProvider.html ('book'), controller: 'bookctrl'}) // book. when ('/book-r1', {templateUrl: tplProvider.html ('book-r1'), controller: 'bookr1ctrl '}) // R's geek ideal. when ('/video', {templateUrl: tplProvider.html ('video'), controller: 'videoctrl'}) // video. when ('/about', {templateUrl: tplProvider.html ('about'), controller: 'aboutctrl'}) // about the author. otherwise ({redirectTo: '/'}); limit 5 Mode (true) ;}]);Edit the nginx configuration file and add the try_files configuration.
server { set $htdocs /www/deploy/mysite/onbook; listen 80; server_name onbook.me; location / { root $htdocs; try_files $uri $uri/ /index.html =404; }}In this way, the static website is done, and there is no trouble #, you can directly access and refresh any page.
4. Dynamic Website Solutions
For dynamic websites, we also need to modify three files.
Index.html: ng-app definition file
App. js: corresponding to the ng-app Control File
Server. js: route access control file of Express framework
The index.html and app. js files are modified in the same way as static website solutions. Dynamic websites generally use Web servers to manage routes instead of directly routing through Nginx. Suppose we are using the Node. js Express Web framework.
Open the route access control file server. js of Express framework and add route configuration.
App. use (function (req, res) {console. log (req. path); if (req. path. indexOf ('/api')> = 0) {res. send ("server text");} else {// angular startup page res. sendfile ('app/index.html ');}});Set the ng-app(index.html) That is forwarded to angularjswhen the site path (req. path) does not include/api ). So, when we directly access the address (http://onbook.me/book),/book does not include/api, it will be directly forwarded to AngularJS for routing management. We have achieved route optimization!
Summary
The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
