Angular中奇怪的路由行为

时间：2016-03-12 17:06:17

标签： javascript angularjs routing mean-stack ngroute

before refreshing

我有一个平均应用设置，其中Angular应用程序位于＆＃39; / / dashboard＆＃39;路径。 该应用程序的主页运行正常。重新加载应用程序会返回应用程序所在的页面。事实上，即使在带有＆＃39; / dashboard / anything / anything＆＃39;路线，应用程序刷新就好了。但是当我在＆＃39; / dashboard / anything＆＃39;中刷新页面时路线，角度应用程序不会加载应用程序和我留下的所有视图＆＃39; HTML。 我试过用很多方法修复它但却无法找到这种奇怪行为的正确解释。

在刷新时，会发生这种情况：

The page I am left with after refreshing.

我的应用程序中的路由如下： - 

angular.module('dashboard', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
    $routeProvider

    // route for the dashboard home page
        .when('/dashboard/login', {
            templateUrl: 'dashboard/login/index.html'
        })
        .when('/dashboard', {
            templateUrl: 'dashboard/home/index.html'
        })
        .when('/dashboard/events', {
            templateUrl: 'dashboard/events/index.html'
        })
        .when('/dashboard/events/create', {
            templateUrl: 'dashboard/events/create.html'
        })
        .when('/dashboard/events/report', {
            templateUrl: 'dashboard/events/reports.html'
        })

        .when('/dashboard/users', {
            templateUrl: 'dashboard/users/index.html'
        })
        .when('/dashboard/users/create', {
            templateUrl: 'dashboard/users/create.html'
        })
        .when('/dashboard/users/reports', {
            templateUrl: 'dashboard/users/reports.html'
        })

        .when('/dashboard/images', {
            templateUrl: 'dashboard/media/index.html'
        })
        .when('/dashboard/images/add', {
            templateUrl: 'dashboard/media/create.html'
        })
        .when('/dashboard/categories', {
            templateUrl: 'dashboard/categories/index.html'
        })
        .when('/dashboard/logout', {
            templateUrl: ''

        })
        .otherwise({
            redirectTo: 'dashboard'
        });
    $locationProvider.html5Mode(true);
})

节点中的路由如下： - 

router.get('/dashboard', function(req, res) {
  res.sendFile('/dashboard/index.html',{ root: path.join(__dirname,  '../public') });
});

router.get('/dashboard/*',function(req, res) {
  console.log("Here");
  res.sendFile('/dashboard/index.html',{ root: path.join(__dirname, '../public') });
});

更新： - 更多代码片段。我之前没有提到我在两条不同的路线上设置了两个角度应用程序。根级别的第一个应用程序就像魅力，但/仪表板级别的应用程序有这个问题。

APP.JS 

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 router = express.Router();
var index = require('./routes/index');
var users = require('./routes/users');
var events = require('./routes/events');
var sponsors = require('./routes/sponsors');
var image = require('./routes/images');
var dashboard = require('./routes/dashboard');
var login=require('./routes/login.js');
var unless = require('express-unless');
// var router = express.Router();
var config = require('./config.js');
require('./database');
var jwt = require('jsonwebtoken');
var smsRoute=require('./routes/smsApi');
var sendSms=smsRoute.router;
var Models = require('./models/models');
var User = Models.user;
var app = express();
var mailer=require('./mailer/mailer.js');

// view engine setup
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('/dashboard', dashboard);
app.use('/api/send',sendSms);
app.use('/api/login',login);
app.use('/api/mail',mailer);
app.use('/api/events', events);
app.use('/api/users', users);
app.use('/api/sponsors', sponsors);
app.use('/api/image', image);
app.use('*', index);

app.set('superSecret', config.secret);


// 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 handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function (err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

INDEX.JS 

var express = require('express');
var router = express.Router();
var path = require('path');
/* GET home page. */

router.get('/', function (req, res, next) {
    res.sendFile('/app/index.html', {
        root: path.join(__dirname, '../public')
    })
});


module.exports = router;

DASHBOARD.JS 

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

router.get('/*', function(req, res) {
    res.sendFile('/dashboard/index.html',{ root: path.join(__dirname, '../public') });
});


module.exports = router;

许多API路线。 

var express = require('express');
var router = express.Router();
var Models = require('../models/models');
var Sponsor = Models.sponsor;



/*----------------Get All Users--------------*/
router.get('/',function(request,response) {

    Sponsor.find({},function(err,sponsors) {
        if(err) 
            return response.status(500).json({message : err.message});
        response.json({ sponsors : sponsors});
        response.end();

    });

});


 /*----------------Get User By Id--------------*/


router.get('/:id',function (request,response) {
    var id=request.params.id;

    Sponsor.find({_id:id},function(err,sponsor) {
        if (err)
            return response.status(500).json({message : err.message});
        response.status(200).json({sponsor:sponsor,message:"Sucess"});
        response.end();

    });
});

router.use(require('./tokenVerify.js'));

/*
 *
 *                                                     Start protected routes
 *-------------------------------------------------------------------------------------------------------------------
 *
 *                                             Route authentication using JSONWEBTOKEN.
 *
 */



/*----------------Create New User--------------*/
router.post('/', function (request, response) {
    var sponsor = request.body;
    Sponsor.create(sponsor,function(err,sponsor) {
        if(err) 
            return response.status(500).json({message : err.message});
        response.json({ sponsor : sponsors , message : "Success"});
        response.end();

    });
});



    /*----------------Update Existing User--------------*/


router.put('/:id', function (request, response) {
    var id = request.params.id;
    var sponsor  = request.body;
    if(sponsor && sponsor._id !== id) 
        return response.status(500).json({error : "The id's do not match.", message : "Failure"});
    sponsor["modifiedDate"]=Date();
    Sponsor.findByIdAndUpdate(id, user, { new : true }, function(err,user) {
        if(err) 
            return response.status(500).json({error : err.message, message : "User Not Found"});
        response.status(200).json({message : "Success"});
        response.end();

    });

});

 /*----------------Delete  Existing User--------------*/

router.delete("/:id",function(request,response) {
    var id = request.params.id;
    Sponsor.findOneAndRemove({_id:id},function(err) {
        if (err) 
          {  return response.status(500).json({error:err.message, message:"Can't Delete User"}); console.log("Error");}
        response.status(200).json({message:"Sucess"});       
        response.end();
    });
})




module.exports = router;

我试图尽可能地重构代码。对于出了什么问题，我完全不知道。已经做了很多搜索，但无法找到我需要的答案。

2 个答案:

答案 0 :(得分：1)

您将真实文件网址（如模板）和伪路线混合为角度。如果是这样，当尝试加载模板文件（例如dashboard/users/reports.html表示通配符路由/dashboard/*的角度）返回/dashboard/index.html文件时。以这种方式分离它们更安全：

在节点中：

router.use('/templates', express.static(path.join(__dirname, 'path/to/templates')));

router.get('/dashboard', function(req, res) {
  res.sendFile('/dashboard/index.html',{ root: path.join(__dirname,  '../public') });
});

router.get('/dashboard/*',function(req, res) {
  console.log("Here");
  res.sendFile('/dashboard/index.html',{ root: path.join(__dirname, '../public') });
});

角度：

.when('/dashboard/images', {
    templateUrl: '/templates/dashboard/media/index.html'
})

答案 1 :(得分：0)

这是我的 app.js文件：

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

var viewRoute = require('./routes/view'), //defining routes
    apiRoute = require('./routes/api'),

app.set('views', path.join(__dirname, 'views'));  //setting to HTML engine instead of EJS | JADE 
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', viewRoute);   //using middleware for routing
app.use('/api', apiRoute);

请参阅我的两件事：

  1. 查看 - HTML文件的渲染
  2. Api - 处理来自视图的获取/发布请求的代码（HTML文件）

    3. 现在 view.js文件 

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

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

router.get('/home', function(req, res, next) {
  res.render('pages/home');
});

router.get('/login', function(req, res, next) {
  res.render('pages/login');
});


router.get('/about', function(req, res, next) {
  res.render('pages/about');
});

module.exports = router;

    现在 api.js 文件：

    var express = require('express');

module.exports = (function() {

    'use strict';

    var api = express.Router();

    api.get('/home', function(req, res, next) {
      console.log("A GET Request for Home Page\n");
    });


    api.get('/dashboard', function(req, res, next) {
      console.log("A GET Request for About Page\n");
    });

    api.get('/about', function(req, res, next) {
      console.log("A GET Request for About Page\n");
    });

return api;

})();

    现在我的AngularJs控制器文件用于路由： 

    $routeProvider
        .when('/home', {
            templateUrl: '/home',
            controller: 'homeCtrl'
        })
        .when('/login', {
            resolve : {
                'check' : function ($location, $cookies){
                    if ($cookies.get('isAuthenticated') && $cookies.get('current_user')) {
                        $location.path('/dashboard');
                    }
                }
            },
            templateUrl: '/login',
            controller: 'loginCtrl'
        })
        .when('/dashboard', {
            resolve : {
                'check' : function ($location, $cookies){
                    if (!$cookies.get('isAuthenticated') || !$cookies.get('current_user')) {
                        $location.path('/login');
                    }
                }
            },
            templateUrl: '/dashboard',
            controller: 'dashboardCtrl'
        })
        .otherwise('/home');

    现在您将看到我的控制器文件仅在登录后我设置用户访问附加到仪表板的各种路线：

    myApp.controller('homeCtrl', function ($interval, $rootScope, $scope) {
    //Displaying HOME page
});

myApp.controller('loginCtrl', function ($scope) {
    //DISPLAYING LOGIN PAGE FOR LOGIN
    //YOUR LOGIN CODE GOES HERE AND AFTER THAT DO:
     $location.path('/dashboard/*'); //depending on you
});

smpApp.controller('aboutCtrl', function ($interval, $rootScope, $scope) {
    //DISPLAYING YOUR ABOUT US PAGE
});

    注意事项敏锐地：

    1. 每次检查路线。意味着他们认证了。
    2. 用于查看HTML文件和处理来自这些文件的get / POST请求的不同文件
    3. 每个文件的控制器不同
    4. 使用$ location.path遍历或将用户发送到仪表板。

      5. 谢谢＆amp;干杯

相关问题
最新问题