Angular不会在页面重新加载时自动引导

时间:2015-03-26 02:33:30

标签: javascript angularjs

有些时候,当我通过浏览器重新加载按钮重新加载网页或更改页面网址时,Angular无法加载模块应用程序。

我正在使用angular 1.3.5 ,它们是我的模块依赖项和路由器:

app.js

var app = angular.module('aip.app', [
  'ngAnimate',    // Angular animation module.
  'ui.bootstrap', // Angular bootstrap directives module.
  'ui.router',    // Angular UI Router module.
  'aip.auth',     // Authentication module.
  'aip.common',   // Common directives and services module.
  'aip.i18n',     // Translation module.
  'app.templates' // Application templates.
]);

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

  /**
   * Routing application.
   */
  $stateProvider
    .state('login', {
      url: '/',
      templateUrl: 'src/app/components/auth/login/login.html',
      controller: 'LoginController',
      data: {
        checkSession: true,
        redirectOnChangeSession: true
      }
    })
    .state('logout', {
      url: '/logout',
      templateUrl: 'src/app/components/auth/logout/logout.html',
      controller: 'LogoutController',
      data: {
        checkSession: false
      }
    })
    .state('dashboard', {
      url: '/dashboard',
      templateUrl: 'src/app/components/dashboard/dashboard.html',
      data: {
        checkSession: true,
        redirectOnChangeSession: true
      }
    });

  // Use pretty urls
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });
});

index.html

  <html lang="en" ng-app="aip.app">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title ng-bind-template="{{$state.current.title || 'AIP'}}"></title>

    <!-- App style -->
    <link href="/css/app.css" rel="stylesheet">
    <link href="/img/favicon.ico" rel="shotcut icon">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">        </script>
        <![endif]-->
      </head>
      <body>
        <div ui-view class="page-view" ng-cloak ng-hide="loading"></div>
        <div class="loader text-center" ng-show="loading">
          <div class="spinner">
            <div class="cube1"></div>
            <div class="cube2"></div>
          </div>
          <h3 ng-cloak style="display: none" ng-style="displayMessage">{{ bootstrapMessage }}</h3>
        </div>
        <script src="/js/vendor.js" type="text/javascript"></script>
        <script src="/js/app.templates.js" type="text/javascript"></script>
        <script src="/js/app.js" type="text/javascript"></script>
      </body>
    </html>

server.js

app.all('/*', function(req, res, next) {
   res.sendFile('index.html', { root: __dirname + '/public' });
});

任何解决方案?

2 个答案:

答案 0 :(得分:0)

可能是html页面无法找到app.js ...尝试替换

<script src="/js/app.js" type="text/javascript"></script>

with this  


 <script src="./js/app.js" type="text/javascript"></script>

答案 1 :(得分:0)

我注意到当网址没有像*:3000之类的其他端口时(我之前一直在使用),但端口80完美无缺。