Angular-ui路由器加载玉模板 [英] Angular-ui router loading jade template

问题描述

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ p> doctype html
html（lang =en）
head
meta（charset ='UTF-8'）
meta（name =
base（href ='/'）
标题Node Express角色示例
meta（name ='viewport'，content ='width =设备宽度，initial-scale = 1.0'）
link（rel ='stylesheet'，href ='// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'）
link（rel ='stylesheet'，href ='。/ css / style.css'）
body（style =''，ng-app ='myApp'，ng-cloak）
include partials /标题
div（ui-view）

脚本（src ='// code.jquery.com/jquery-2.1.1.min.js'）
脚本（src ='// netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'）
脚本（src ='https：//ajax.googleapis.com/aj ax / libs / angularjs / 1.2.16 / angular.min.js'）
脚本（src ='http：//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/ angular-ui-router.min.js'）
脚本（src ='https：//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.js'）
脚本（src ='。/ js / app.js'）


我的app.js看起来像这个：

  var myApp = angular.module（'myApp'，['ui.router']）; 
 
 myApp.config（['$ stateProvider'，'$ urlRouterProvider'，'$ locationProvider'，
函数（$ stateProvider，$ urlRouterProvider，$ locationProvider）{
 $ stateProvider 
 .state（'home'，{
 url：'/ home'，
 templateUrl：'./partials/partial-home.jade'
}）
 .state（'about'，{
 url：'/ about'，
 template：'这是关于页面'
}）; 
 $ urlRouterProvider.otherwise（'家庭'）; 
 $ locationProvider 
 .html5Mode（true）
 .hashPrefix（'！'）; 
}]）; 
  

我的partial-home.jade看起来像这样：

  div.jumbotron 
 div.container.text-center 
 h1首页
p此页面正在进行中
  

查看关于页面时没有问题，但无法查看主页。
我也尝试用index.jade中的< div ui-view>< / div> 替换div（ui-view）其他SO职位，但没有效果。任何线索？

编辑：app.js中有一个拼写错误，它是templateUrl而不是templateURL。然而，它仍然没有渲染正确的部分home.jade，在ui视图里面的内容实际上和index.jade一样。我的server.js如下所示：

  var express = require（'express'）; 
 var app = express（）; 
 var port = process.env.PORT || 8080; 
 var favicon = require（'serve-favicon'）; 
 var path = require（'path'）; 
 
 app.set（'views'，__dirname +'/ client / views'）; 
 app.set（'view engine'，'jade'）; 
 app.use（express.static（path.join（__ dirname，'client'）））; 
 
 app.get（/ *，function（req，res）{
 console.log（req.url + req.method）; 
 res.render（' index'）; 
}）; 
 
 app.listen（port，function（）{
 console.log（'Express Server listen on'+ port）; 
}）; 
  

解决方案

正确，所以express不会自动呈现视图。它将自动发送静态文件，但不渲染动态视图，因此需要一个明确的路由来匹配部分，并调用 res.render 将它们从玉器转换为HTML，然后再发送到浏览器尝试沿着这些方向的东西，把它放在你的通配符路由之前 index 。

  app.use（/ partials，function（req，res）{
 res.render（req.path）; 
}）; 
  

I'm trying to combine Express with Angular and notably Angular-UI Router and use Jade: My index.jade looks like this:

doctype html
html(lang="en")
    head
        meta(charset='UTF-8')
        meta(name='fragment', content='!')
        base(href='/')
        title Node Express Angular Example
        meta(name='viewport', content='width=device-width, initial-scale=1.0')
        link(rel='stylesheet', href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')
        link(rel='stylesheet', href='./css/style.css')
    body(style='', ng-app='myApp', ng-cloak)
        include partials/header
        div(ui-view)

        script(src='//code.jquery.com/jquery-2.1.1.min.js')
        script(src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js')
        script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js')
        script(src='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js')
        script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.js')
        script(src='./js/app.js')

My app.js looks like this:

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$stateProvider','$urlRouterProvider','$locationProvider', 
    function ($stateProvider,$urlRouterProvider,$locationProvider) {
    $stateProvider
        .state('home', {
            url:'/home',
            templateUrl: './partials/partial-home.jade'
        })
        .state('about', {
            url:'/about',
            template: 'This is the about page'
        });
    $urlRouterProvider.otherwise('/home');
    $locationProvider
    .html5Mode(true)
    .hashPrefix('!');
}]);

And my partial-home.jade looks like this:

div.jumbotron
    div.container.text-center
        h1 Home Page
        p This page is a draft in progress

I don't have a problem viewing the 'About' page, but I can not view the Home page. I tried also to replace div(ui-view) with <div ui-view></div> in index.jade as was suggested in some other SO post but to no effect. Any clues?

Edit: There was a spelling mistake in app.js, it's templateUrl instead of templateURL. However it still does not render the proper partial-home.jade, what comes inside the ui-view is actually the same as index.jade. My server.js looks like this:

var express = require('express');
var app = express();
var port = process.env.PORT || 8080;
var favicon = require('serve-favicon');
var path = require('path');

app.set('views', __dirname+'/client/views');
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'client')));

app.get("/*", function (req, res) {
    console.log(req.url + req.method);
    res.render('index');    
});

app.listen(port, function () {
    console.log('Express Server listening on ' + port);
});

解决方案

Right so express doesn't auto-render views. It will automatically send static files, but not render dynamic views, you so need an explicit route to match the partials and call res.render to convert them from jade to HTML before sending to the browser. Try something along these lines, putting this BEFORE your wildcard route for index.

app.use("/partials", function (req, res) {
  res.render(req.path);
});

这篇关于Angular-ui路由器加载玉模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！