AngularJS和ExpressJS路由问题?

nir*_*ran 2 node.js express angularjs

我正在使用Angular,express,nodeJS进行Web应用程序开发.

Anuglar代码:

'use strict';
//
 Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]).config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);;


angular.module('modelDemo', []).
config(function ($routeProvider) {
    $routeProvider.
    when('/', {
        controller: 'AuthorListCtrl',
        templateUrl: 'partials/list.html'
    });
     $routeProvider.
    when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
    });
   $routeProvider.otherwise({redirectTo: '/view1'})
});

var app = angular.module('app', ['myApp', 'modelDemo']);
Run Code Online (Sandbox Code Playgroud)

快递代码

// all environments
app.set('port', process.env.PORT || 2000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);

app.get('/', wine.index);
app.get('/partials/:name', wine.partials);
app.get('/wines', wine.findAll);
// / app.get('/view1', wine.index);
app.get('/wines/:id', wine.findById);
app.post('/wines', wine.addWine);
app.put('/wines/:id', wine.updateWine);
app.delete('/wines/:id', wine.deleteWine);
app.get('/view1', wine.partials);
//app.get('/view1/:name', wine.partials);
Run Code Online (Sandbox Code Playgroud)

2)

exports.index = function(req, res){
   console.log("request url---"+req.url);
   res.render('partials/' + req.params.name);
};

exports.partials = function(req, res) {
   console.log("request url---"+req.url);
   console.log(req.params.name);
   res.render('partials/' + req.params.name);
};
Run Code Online (Sandbox Code Playgroud)

项目文件夹结构: 文件夹结构

当我尝试使用以下URL访问此应用程序时, http://www.domain:2000/view1

我收到了以下错误,

错误:无法在ServerResponse.res.render上的Function.app.render(d:\ era\startup\learnnod\restfull_angular2 \node_modules\express\lib\application.js:494:17)中查找视图"partials/undefined"( d:\ era\startup\learnnod\restfull_angular2 \node_modules\express\lib\response.js:756:7)在exports.partials(d:\ era\startup\learnnod\restfull_angular2\routes\wines.js:104:9) )在param(d:\ era\startup\learnnod\restfull_angular2 \node_modules\express\lib)的回调(d:\ era\startup\learnnod\restfull_angular2 \node_modules\express\lib\router\index.js:161:37)中\ router\index.js:135:11)在Router._dispatch(d:\ era)处传递(d:\ era\startup\learnnod\restfull_angular2 \node_modules\express\lib\router\index.js:142:5)在Object.router上启动\ startup\learnnod\restfull_angular2 \node_modules\express\lib\router\index.js:170:5)(d:\ era\startup\learnnod\restfull_angular2 \node_modules\express\lib\router\index.js :33:10)下一步(d:\ era\startup\learnnod\restfull_angular2 \node_modules\express \node_modules\connect\lib\proto.js:190:15)在简历中(d:\ era\startup\learnnod\restfull_angular2 \node_modules\express \node_modules\connect\lib\middleware\static.js:60:7)

如果您需要更多信息,请告诉我

Bri*_*wis 5

问题是您正在尝试处理角度代码和快速代码中的路径.为了使其按预期工作,您需要将所有非部分/非api路由指向index.html文件.

尝试做这样的事情:

wine.js(您的快递路线文件)

exports.index = function(req, res) {
    res.sendfile(__dirname + "/public/index.html"); // updated to reflect dir structure
};
Run Code Online (Sandbox Code Playgroud)

app.js(您的快递应用文件)

...
// make this your last route and remove your '/view1' route
app.get('*', wine.index);
...
Run Code Online (Sandbox Code Playgroud)

  • 这是因为,所有页面请求都需要发送到index.html文件.加载应用程序后,Angular将使用pushState来操作URL并处理路由.但是,如果您要刷新页面或深入链接到Angular路由,Express将尝试处理路由.将其发送到所有路由上的索引将允许Angular处理路由. (2认同)