文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS ui.router不渲染视图[Node.js]

问AngularJS ui.router不渲染视图[Node.js]
EN

Stack Overflow用户

提问于 2016-02-05 13:33:54

回答 1查看 212关注 0票数 0

我正在尝试创建简单的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) {

}]);

我尝试将模块的逻辑划分到不同的文件中。所以，我的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);

javascript

angularjs

node.js

angular-ui-router

回答 1

Stack Overflow用户

发布于 2016-02-05 14:27:02

mzulch是正确的。这是您需要关注的第一步，它将使服务器发送您所处理的任何内容的索引页。这可能有点过头了，但你可以进行微调。

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

}

您的index.html中还需要一条<base>语句

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35216973

复制

相似问题

问AngularJS ui.router不渲染视图[Node.js]
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS ui.router不渲染视图[Node.js]EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS ui.router不渲染视图[Node.js]
EN