All geek questions in one place

ExpressJS combined with AngularJS Routing without hashtag via links

I am trying to implement a routing function on my ExpressJS server.

http://localhost:3000/app/sub_one http://localhost:3000/app/sub_two

Unfortunately, I can do this work with the # prefix between the application name and the module. I was looking for a solution, and it seems that this code will do it in my angular configuration - $locationProvider.html5Mode(true); .

But if it is implemented and adjusts the link, access to the next link will lead to unusual behavior.

 http://localhost:3000/app/sub_one => Cannot GET /app/sub_one http://localhost:3000/app/sub_two => Cannot GET /app/sub_two

I may have an intuition that the problem is my routing to server.js .

 var port = 3000; var express = require("express"); var morgan = require("morgan"); var server = express(); server.use(morgan("tiny")); server.use("/app", express.static(__dirname + "/app")); server.use("/bower_components", express.static(__dirname + "/bower_components")); server.listen(port, function() { console.log("Node server initialized. Server port: " + port); });

I posted a repository for this problem on Bitbucket

+6
source share
1 answer

I may be mistaken in this, but it seems that you can confuse client-side routes with server-side routes.

Routes defined using ngRouter should not hit the server at all.

I modified your code to make it work. That should be enough to let you go on your own - if you have any questions, give me a shout.

Hidden repo with the changes below.

Files after changes:

config.js

 var angular = angular.module("NodeAngularJSRouting", ["ngRoute"]); angular.config(function($routeProvider, $locationProvider) { $routeProvider .when("/app/sub_one", { templateUrl: "/view/sub_view_one/list.html", controller: "SubViewOneCtrl" }) .when("/app/sub_two", { templateUrl: "/view/sub_view_two/list.html" }) .otherwise({ templateUrl: "/view/default/default.html", controller: "DefaultCtrl" }); $locationProvider.html5Mode(true); });

server.js

 var port = 3000; var express = require("express"); var morgan = require("morgan"); var server = express(); server.use(morgan("tiny")); // serve bower components statically server.use("/bower_components", express.static(__dirname + "/bower_components")); // for all routes defined on client side send // entry point to the app // btw. changes of those routes on client side // are not supposed to hit server at all (!) server.use("/app*", function(req, res, next){ res.sendFile(__dirname + '/app/main.html'); }); // for all public requests try to use /app folder server.use("/", express.static(__dirname + "/app")); server.listen(port, function() { console.log("Node server initialized. Server port: " + port); });

index.html

renamed to main.html

 <!DOCTYPE html> <html ng-app="NodeAngularJSRouting" > <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1"> <title>Node AngularJS Routing</title> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/view/css/styles.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="/app">Node AngularJS Route</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/app/sub_one">View One</a></li> <li><a href="/app/sub_two">View Two</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container" ng-view></div> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-route/angular-route.js"></script> <script src="/config/config.js"></script> <script src="/controller/default-default.js"></script> <script src="/controller/sub-one_list.js"></script> </body> </html>
+7
source

Source: https://habr.com/ru/post/979388/

More articles:


All Articles