AngularJS ui.router not rendering view [Node.js]

本文关键字：Node js view rendering ui router not AngularJS 更新时间：2023-09-26

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

我在应用程序中路由时遇到问题。当我向索引页面（localhost：3000/）发出请求时，它运行良好，但是当我尝试请求本地主机：3000/exposition page时，它会响应我的JSON而不是html模板。

这是我的索引代码.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>

这是我的应用程序.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) {
...
}
]);

展览服务.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'}
        }
    );
});

我的代码有什么问题？

谢谢！

我的路线.js

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

和应用程序.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);

mzulch是正确的。这是您需要质押的第一步，这将使服务器发送索引页，无论您扔给它什么。这可能是矫枉过正，但你可以微调。

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

索引中还需要一个<base>语句.html