刷新时角度加载HTML索引而不是ng-app.js_Html_Angularjs_Node.js_Angular Ui Router_Mean Stack

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

html angularjs node.js

刷新时角度加载HTML索引而不是ng-app.js,html,angularjs,node.js,angular-ui-router,mean-stack,Html,Angularjs,Node.js,Angular Ui Router,Mean Stack,我正在尝试添加一个角度用户界面路由器，当我点击应用程序中的链接时，它工作得非常好。例如，如果我从/转到/feed/9，它将在/partials/post.html文件中加载到ui视图div中，然后我可以使用$stateParams中保存的“9”用post 9中的数据填充模板。但是，如果我刷新页面，站点会中断并尝试将index.html加载为ng-app.js文件？我不知道这里发生了什么。我上传了一些截图来演示这一点，我还包括了我的节点服务器、角度路由和相关的html部分。我不知道这是哪里出了问题

我正在尝试添加一个角度用户界面路由器，当我点击应用程序中的链接时，它工作得非常好。例如，如果我从

转到

/feed/9

，它将在

/partials/post.html

文件中加载到

ui视图

div中，然后我可以使用

$stateParams

中保存的“9”用post 9中的数据填充模板。但是，如果我刷新页面，站点会中断并尝试将index.html加载为ng-app.js文件？我不知道这里发生了什么。我上传了一些截图来演示这一点，我还包括了我的节点服务器、角度路由和相关的html部分。我不知道这是哪里出了问题，所以我可以提供任何额外的数据和任何帮助将不胜感激

来自“/”上的另一个链接时工作正常

刷新！！

Node-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>


//用于某些部分中的引导工具提示。
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
$（'[rel=tooltip]'）。tooltip（）；
});

/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>


{{id}

我认为您有指向css文件的相对路径。从

/feed/9

加载页面时，链接无效。

可能从angular引用的模板也会发生这种情况。

太棒了！非常感谢。将

更改为

src=“/ng app.js”

，效果非常出色！真不敢相信这就是全部！Hahatry

src=“/ng app.js”

；如果没有

，您将告诉浏览器从相对于当前路径的目录加载资源，而不是从文档根目录加载资源。单击angular中的链接时，它们不会强制浏览器加载新页面，因此不会再次加载

ng app.js

。但是，当您手动刷新或键入url时，它确实会导致浏览器执行该搜索。更好的是，不要将

.js

或

.css

文件存储在文档根目录中，而是存储在它们自己的目录中，以避免这种混乱。