Question

我还是新的角度ui路由器，我有嵌套状态/嵌套视图的问题需要你的帮助。我有使用ui.router的角度应用程序，状态定义如下：

$locationProvider.html5Mode(true);
    $stateProvider
       .state('root',{
           abstract:'true'
           views:{
                 'top@':{},
                 '@':{}
                 }
                 })
       .state('childone',{
           url:'/childone,
           parent:'root'
           views:{
                 'top':{ template:"top navigation bar"},
                  '':{template:"Main Navigation"}
                 }
            });

对于childone状态，每个东西都按预期工作，直到我向这个状态添加一些参数：

...
.state('childone',{
   url:"/childone/:child_id",
   parent:"root",
   views:{
         'top@':{
                 template:"Top navigation with some styling in app.css"
                 }
          '@':{
                 template:"Main contain with style"
              }
         }
});

现在。如果我使用链接（childone）导航到此ui-sref=({child_id:'1232'})状态，页面将加载所有样式表并应用于元素ok。但是，如果我刷新状态或直接使用url去那里，页面将被破坏，没有样式适用于破坏我视线的元素。我从这里尝试了很多选项和解决方案，但到目前为止对我来说没什么用。有人可以指出我在这里失踪/错误的地方。

（我正在尝试构建一个MEAN堆栈应用程序。）

编辑：这是我的Node / express服务器端提供的静态index.html文件：

var express = require('express');
var app = express();
var server = require('http').Server(app);
var port = process.env.PORT||80;
var mongoose = require('mongoose');
//var passport = require('passport'); //will be used later
var bodyParser = require('body-parser');
var cookie = require('cookie-parser');
var path = require('path');
var session = require('express-session');
var dbconf = require('./app/config/db');
var flash = require('connect-flash');
var conf = require('./app/config/app');
mongoose.connect(dbconf.mongo);

/*middleware*/
app.use(cookie(conf.secret));
app.use(session({cookie: { maxAge: 60000 }}));
app.use(flash());
app.use(express.static(__dirname + '/public'));

app.use(bodyParser());
app.use(bodyParser.json({type: "application/vnd.api+json"}));
app.use(bodyParser.urlencoded({extended: true}));


app.get('*',function(req,res) {
    res.sendFile(path.join(__dirname, '/public/' + 'index.html'));
});

app.use(function(req,res) {
    res.status(404);
    res.send('The path not exist');
});

server.listen(port);
console.log('Http server on and serving at port ' + port);

angular ui路由器嵌套状态与params无法加载样式表

0 个答案: