MEAN Stack express 和 angular 之间的路由如何工作？

Question

我使用 express static 指向公共目录

//app.js
app.use(express.static( __dirname + '/public'));

我怎样才能拥有它，所以 UI 的大部分路由都来自 AngularJS，截至目前，除非在 app.js 上我指定类似这样的东西，否则它不起作用

//app.js
app.get('/submit', function(req,res){
    res.sendfile(__dirname + '/public/submit.html');
}); 

app.get('/schedule', function(req,res){
    res.sendfile(__dirname + '/public/schedule.html');
}); 

如果我删除上述部分，并创建 /public/app.js 代替，它不起作用

// Declare app level module which depends on filters, and services
angular.module('myApp', ['page-ctrl']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'index.html',
        controller: LoginController
      }).
      when('/submit', {
        templateUrl: 'submit.html',
        controller: AddPostCtrl
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

简单地说，我需要在 express 上指向 index.html，然后路由应该通过 Angular 完成，这样我可以检查登录身份验证并重新路由到索引页面，如果用户没有登录并尝试访问其他页面。

这就是我对 app.js (express) 的要求 --> /project/app.js

/*app.js*/

//dependencies
var fs          = require('fs');
var http        = require('http');
var https       = require('https');
var express     = require('express');
var mongoose    = require('mongoose');
var bodyParser  = require('body-parser');

//variables
var db;
if(process.env.ENV == 'Test')
    db = mongoose.connect('mongodb://localhost/videoRequestAPI_Test');
else
    db = mongoose.connect('mongodb://localhost/videoRequestAPI');

var app                     = express();
var port                    = process.env.PORT || 13337;
var debug                   = process.env.DEBUG || false;

/**/app.use(express.static( __dirname + '/public'));/**/
/**/app.use(bodyParser.urlencoded({extended: true}));/**/       
/**/app.use(bodyParser.json());             /**/    

// route middleware that will happen on every request
var routes = require('./routes');
//app.get('/', routes.index);
app.get('*', function(req, res){
    res.sendfile(__dirname + '/public/index.html');
});


var httpServer              = http.createServer(app);

httpServer.listen(80);

console.log("Server Running! Ports 80 open for traffic");

这是 index.html --> myproject/public/index.html

<!DOCTYPE html>
<html ng-app="page-ctrl">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/abc.css">

        <script src="js/scripts/bootstrap.min.js"></script>
        <script src="js/scripts/angular-local-storage.min.js"></script>
        <script src="js/scripts/ui-bootstrap-custom-0.13.0.js"></script>
        <script src="js/scripts/ui-bootstrap-custom-tpls-0.13.0.js"></script>       

        <script src="js/controllers/pageController.js"></script>
        <script src="js/controllers/loginController.js"></script>

        <script src="js/services/services.js"></script>
    </head>
    <body>      
        <nav class="navbar navbar-fixed-top" >
            <aside class="col-sm-7" text-align="center">
                <img src="img/sd.png" class="logo">
            </aside>
                    <ul class="nav nav-pills">
                        <li role="presentation" class="nav-btn"><a href="/submit">Submit Content</a></li>
                        <li role="presentation" class="nav-btn"><a href="/schedule">Scheduled Content</a></li>
                        <li role="presentation" class="nav-btn active"><a href="/requests">Pending Content</a></li>
                    </ul>           
        </nav>
        <div class="container">
        <div ng-controller="LoginController">
            <input ng-model="email" type="email" class="form-control limit" placeholder="Email">
            <input ng-model="credentials" type="password" class="form-control limit" placeholder="Credentials">
            <button ng-click="login()" class="btn btn-primary btn-default" type="button" data-dismiss="modal">Login</button>
        </div>
</div>  

        <footer class="footer">
            &copy; (June 2015)
        </footer>
    </body>
</html>

Answer 1

在你的 router.js 中首先执行所有 API 路由，然后是 Angular 的通配符路由，如下所示：

//API routes first
app.get('/API/users', UserController.getUsers);
app.get('/API/user/:id', UserController.getUserById);


//Then let Angular handle the rest of the routes
app.get('*', function(req,res){
   return res.sendFile(__dirname + '/public/index.html');
});

index.html 是 Angular 应用程序的起点。

还有一件事，确保 index.html 在“head”标签中包含以下内容：

<base href="/">

编辑： 一个很好的起点是查看这个很好的例子： https://github.com/scotch-io/starter-node-angular

并以相同的方式构建您的应用程序：

Answer 2

我通常会创建一个routes 和api 文件夹。

• 每个文件夹都包含一堆请求处理函数（req、res、next）。根据它们所服务的资源或功能在不同的文件中排序。

• 每个文件夹都有一个主文件（在我的例子中是 routes.js / api.js），它将所有函数映射到适当的 url / HTTP 方法。并且还在这些路由上调用身份验证。

• 这使您可以非常轻松地为 API 路由和普通路由使用不同的身份验证方法。

• 如果有人需要例如丢失的静态资产或未定义的路由，则调用 404 处理程序。这样页面就不会返回所有请求的索引页面。

例如 routes.js

module.exports = function(app) {

    function ensureAuthenticated(req, res, next) {
        // Authenticate....
    }

    function ensureAdmin(req, res, next) {
        // Check for admin
    }

    // Resource puppies
    app.all('/puppies*', ensureAuthenticated)

    // Series (File Upload & Conversion)
    app.get('/puppies', require('./puppie').someRoute)

    // Admin*
    app.all('/admin*', ensureAuthenticated, ensureAdmin)

    // Admin > User
    app.get('/admin/users', require('./admin').find)

    app.all('/', ensureAuthenticated, ensureActive, require('./index').index)

    // All undefined asset or api routes should return a 404
  app.route('/:url(api|auth|components|app|bower_components|assets|views)/*')
   .get(function(req, res, next) {
        var err = new Error('Resource not found: ' + req.url)
        res.status(404).send(err)
        })

    // Index
    app.all('/*', require('./index').index)
}

在 app.js 中你可以像这样使用这些路由

require('./routes/routes')(app)