40

我经历了许多 Angular-express 种子，并弄清楚了它们是如何工作的。我遇到的问题是：1）。我想使用 ejs-locals 进行模板化。2）。如何正确配置服务器端和客户端的路由。而且，当输入 URL 时/about，不要生成错误：cannot /get

角度app.js包含：

// angular stuff

$routeprovider.when('/', {
 templateUrl: 'index',
 controller: IndexCtrl
});
$routeprovider.when('/about', {
 templateUrl: 'partials/about',
 controller: IndexCtrl
});

快递应用，js包含：

app.get('/', routes.index);
app.get('/about', routes.about);

路由文件夹包含“index.js”：

exports.index = function(req, res){
  res.render('index',{name:"Hello"});
};

exports.about = function (req, res) {
  res.render('partials/about');
};

视图文件夹包含index.ejs：

<!--HTML head/navigation bar here-->
<div ng-view></div>

和里面的意见文件夹是一个partials文件夹：（Views/partials/）

索引.ejs：

 <h1>Index</h1>

关于.ejs：

<h1>About</h1>
4

4 回答 4

31

将这些路由添加到您的快速服务器

app.get('/partials/:filename', routes.partials);
app.use(routes.index);

然后在routes.js

exports.partials = function(req, res){
  var filename = req.params.filename;
  if(!filename) return;  // might want to change this
  res.render("partials/" + filename );
};

exports.index = function(req, res){
  res.render('index', {message:"Hello!!!"});
};

这将确保 express 在向partials/index和发出请求时返回呈现的模板partials/about。

这是一个要点：https ://gist.github.com/4277025

于 2012-12-13T15:07:20.717 回答
5

我就是这样做的。我正在使用 Jade，但 Ejs 会类似：

应用程序.js

// Routes
app.get('/', routes.index);
app.get('/partials/:name', routes.partials);

我的模板存储在/views/partials：

app.set('views', __dirname + '/views');

客户端您现在可以使用 Angular 的 $routeProvider 来加载部分：

/*global define */

define([
   'angular',
   'controllers/aController',
   'controllers/bController'],
   function (angular, aController, bController) {
    'use strict';

    return angular.module('controllers', [], ['$controllerProvider', '$routeProvider',
        function ($controllerProvider, $routeProvider) {
            $controllerProvider.register('AController', ['$scope', aController]);
            $controllerProvider.register('BController', ['$scope', bController]);
            // routes
            $routeProvider.when('/A', {templateUrl: 'partials/A', controller: aController});
            $routeProvider.when('/B', {templateUrl: 'partials/B', controller: bController});
            $routeProvider.otherwise({redirectTo: '/A'});
        }]);
    }
);
于 2012-12-20T09:05:56.007 回答
5

我在使用玉和角度时遇到了一些麻烦，这对我有用。

目录结构：

public
  |-js
  |-css
  |-views
    |-main
      -main.jade
    |-auth
      -login.jade
server
  |-includes
    -layout.jade
  |-views
    -index.jade
server.js

然后在用于路由的 server.js 配置中如下所示：

app.configure(function(){
    app.set('views', __dirname + '/server/views');
    app.set('view engine', 'jade');
})
// server side route for the partials files
app.get('/views/*', function(req, res){
    res.render('../../public/views/' + req.params);
})

// everything handled by this route
app.get('*', function(req, res){
    res.render('index');
})

然后角度路线看起来像这样：

$routeProvider.when('/', {
    templateUrl: '/views/main/main',    // gets main.jade from server
    controller: 'mainCtrl'
})

我的index.jade样子是这样的：

extends ../includes/layout

block main-content
    .navbar.navbar-inverse.navbar-fixed-top
        div(ng-include="'/views/account/navbar-login'")
    section.content
        div(ng-view)
于 2014-05-01T08:40:00.800 回答
1

你可以试试这样的

const path = require("path");

/* For serving static HTML files */
app.use(function(req, res, next) {
    res.sendFile(path.resolve(__dirname + '/dist/index.html'));
});

/* For ejs, jade/pug engines */
app.use(function(req, res, next) {
    res.render(path.join(__dirname, '/dist/index.pug'));
});
于 2017-09-09T08:31:38.497 回答