Question

我正在尝试在MEAN堆栈上创建简单的Web应用程序。

我在应用程序中遇到路由问题。当我向索引页面（localhost：3000 /）发出请求时，它运行良好，但是当我尝试请求localhost：3000 / exposition页面时，它会响应我JSON而不是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>

这是我的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) {

}]);

我试图在不同的文件中划分模块的逻辑。所以，我的博览会.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

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'}
        }
    );
});

我的代码出了什么问题？

谢谢！

我的routes.js

var index = require('../routes/index');
var expositions = require('../routes/exposition');
module.exports = function (app){
    app.use('/', index);
    app.use('/exposition',expositions);
}

和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);

Answer 1

mzulch是对的。这是您需要放弃的第一步，这将使服务器发送索引页面，无论您抛出它。这可能是矫枉过正，但你可以微调。

module.exports = function (app){
    app.use('/', index);
    app.use('/exposition', index);

}

您还需要在index.html

中使用<base>语句

AngularJS ui.router无法渲染视图[Node.js]

1 个答案: