Question

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

这是我的文件结构

这是我的代码：

的index.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>

Server.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

AboutController.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.
 */

about.html

<div>{{hello}}</div>

Answer 1

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

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

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

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

1 个答案: