MEAN角度ui路由器未加載狀態
[英]MEAN angular ui-router doesn't load states
問題描述
我正在使用meanstack建立網站。 但是，它無法加載我在app.js中定義的任何狀態。 而且控制台中沒有顯示任何錯誤，並且每個js文件都已成功加載。 這是我的index.html：
<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，我項目的整個文件目錄為： 文件目錄
謝謝。
4 個解決方案
解決方案1
0 2017-01-03 09:24:43
您需要在<html lang="en">標簽中配置ng-app 。 並且您還需要調用（引用）要運行的index.html中的所有js文件。
如果您在3個js文件中注入了3個控制器。 您應該在index.js文件中引用該js文件。
解決方案2
0 2017-01-03 10:15:22
您尚未將腳本包含在html ..那是導致錯誤的原因。
只需粘貼代碼
<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>
解決方案3
0 2017-01-06 01:16:55
在您的index.html文件中添加此
<main ui-view></main>
解決方案4
0 已采納 2017-01-16 10:16:54
我發現了問題，即我定義了重復路線
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')}); });
刪除第一個代碼后，它將正確加載狀態。
Angular ui-router不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.