Angular 在刷新时加载 HTML 索引而不是 ng-app.js

Question

我正在尝试添加一个 Angular-UI 路由器，当我在我的应用程序中单击 links 时，它工作正常。例如，如果我从 / 转到 /feed/9，它会将 /partials/post.html 文件加载到 ui-view div 中，然后我可以使用 '9'保留在 $stateParams 中以使用 post 9 中的数据填充模板。但是，如果我刷新页面，站点会中断并且 Angular 尝试加载 index.html 作为 ng- app.js 文件？我不知道这里发生了什么。我已经上传了一些屏幕截图来演示这一点，并且包括了我的节点服务器、angular 路由和相关的 html 部分。我不知道这是哪里出了问题，所以我可以提供任何额外的数据，我们将不胜感激！

在“/”上来自另一个 link 时工作正常

刷新中！！

节点 - server.js

var = /* Dependencies and vars */;

mongoose.connect(dbConfig.url, dbConfig.options);

app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.use(bodyParser());
app.use(flash());

require('./routes/api.js')(app);      //For CRUD operations on the database
require('./routes/api_proc.js')(app); //Protected endpoints for CDN
require('./routes/api_ext.js')(app);  //For getting data from GCal, fb, Twitter and Instagram

/* The following code is a url rewrite to pass all
   further get requests that aren't defined in the
   above routing files through the index page and
   hence through the Angular 'frontend' routes */
app.use(function(req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

app.listen(port);

Angular ng-app.js

var app = angular.module('app', ['ui.bootstrap', 'ngResource', 'ui.router']);

//Using state ui-router
// ROUTES
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url : '/',
        templateUrl : 'partials/home.html'
    })

    /* ... */

    .state('feed', {
        url : '/feed',
        templateUrl : 'partials/feed.html'
    })
    .state('post', {
        url : '/feed/{id:.*}',
        templateUrl : 'partials/post.html',
        controller: 'postController'
    })

    $locationProvider.html5Mode(true);

});

app.factory("Feed", function($resource) {
  return $resource("/api/feed/:id", {}, {
      query: {
          isArray: true
      }
  });
});

app.controller("postController", function($scope, Feed, $stateParams) {
    var feed = Feed.query();
    feed.$promise.then(function(promiseData) {
        postArray = promiseData.slice(0,promiseData.length);
        $scope.feed = promiseData;
        $scope.id = $stateParams.id;
    });
});

index.html

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <!-- CDN -->
            <!-- Angular, Bootstrap, Angular modules, etc. -->

        <!-- Styles -->

        <!-- Angular Script import -->
            <script type="text/javascript" src="ng-app.js"></script>

        <base href="/">

        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>     
        <nav><!--Bootstrap nav--></nav>

        <div ui-view></div>

        <footer></footer>
        <script>
            //For Bootstrap tooltips which are in some of the partials.
            $(document).ready(function(){
                $('[data-toggle="tooltip"]').tooltip(); 
                $('[rel=tooltip]').tooltip();
            });
        </script>
    </body>
</html>

/partials/post.html

<div class="container-fluid main-content">         
    <header class="banner" class="row">
        <h1 class="page-title">{{id}}</h1>
    </header>

    <!-- Main page info -->
</div>

Answer 1

我认为您有指向 css 文件的相对路径。当您从 /feed/9 加载页面时，链接无效。也许它也发生在从 angular.

引用的模板中

Angular 在刷新时加载 HTML 索引而不是 ng-app.js

Angular loads HTML index instead of ng-app.js on refresh

html

node.js

angularjs

angular-ui-router

mean-stack