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]

回答

相關問題