AngularJS ui.router无法呈现视图[Node.js]
[英]AngularJS ui.router not rendering view [Node.js]
问题描述
I am trying to create simple web application on MEAN stack. 
我正在尝试在MEAN堆栈上创建简单的Web应用程序。
I have a trouble with routing in application. 我在应用程序中路由时遇到麻烦。 When I make request to index page(localhost:3000/), it works well, but when I am trying to request localhost:3000/exposition page, it responses me JSON instead of html template. 当我请求索引页面（localhost：3000 /）时，它工作良好，但是当我尝试请求localhost：3000 / exposition页面时，它会响应我JSON，而不是html模板。
This is my code of index.html 这是我的index.html代码
<!DOCTYPE html>
<html lang="en" ng-app="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>Expotest</title>
</head>
<body ng-controller="AppCtrl">
<div ng-include="'app/header.tpl.html'"></div>
<div ui-view class="container-fluid"></div>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/angular-full/angular.min.js"></script>
<script src="vendor/angular-full/angular-resource.min.js"></script>
<script src="vendor/angular-full/angular-cookies.min.js"></script>
<script src="vendor/angular-moment/angular-moment.js"></script>
<script src="vendor/ngstorage/ngStorage.min.js"></script>
<script src="vendor/angular-ui-router/angular-ui-router.min.js"></script>
<script src="vendor/angular-http-auth/http-auth-interceptor.js"></script>
<script src="app/app.js"></script>
<script src="app/exposition/exposition.js"></script>
<script src="app/exposition/ExpositionServices.js"></script>
</body>
This is my app.js 这是我的app.js
angular.module('app', [
'ngResource',
'ngCookies',
'exposition',
'ui.router'
]);
angular.module('app').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('index', {
url: "/",
templateUrl: "app/index.tpl.html",
controller: 'AppCtrl'
});
}]);
angular.module('app').controller('AppCtrl', ['$scope','$location', function($scope,$location) {
}]);
angular.module('app').controller('HeaderCtrl', ['$scope','$location', function($scope,$location) {
}]);
I have tried to divide logic of modules in different files. 我试图将模块的逻辑划分为不同的文件。 So, my exposition.js 所以，我的exposition.js
var expositionApp = angular.module('exposition', ['ngResource', 'ui.router', 'exposition.services', 'angularMoment']);
expositionApp.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('exposition', {
url: "/exposition/",
templateUrl: 'app/exposition/list.tpl.html',
controller: 'ExpositionsController'
})
.state('exposition.create', {
url: "/exposition/create/",
templateUrl: 'app/exposition/create.tpl.html',
controller: 'ExpositionsController'
})
.state('exposition.view', {
url: "/exposition/:id/",
templateUrl: 'app/exposition/details.tpl.html',
controller: 'ExpositionsController'
})
.state('exposition.edit', {
url: "/exposition/:id/edit/",
templateUrl: 'app/exposition/edit.tpl.html',
controller: 'ExpositionsController'
});
}
]);
expositionApp.controller('ExpositionController', ['$scope', '$resource', '$state', '$location', 'ExpositionUpdateService',
function ($scope, $resource, $state, $location, ExpositionUpdateService) {
...
}
]);
ExpositionService.js ExpositionService.js
var module = angular.module('exposition.services', ['ngResource']);
module.factory('ExpositionUpdateService', function ($resource) {
return $resource('exposition/:id',
{
id: '@id'
},
{
'update': {method: 'PUT'}
},
{
'get': {method: 'GET', isArray: false}
},
{
'delete': {method: 'DELETE'}
}
);
});
What is wrong with my code? 我的代码有什么问题？
Thank you! 谢谢！
My routes.js 我的routes.js
var index = require('../routes/index');
var expositions = require('../routes/exposition');
module.exports = function (app){
app.use('/', index);
app.use('/exposition',expositions);
}
And app.js 和app.js
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'client/src')));
app.use('/vendor',express.static(path.join(__dirname, 'client/vendor')));
app.use('/app',express.static(path.join(__dirname, 'client/src/app')));
app.use('/common',express.static(path.join(__dirname, 'client/src/common')));
app.use('/assets',express.static(path.join(__dirname, 'client/src/assets')));
var connect = function(){
var options = {
server: {
socketOptions:{
keepAlive : 1
}
}
};
mongoose.connect(config.db,options);
};
connect();
mongoose.connection.on('error',console.log);
mongoose.connection.on('disconnected',connect);
require('./config/routes')(app);
require('./config/express')(app);
1 个解决方案
解决方案1
0 2016-02-05 06:27:02
mzulch is correct. mzulch是正确的。 This is the first step you need to stake, which will make the server send the index page whatever you throw at it. 这是您需要放样的第一步，这将使服务器向您发送的索引页都发送给您。 That is probably overkill but you can finetune. 这可能是多余的，但您可以微调。
module.exports = function (app){
app.use('/', index);
app.use('/exposition', index);
}
You will also need a <base> statement in your index.html 您还需要在index.html中使用<base>语句
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.