"Turn" Angularjs the # number in the URL removed

Original link:
http://blog.fens.me/angularjs-url/

Directory

1. The # # Problem with URLs
2. Find the cause of the error
3. Solutions for static web sites
4. Solutions for dynamic Websites

1. URL's # problem

Friends who use Angularjs should understand that the ANGULARJS framework defines its own front-end routing controller, which implements a single-sided (Ng-app) view (ng-view) deployment refresh with different URLs, and supports the HTML5 history feature. For more information, refer to the article: Angularjs Routing and templates.

For the default scenario, the HTML5 mode is not started, and a # number is included in the URL to distinguish between angularjs managed paths or webserver managed paths.

For example: Below the URL with the # number, is the path of ANGULARJS management.

• http://onbook.me/
• http://onbook.me/#/
• Http://onbook.me/#/book
• Http://onbook.me/#/about

This experience is not very friendly, especially like I like the simple design of people, #号的出现非我自愿的, how to see how uncomfortable. The ANGULARJS framework provides a route to HTML5 mode that can be removed directly from the # number.

By setting $locationprovider.html5mode (True) it is OK.

book.config([‘$routeProvider‘, ‘$locationProvider‘, function ($routeProvider, $locationProvider) {   //..省略代码    $locationProvider.html5Mode(true);}]);

The routing URL that supports HTML5.

• http://onbook.me/
• Http://onbook.me/book
• Http://onbook.me/about

The next question comes when the path is set in this way. If the user starts from the first page (http://onbook.me/) and then jumps to the book page (Http://onbook.me/book) everything is OK. However, if the user opens the book page (Http://onbook.me/book) directly, a 404 error will occur.

It was this problem that tangled me for so long that I had to use the URL with the # number.

2. Find the cause of the error

So, what is the cause of the problem? An error occurred on the path resolution.

Let me start from the beginning, Angularjs is a single page application, a ng-app corresponding to a page, a URL. ANGULARJS implements its own front-end routing, allowing a ng-app to manage multiple URLs, which can be mapped to multiple ng-vew. When we go to visit the URL (http://onbook.me/book), how to determine whether this path is WebServer admin URL or angularjs front-end management URL?

See in 2 different situations:

• 1. If the user first visit the homepage (http://onbook.me), and then jump to the page (Http://onbook.me/book), then this jump is managed by the Angularjs front desk URL, access is normal.
• 2. When the user directly accesses the page (Http://onbook.me/book), the request is submitted to the webserver background, the background route does not have the corresponding page (http://onbook.me/book) of the route management, there will be 404 error.

If you can figure this out, it's technically easy to solve. We let webserver belong to angularjs management route URL, all sent to Ng-app can solve 404 of the problem, at the same time, no # number, also support HTML5 history query!!

The implementation is divided into 2 types of solutions:

• 1. Static Web site: A purely front-desk website (JS+HTML+CSS) that provides Web services via Nginx.
• 2. Dynamic website: Front desk (js + HTML + CSS) + background node. JS provides Web services.

3. Static website Solutions

Static website, we need to modify the place including 3 files

• Definition file for Index.html:ng-app
• App.js: Control file corresponding to Ng-app
• Nginx.conf:nginx's Web site configuration file

Edit index.html, add base tag.

Edit App.js, 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‘}) //图书 .when(‘/book-r1‘, {templateUrl: tplProvider.html(‘book-r1‘), controller: ‘BookR1Ctrl‘}) //R的极客理想 .when(‘/video‘, {templateUrl: tplProvider.html(‘video‘), controller: ‘VideoCtrl‘}) //视频 .when(‘/about‘, {templateUrl: tplProvider.html(‘about‘), controller: ‘AboutCtrl‘}) //关于作者 .otherwise({redirectTo: ‘/‘}); $locationProvider.html5Mode(true);}]);

Edit Nginx configuration file to add 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 site is done, no trouble in the #, you can directly access and refresh any page.

4. Dynamic Website Solutions

Dynamic website, we also need to modify the place including 3 files.

• Definition file for Index.html:ng-app
• App.js: Control file corresponding to Ng-app
• Server.js:Express Framework's Routing access control file

Index.html and app.js two files modified, with static website solution. Dynamic Web sites, which are typically not routed through Nginx, but manage routing through a Web server. Let's say we're using the web framework of node. JS's Express.

Open the Express framework's Routing access control file Server.js, increasing the routing configuration.

app.use(function (req, res) {    console.log(req.path);    if(req.path.indexOf(‘/api‘)>=0){        res.send("server text");    }else{ //angular启动页        res.sendfile(‘app/index.html‘);    }});

Sets the Ng-app (index.html) that is forwarded to ANGULARJS when the in-Station path (REQ.PATH) does not include/API. Therefore, when we direct access to the address (Http://onbook.me/book),/book does not include/API, it is forwarded directly to ANGULARJS for routing management. We've achieved the optimization of the route!

"Turn" Angularjs the # number in the URL removed