0

I'm still new to angular ui router and I have problem with nested state / nested views need your help. I have angular app using ui.router with the states definition as bellow:

$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"}
                 }
            });

for the childone state, every thing work as expected until I add some params to this state like this :

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

Now. If I navigate to this childone state using link (ui-sref=({child_id:'1232'})) the page will load all stylesheet and apply to elements ok. But if I refresh the state or go there directly using url, the page will be broken, no styles are apply to element that broke my view. I tried so many options and solution from here but nothing work for me so far. could someone point me out what I'm missing / wrong here please.

( I'm trying to build a MEAN stack app. )

Edit: this is my Node/express server side to serve static index.html file:

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);
6
  • I'm fairly certain (but not 100% thus a comment and not an answer) that this is actually a server redirect problem. Mean-apps actually only have one entry-point index.html. And all the rest urls are "fake" url changes only displayed in the browser, but for the server it should all go to the same route. You'll need some kind of redirect (.htaccess or apache/nginx config) and point incoming requests to your "real" entrypoint (index.html). Maybe this will help? stackoverflow.com/questions/26258816/… Commented May 29, 2016 at 2:59
  • docs.angularjs.org/guide/$location#server-side from the docs. And I've seen the same CSS-less pages you are speaking about, but it was some years ago. The more I recall about it the more sure I am that this is your problem. Commented May 29, 2016 at 3:08
  • I have set <base href="/"> in the header of my index.html file . and my Node/express server serve static index.html as well Commented May 29, 2016 at 3:26
  • the request for stylesheet file return 304. not a 404. btw: how can I add image to comment here ? Commented May 29, 2016 at 3:58
  • Hmm, seeing your routes I think it uses your static resource all the time here (express uses first matching route) . Are you sure it even gets to app.get('*',... ? Commented May 29, 2016 at 4:00

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.