MEAN角UI路由器不加载状态

问题描述：

我建立使用meanstack网站。但是，它无法加载我在app.j中定义的任何状态。并且控制台中没有显示错误，并且每个js文件都已成功加载。这里是我的index.html：MEAN角UI路由器不加载状态

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <base href="/"></base> 
    <title>E-study</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" type="text/css" href="angular-loading-bar/build/loading-bar.css"> 
    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="app.less"> 
    <!-- <link rel="stylesheet" type="text/css" href="app/_naut/less/styles.less"> --> 
    </head> 
    <body ng-app="E-study"> 
     <div id="main"> 
      <div id="topbar" class="topbar" style="width: auto;"> 
       <div class="fill"> 
        <div class="container"> 
         <h1 style="align: center;">E-study - a website for English self study</h1> 
        </div> 
       </div> 
      </div> 
      <div data-ui-view data-autoscroll="false" class="app-container ng-scope"></div> 
     </div> 
    </body> 
</html>

app.js：

'use strict'; 

var Estudy = angular.module('E-study', ['ngCookies', 'ngResource', 'ngSanitize', 'ui.router', 'naut']); 
Estudy.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', 'RouteProvider', function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider, Route){ 
    $stateProvider 
    .state('login', { 
     url: '/login', 
     templateUrl: 'client/views/login.html', 
     controller: 'loginCtrl' 
    }) 
    .state('signup', { 
     url: '/signup', 
     templateUrl: 'client/views/signup.html', 
     controller: 'signupCtrl' 
    }) 
    .state('recover', { 
     url: '/resetPwd', 
     templateUrl: 'client/views/recover.html', 
     controller: 'recoverCtrl' 
    }); 
    $urlRouterProvider.otherwise('/login'); 
    $locationProvider.html5Mode(true); 
    $httpProvider.interceptors.push('authInterceptor'); 
}]) 
.factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location){ 
    return{ 
     request: function (config){ 
      config.headers = config.headers || {}; 
      if ($cookieStore.get('token')) { 
       config.headers.Authorization = 'Bearer' + $cookieStore.get('token'); 
      }; 
      return config; 
     }, 

     responseError: function (response){ 
      if (response.status === 401) { 
       $location.path('/login'); 
       $cookieStore.remove('token'); 
       return $q.reject(response); 
      } else { 
       return $q.reject(response); 
      }; 
     } 
    }; 
}) 
.run(function($state){ 
    $state.go('login'); 
}); 
});

我运行根目录下的server.js，我的项目的整个文件目录为：file directory

谢谢。

你有index.html中添加app.js文件？当然是 – selvassn

。我可以通过源代码打开它。 – vivian

答

我已经找到了问题，那就是我定义了重复路线

app.use('/', function(req, res, err){ res.sendFile('index.html', {root: path.join(__dirname, '../client')}) })

在routes.js文件，并把它是前

app.route('/*').get(function (req, res){ res.sendFile('index.html', {root: path.join(__dirname, '../client')}); });

后，我删除了第一个代码，它正确地加载状态。

答

您需要配置ng-app在<html lang="en">标签。还需要调用（引用）要运行的index.html中的所有js文件。

如果你有3个js文件注入3个控制器。你应该在你的index.js文件中引用js文件。

我已经引用了index.html中的js文件，并且还在标记中添加了ng-app，但仍然不起作用。 – vivian

是的。现在你得到错误：对吗？请分享我的错误详情 –

这是最奇怪的部分，控制台中仍然没有显示错误。 – vivian

答

您还没有列入html..that脚本错误的原因。

只是将代码粘贴

<script src="/app.js"></script>

之前</head>标签中，使你的代码变得

<head> 
<!---here leave the code same and just add this bottom script tag --> 
<script src="/app.js"></script> 
</head>

如果您app.js是/var/www/html目录，如果它上面的代码才起作用在另一个目录说... /var/www/html/folder1/那么你必须使用..

<script src="/folder1/app.js"></script>

我希望你明白我在说什么......

我在index.thml中添加了''，我没有显示它，因为index.html中有太多js文件，而且我也不想让代码太多很长时间在这里阅读。 – vivian

答

在您的index.html文件中添加此

<main ui-view></main>

MEAN角UI路由器不加载状态

相关推荐