5
私は単一のページのWebアプリケーションで作業しています。角度のあるテンプレートで玉のビューを読み込みたいのですが、どうやってそのようにするのか正確にはわかりません。ここで角度から玉のテンプレートをロードする
は私の角度テンプレートです：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>
私は私の角度テンプレート用のコントローラを作っ：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
（命名.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' });
};
これは多くのコードを見ていることは知っていますが、本当に助けていただければ幸いです。
可能な重複。エクスプレス、ヒスイ、角度ルーティングについてはこちらをご覧ください：http://stackoverflow.com/a/23404524/2031033 –