Friends who use AngularJS should know that AngularJS framework defines its own front-end routing controller, which realizes the deployment and refresh of ng-view by ng-app through different URLs, and supports the historical function of HTML5. For details, please refer to the article AngularJS Routing and Template.
By default, HTML5 mode is not enabled, and the URL will contain a # sign to distinguish the path managed by AngularJS from the path managed by WebServer.
For example, the URL with # below is the path managed by AngularJS.
This experience is actually not very friendly, especially for people like me who like simple design. The appearance of # is not my own will, so how uncomfortable it is. AngularJS framework provides routing in HTML5 mode, which can directly remove the # sign.
Just set $ locationprovider.html5mode (true).
book.config(['$routeProvider '，' $locationProvider '，function ($routeProvider，$locationProvider) {
//.. Omit the code
$ location provider . html 5 mode(true)；
}]);
Routing URL supporting HTML5.
This is the problem that has been bothering me for a long time, so I will use the URL with #.
Second, find the cause of the error.
So, where is the cause of this problem? Error in path resolution.
Let me start from the beginning. AngularJS is a single-page application, and 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-vew. When we visit URL(/book), how can we determine whether this path is managed by WebServer in the background or AngularJS in the foreground?
From two aspects:
1. If the user visits the homepage () first, and then jumps to the page (/book), the URL managed by AngularJS will jump, and the access is normal.
2. When a user directly accesses a page (/book), the request is first submitted to the WebServer background, and there is no routing management for the corresponding page (/book) in the background, so a 404 error will occur.
If you can understand this layer, it will be very easy to solve it technically. We can solve the 404 problem by asking the WebServer to forward all routing URLs managed by AngularJS to ng-app. At the same time, there is no # sign, and historical query of HTML5 is also supported! !
Implementation can be divided into two solutions:
1. static website: pure foreground website (JS+HTML+CSS), which provides web services through Nginx.
2. Dynamic website: the foreground (JS+HTML+CSS)+ background Node.js provides web services.
Third, the solution of static website
The static website we need to modify includes three files.
Index.html: the definition file of ng-app.
App.js: control file corresponding to ng-app.
Nginx.conf: nginx's website configuration file.
Edit index.html and add basic tags.
& lthtml lang = " zh-CN " ng-app = " book " & gt；
& lthead & gt
& ltbase href = "/" rel = " external no follow " >
//omit the code
& lt/head & gt；
Edit app.js and add $ locationprovider.html5mode (true);
book.config(['$routeProvider '，' $locationProvider '，' $sceProvider '，' tplProvider '，function ($routeProvider，$locationProvider，$sceProvider，tplProvider) {
$routeProvider
. when('/'，{ template URL:TPL provider . html(' welcome ')，controller: 'WelcomeCtrl'})
. When ('/book', {template URL:tplprovider.html(' book'), controller:' bookctrl'})//book.
. When ('/book-r 1'), {template URL: tplprovider.html ('book-r1'), controller:' book1ctrl'})/r's geek ideal.
. When ('/video'), {template URL:tplprovider.html(' video'), controller:' videoctrl'})//video.
. When ('/about', {template URL: tplprovider.html ('about'), controller:' About ctrl' })// About the author.
. Otherwise ({redirect o:'/'});
$ location provider . html 5 mode(true)；
}]);
Edit nginx's configuration file and add try_files configuration.
Server {
set＄htdocs/www/deploy/my site/on book；
Listen to 80;
server _ name onbook.me
Location/{
root $ htdocs
try _ files $ uri $ uri//index . html = 404；
}
}
In this way, the static website is ready, and there is no troublesome number, so you can directly visit and refresh any page.
Fourthly, the solution of dynamic website.
We also need to modify the dynamic website including three files.
Index.html: the definition file of ng-app.
App.js: control file corresponding to ng-app.
Server.js: the routing access control file of the express framework.
Modify Index.html and app.js, just like the solution of static website. Generally speaking, dynamic Websites are not directly routed through Nginx, but managed through a web server. Suppose we use the Web framework of Express of Node.js
Open the routing access control file server.js of Express framework to increase the routing configuration.
app.use(function (req，res) {
console . log(req . path)；
if(req . path . index of('/API ')& gt； =0){
Res.send ("server text");
}else{ //angular startup page
RES . sendfile(' app/index . html ')；
}
});
Set ng-app(index.html) that will be forwarded to AngularJS when the intra-station path (req.path) does not contain /api. Therefore, when we directly access the address (/book), /book does not contain /api, and it will be directly forwarded to AngularJS for routing management. We have realized the optimization of routing!