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

我正在尝试在MEAN堆栈上创建简单的Web应用程序。AngularJS ui.router not rendering view [Node.js]

我在应用程序中路由有问题。当我向索引页面（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) { 

}]);

我曾尝试在不同的文件划分模块的逻辑。所以，我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

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

来源

2016-02-05 Sanat Serikuly

如果您收到JSON，这可能意味着该服务器在为您的API途径之一。它也看起来像你的API的展览可能使用角度相同的路线。如果你把所有的API路径放在'/ api /'之类的东西里，并且为所有其他路由提供'index.html'，并让其他角色处理其他路径，可能会更容易 – mzulch

Hi @mzulc谢谢！我更新了我的问题，提供了我的node.js应用程序的app.js和routes.js。 –

mzulch是正确的。这是你需要放置的第一步，这将使服务器发送索引页面，无论你扔在哪里。这可能是矫枉过正，但你可以微调。

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

}

您还需要一个<base>声明在您的index.html

来源

2016-02-05 06:27:02

我改变了我的路线文件，就像你提到的那样，但它仍然会回应JSON。 –

现在它总是响应/索引控制器。 –

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

回答

相关问题