Expressjs - 角度加载未加载索引页面答案

【问题标题】：Expressjs - Angular loading not loading index pageExpressjs - 角度加载未加载索引页面
【发布时间】：2017-04-15 02:17:38
【问题描述】：

我在使用 expressjs 和 Angular 开发应用程序时遇到问题。我正在从我的索引页面加载角度、引导程序等。为了测试，我放了一个按钮<a ui-sref=about>about</a> 去about 页面。当我从index 页面单击按钮时，没问题。该页面与index.html 中使用的库一起加载，它控制台记录来自AboutController 的消息。但是，当我刷新页面 http://localhost:3000/about 时，页面加载时不会加载 angular、bootstrap 等库。我知道我的<script> 加载这些文件的标签在index.html 但我想知道是否有办法从http://localhost:3000/about 刷新页面并首先加载index，然后它会转到about 或者如果我的应用程序可以在刷新时加载索引中的文件，从而使 about 可以使用相同的文件。

这是我的文件结构

这是我的代码：

索引.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="/">
</head>
<body>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="home">Home</a></li>
 <ui-view></ui-view>

</body>
<script
        src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="lib/angular/angular.min.js" type="text/javascript"></script>
<script src="lib/angular/angular-ui-router.js" type="text/javascript"></script>
<script src="lib/angular/angular-animate.js" type="text/javascript"></script>
<script src="lib/angular/anim-in-out.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<script src="controllers/HomeController.js" type="text/javascript"></script>
<script src="controllers/AboutController.js" type="text/javascript"></script>
</html>

服务器.js

/**
 * Created by carlosgonzalez on 4/14/17.
 */
/**
 * Created by carlosgonzalez on 4/14/17.
 */
var express = require('express');
var app = express();
var path = require('path');
var PORT = process.env.PORT || 3000;

// app.use(express.static(path.join(__dirname, 'public')))

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


app.get('/', function (req,res,next) {

    res.sendFile('index.html');

})


app.get('/about', function (req,res) {

    res.sendFile(__dirname+'/public/partials/about.html');

})

app.listen(PORT, function () {
    console.log("Server running in PORT " + PORT);
});

main.js

/**
 * Created by carlosgonzalez on 4/5/17.
 */
var myApp = angular.module('myApp',['ui.router']);


console.log("in myApp");

myApp.config( function ($stateProvider, $locationProvider) {

    $stateProvider
        .state('home',{
            url:'/home',
            templateUrl:'/partials/home.html',
            controller:'HomeController'


        })
        .state('about',{
            url:'/about',
            templateUrl:'/partials/about.html',
            controller:'AboutController'


        })

    $locationProvider.html5Mode(true).hashPrefix('/#!/');
    // $locationProvider.html5Mode(true);
})

// /test.html#!/about

关于Controller.js

/**
 * Created by carlosgonzalez on 4/14/17.
 */
/**
 * Created by carlosgonzalez on 4/5/17.
 */
myApp.controller('AboutController',['$scope','$rootScope', '$rootScope', '$scope',
    function($rootScope, $scope) {


        console.log("Hello from about controller");

        $scope.hello = 'about';

    }]);/**
 * Created by carlosgonzalez on 4/14/17.
 */

关于.html

&lt;div&gt;{{hello}}&lt;/div&gt;

【问题讨论】：

请不要用angular 标记AngularJS 问题。请改用angularjs 标签。 angular 适用于 Angular 版本 2 及更高版本。谢谢。
当然，没问题。

标签： angularjs express routing angular-ui-router

【解决方案1】：

您需要更改 server.js 以使其呈现 index.html。

app.get('/about', function (req,res) {
    res.sendFile('index.html');
})

一旦 index.html 被渲染，ui-router 将触发浏览器内路由并正确显示您的 about 页面。

【讨论】：

如果你的应用是一个完整的 SPA，你可以使用app.get('*', function (req,res) {}) 发送index.html 对所有的获取请求
非常感谢这对我有用！总是最简单的事情。