单页面应用程序中的路由问题

时间:2018-04-11 15:09:40

标签: angularjs node.js

我使用angularjs单页面应用程序开发了web应用程序。现在我正在使用nodejs构建自己的Web服务器。

索引页面在加载页面时可见,但在导航到其他页面时可见。 get请求以304状态进行无限循环。

**请注意我需要css和javascript for bootstrap和jquery。**当这些加载时我收到错误。我已经插入了app.js(服务器配置),index.js(nodejs routing config),moduleapp。 js(angularjs routing config)和错误图片。 enter image description here

   

 var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
       
        .when("/home", {
            templateUrl : "/views/home.hbs",
            controller : "homeCtrl"
        })

        .when("/aboutme",{
            templateUrl:"/views/aboutme.hbs",
            controller:"aboutCtrl"
        })

        .when("/education", {
            templateUrl : "/views/education.hbs",
            controller : "eduCtrl"
        })

        .when("/interest",{
            templateUrl:"/views/interest.hbs",
            controller:"interestCtrl"
        })

        .when("/gallery",{
            templateUrl:"/views/gallery.hbs",
            controller:"galleryCtrl"
        })
        
        .when("/contact", {
            templateUrl : "/views/contact.hbs",
            controller : "contactCtrl"
        });

    });


    app.controller("homeCtrl", function ($scope) {
        $scope.msg = "Welcome to homepage";
    });

    app.controller("aboutCtrl", function ($scope) {
        $scope.msg = "About me";
    });


    app.controller("eduCtrl", function ($scope) {
        $scope.msg = "Hi Academics";
    });

    app.controller("interestCtrl", function ($scope) {
        $scope.msg = "My interests";
    });

    app.controller("galleryCtrl",function($scope){
        $scope.msg="My photos";
    })
    app.controller("contactCtrl", function ($scope) {
        $scope.msg = "Contact me";
    });

    var express = require('express');
    var router = express.Router();

    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('layout');
    });

    router.get('/:name', function(req, res, next) {
        var name=req.params.name;
      res.render(name);
    });

    module.exports = router;

<!-- end snippet -->



    var express = require('express');
    var path = require('path');
    var favicon = require('serve-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');

    var hbs=require('express-handlebars');

    var index = require('./routes/index');


    var app = express();

    // view engine setup

    app.engine('hbs',hbs({extname:'hbs'}))
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'hbs');

    // 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: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', index);
    app.use('*', index);

    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
      var err = new Error('Not Found');
      err.status = 404;
      next(err);
    });

    // error handler
    app.use(function(err, req, res, next) {
      // set locals, only providing error in development
      res.locals.message = err.message;
      res.locals.error = req.app.get('env') === 'development' ? err : {};

      // render the error page
      res.status(err.status || 500);
      res.render('error');
    });

    module.exports = app;

0 个答案:

没有答案