Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

I am building an app which uses Node and Angular routing. I want to handle all the routes in Angular.

Folder Structure:

  • public

    • Images
    • css
    • js
    • partials
      • _search.html
      • home.html
    • index.html
  • sass

    • all sass files (when compiled are going to public/css folder)

server.js

var app = express();
var routes = require('./routes/index');
app.use(sassMiddleware({
    // Options
    src: __dirname + '/sass',
    dest: __dirname + '/public',
    debug: true,
    outputStyle: 'compressed'
}));
app.use('/bower_components',  express.static(__dirname + '/bower_components'));
app.use(express.static(__dirname + '/public'));
app.use('/css',  express.static(__dirname + '/css'));
app.use('/js',  express.static(__dirname + '/js'));
app.use('/images',  express.static(__dirname + '/images'));
app.use'/',function(req, res, next){
    res.sendFile(root_dir+'/public/index.html');
}

app.js (angular): I am using Angular ui-router for routing

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('home', {
            url: "/",
            templateUrl: 'partials/home.html'
         })
        .state('search', {
            url: "/search/:token",
            templateUrl: 'partials/_search.html'
        });

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

    $urlRouterProvider.otherwise('/404.html');

});

public/index.html

<html>
<head>
    <loads all css and javascript files>
</head>
<body>
    <div ui-view>
    </div>
</body>
</html>

when I do "http://localhost:3000", I am able to load home.html from partials, but when I do "http://localhost:3000/search/abcd", It loads the blank html with Menu Bar but couldn't load css/js/images and search.html partial.

On the node console, I see the following 404 errors:

example:
GET /search/js/index/mainPageSearchController.js 404 0.285 ms - 62
GET /search/js/index/exploreCitiesController.js 404 0.483 ms - 61
GET /search/js/strechy-main.js 404 0.355 ms - 44

My files are loading from search directory which is wrong.

Please suggest me what should be corrected to load the search.html from partials when "http://localhost:3000/search/abcd" is hit as per the above code.

Thanks in advance

share|improve this question
    
can you add the html from 'partials/_search.html' and the actual head html from 'index.html'. It seems like it may be a problem with your formatting in your html. – TetonDan Jul 24 at 21:42
    
Yes, the header is in the public/index.html which is global page with menu bar.. I wanted to load "partials/search.html" in ui-view of index.html when "localhost:3000/search/abcd" is hit – Jarvis Jul 24 at 21:52
    
what folder is your node server file stored in? – TetonDan Jul 24 at 22:21
    
in the root folder, In ProjectFolder > Public (folder), server.js (node server), etc.. – Jarvis Jul 24 at 22:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.