通过angular度加载玉模板
我正在一个单一的网页上的应用程序，我想用我的angular模板加载玉视图，但我正在努力包扎我的头正是如何做到这一点。
这是我的angular模板：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），它们只有一个简单的头部，显示一个名字作为testing，看看路由是否工作。 我正在努力获得这些模板连接，我似乎无法包围我的头，也没有find一个答案，我怎样才能通过我的angular模板显示我的玉视图。 之前我没有使用angular模板，但决定使用一个为了更容易处理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')); });
这是一个路由控制器，我决定使用angular之前，必须呈现视图
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' }); };
我知道这是很多代码，但我会很感激任何帮助。
检查我的关于使用AngularJS种子与Jade工作的stackoverflow上的答案 ，它可以帮助你解决你的问题。