通过角度加载玉模板答案

【问题标题】：loading jade template through angular通过角度加载玉模板
【发布时间】：2014-02-01 15:28:07
【问题描述】：

我正在开发一个单页网络应用程序，我想用我的角度模板加载翡翠视图，但我正在努力弄清楚如何做到这一点。

这是我的角度模板： index.html

    <!doctype html>
<html ng-app="test">
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script type="text/javascript" src="/javascripts/app2.js"></script>

  </head>
  <body>
    <p> Hello </p>
    <div>
        <div ng-view></div>
    </div>
  </body>
</html>

我为我的 Angular 模板制作了一个控制器：navigation.js

angular.module('test', [])
    .config(viewRouter);

function viewRouter ($routeProvider){
    $routeProvider
        .when('/', {templateURL: 'views/index.jade'}); 

}

这里我尝试使用翡翠模板渲染到页面上，但它似乎不起作用。

我有一个查看翡翠模板，

index.jade

extends layout

block content
    h1= title

    include partials/menu

    .views-wrapper
       include partials/login

layout.jade：

doctype
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')

        body
            block content


            script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
            script(src='/javascripts/navigation.js')

menu.jade：

ul
    li.a VIEW A
    li.b VIEW B
    li.c VIEW C
    li.l VIEW LOGIN2

我还有一个视图简单模板（名为 a.jade、b.jade 和 c.jade），它们只有简单的标题显示名称作为测试，以查看路由是否有效。我正在努力让这些模板连接起来，我似乎无法绕开我的脑袋，也找不到关于如何通过我的角度模板显示我的翡翠视图的答案。在我没有使用角度模板之前，我决定使用一个以便更轻松地处理 URL。

这是我服务器端的 app.js：

/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.cookieParser('cookies monster')); // Cookie secret

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.set('public', path.join(__dirname, 'public'));
/*
 * Views
 */

//app.get('/', routes.index);
app.get('/', function(req, res, next){
    return res.sendfile(app.get('public') + '/index.html');
});
app.get('/users', user.list);
app.get('/a', routes.a);
app.get('/b', routes.b);
app.get('/c', routes.c);
app.get('/login2', routes.login2); 


http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

这是一个路由控制器，在我决定使用角度之前，我必须渲染视图

index.js：

exports.index = function(req, res){
  res.render('index', { title: 'New Test' });
};

// View A
exports.a = function(req, res) {
    res.render('partials/a', { layout: false, test: 'a' });
};

// View B
exports.b = function(req, res) {
    res.render('partials/b', { layout: false, test: 'b' });
};

exports.c = function(req, res) {
    res.render('partials/c', { layout: false, test: 'c' });
};

exports.login2 = function(req, res) {
    res.render('partials/login2', { layout: false, test: 'login2' });
};

我知道要查看很多代码，但我非常感谢任何帮助。

【问题讨论】：

可能重复。在此处查看 express、jade、angular 路由：stackoverflow.com/a/23404524/2031033

标签： node.js angularjs express pug

【解决方案1】：

在 stackoverflow 上查看我的answer，了解如何使用 AngularJS 种子与 Jade 一起工作，它可以帮助您解决问题。

【讨论】：