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

【问题标题】：Angular loads HTML index instead of ng-app.js on refreshAngular 在刷新时加载 HTML 索引而不是 ng-app.js
【发布时间】：2015-11-25 05:09:04
【问题描述】：

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

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

刷新！！

节点 - 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>

【问题讨论】：

试试src="/ng-app.js";如果没有/，您是在告诉浏览器从相对于您当前路径的目录加载资源，而不是从文档根目录加载资源。当您单击 Angular 内的链接时，它们不会强制浏览器加载新页面，因此不会再次加载 ng-app.js。但是当您手动点击刷新或输入 url 时，它确实会导致浏览器执行该搜索。更好的是，不要将.js 或.css 文件存储在文档根目录中，而是存储在它们自己的目录中以避免这种混淆。

标签： html angularjs node.js angular-ui-router mean-stack

【解决方案1】：

我认为您有指向您的 css 文件的相对路径。当您从/feed/9 加载页面时，链接无效。也许从 angular 引用的模板也会发生这种情况。

【讨论】：

太棒了！谢谢！将<script type="text/javascript" src="ng-app.js"></script> 更改为src="/ng-app.js"，效果非常好！简直不敢相信就是这样！哈哈