通过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上的答案 ,它可以帮助你解决你的问题。
- 玉没有find在不同的文件夹中的视图
- 当点击一个表单提交button时,启动一个远程引导模式,然后远程模式内容显示表单数据?
- node.js angular jade客户端和node.js rest api
- 你如何在一个快速的应用程序设置玉basedir选项? (“basedir”选项需要使用“扩展”和“绝对”path)
- 为什么Google地图标记和InfoWindow不居中?
- 在“for article,slug in public.articles._data”什么是“slug”? 有没有办法使用嵌套数组?
- 用jQuery在客户端添加Jade块的内容
- 翡翠列表迭代内有不同的内容
- 为什么客户端在node + express + socket.io + jade简单的应用程序中断开连接并重新连接