Mean Stack – 使用Express来发送AngularJS的所有静态内容
我已经做了几个节点的应用程序，并在前端使用Angular，但我从来没有把两者结合起来。 如果在发送index.html时将所有视图发送到前端，我完全失去了它。 目前我在我的服务器中有以下代码：
... app.use(express.static('./app')); app.listen(config.port, function() { logger.info('Server listening on ' + config.port); }); .... app.get('/update', auth.isLoggedIn, (req, res) => { byo.userUpdate(res); }) app.get('/*', function(req, res) { res.sendFile(__dirname + '/app/index.html');//'/public/index.html'); }) /////////
HTML Template: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.scss"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"> </script> <!-- endbuild --> </head> <body ng-app="uptimeApp"> <!-- Add your site or application content here --> <div class="header"> <div class="navbar navbar-default" role="navigation"> <div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar">asdasd</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Uptime Robot</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="">Home</a></li> <!-- <li><a href="#link">Link</a></li> <li><a href="#link">Link</a></li> --> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <!--- Main Angular VIEW --> <div ng-view></div> </div> <div class="footer"> <div class="container"> <p><span class="glyphicon glyphicon-heart"></span> from the support team</p> </div> </div> <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-touch/angular-touch.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/byo.js"></script> <script src="scripts/controllers/about.js"></script> <!-- endbuild --> </body> </html>
byo.js（被main.js）：
angular.module('uptimeApp') .controller('byoCTRL', function () { this.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma' ]; });
About.js：
angular.module('uptimeApp') .controller('AboutCtrl', function () { this.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma' ]; });
app.js：
angular .module('uptimeApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch' ]) .config(function ($routeProvider, $locationProvider, $httpProvider) { $routeProvider .when('/', { templateUrl: 'views/byo.html', controller: 'byoCTRL', controllerAs: 'byo' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl', controllerAs: 'about' }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); });
//////
my static file structure is as such: -app --images --scripts |-controllers |-service |-app.js (angular routing file) --views |-byo.html |-about.html --index.html
当我运行我的服务器，并导航到本地：8080 / index.html页面加载按预期。 当我检查开发工具时，包含在html页眉/页脚中的所有css文件和js文件都按预期包含在内。 但是，我没有看到任何地方的任何额外的HTML文件。 因为ng-view没有被加载，索引页面留下了一个空的主体。
Angular routing: ... .config(function ($routeProvider, $locationProvider, $httpProvider) { $routeProvider .when('/', { templateUrl: 'views/byo.html', controller: 'byoCTRL', controllerAs: 'byo' }) ...
我有这样的感觉，我错过了一些非常基本的东西，但无法弄清楚。 经过研究，我发现了很多与模板引擎相关的文章，但我不想使用一个（我必须？）。 任何帮助非常感谢，如果有任何额外的信息，我可以提供请让我知道。
谢谢！
由于您的资源加载顺序，看起来像byoCtrl是未知的。 尝试切换您的加载顺序，所以当ngRoutes config（）命中时，byo控制器可用。
<script src="scripts/controllers/byo.js"></script> <script src="scripts/controllers/about.js"></script> <script src="scripts/app.js"></script>
让你的快速应用程序只发送你的index.html当你点击你的域的根目录：
app.get('/', function(req, res) { res.sendFile(__dirname + '/app/index.html');//'/public/index.html'); })