angularjs index.html in views folder

Question

I have little confusion. Using Nodejs

folder structure image is attached.

If I put index.html at the root of Client folder than everything is working fine.

On the other hand if I move index.html in the views folder like in the image than js files are not loading but index.html is loading.

Nodejs - server.js

app.configure(function () {
    app.set('port', process.env.PORT || 3000);

    app.use(express.favicon());
    app.use(express.cookieParser());
    app.use(express.bodyParser());
    app.use(express.logger('dev'));  //tiny, short, default
    app.use(express.methodOverride());
    app.use(express.cookieSession({secret: "sdfr"}));

    //app.set('views', __dirname + '/client/views/');
    app.use(express.static(__dirname + '/client/views'));

});

app.js

app.config(['$routeProvider', function ($routeProvider) {

        $routeProvider.when('/',
            {
                templateUrl: 'partials/home.html',
                controller: 'HomeCtrl'
            });
        $routeProvider.when('/login',
            {
                templateUrl: 'partials/login.html',
                controller: 'LoginCtrl'
            });
        $routeProvider.when('/register',
            {
                templateUrl: 'partials/register.html',
                controller: 'RegisterCtrl'
            });

        $routeProvider.when('/404',
            {
                templateUrl: 'partials/404.html'
            });
        $routeProvider.otherwise({redirectTo: '/404'});

        //$locationProvider.html5Mode(true);

    }])

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html ng-app="contactManager">
<head>
    <meta charset="utf-8">
    <title>Angular Demo</title>
</head>

<body>


<a href="#/">Home</a><br/>
<a href="#/login">Login</a><br/>
<a href="#/register">Register</a><br/>
<a href="#/private">Private</a><br/>
<a href="#/admin">Admin</a><br/>
<a href="#/404">404</a><br/>

<div>
    <div ng-view></div>
</div>

<script src="../lib/vendor/angularjs/1.1.5/angular.min.js"></script>

<script src="../js/app.js"></script>
<script src="../js/controllers.js"></script>

</body>

Folder Structure

Error

Why did you replace app.set('views'..) with app.use(express.static...) - the commented code in app.js? — callmekatootie
– callmekatootie, Commented Jun 10, 2013 at 15:40
@callmekatootie, that code is in server.js. I was checking but app.set('views'..) doesn't server any purpose and I am still unable to load the application. — Pirzada
– Pirzada, Commented Jun 10, 2013 at 18:59

Jonathan Rowny · Accepted Answer · 2013-06-10 16:44:11Z

3

Currently you are NOT including the JS in express.static. The included JS sources at ../js from your index.html file go nowhere because client/views is the only directory being served by express.static.

You should just include the whole client in your static, otherwise you'll have to do include each directory into your static provider.

app.use(express.static(__dirname + '/client/views')); means you are serving anything from /client/views but nothing OUTSIDE of that directory.

app.use(express.static(__dirname + '/client/js')); would allow you to serve the JS folder, but it would be accessed at root. You can use TWO static providers but the first one will win in the event of a conflict. You could also do app.use(express.static('/js', __dirname + '/client/js')); which would all you to access client/js at yoursite.com/js but that seems strange to me.

Read up on using express.static here: http://expressjs.com/api.html#middleware

answered Jun 10, 2013 at 16:44

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pirzada Over a year ago

if i use app.use( express.static(path.join(__dirname, 'client'))); even than application is not working till I put index.html at the root of Client folder. Where as index.html is in views folder and somehow we have to tell the location of index.html to start the app. Am I right?

Jonathan Rowny Over a year ago

When you move index.html to your root, are you changing the paths in your index.html file? If you leave it in views, you'll need to access it via yoursite.com/views/index.html. If you want to leave index.html in views AND have it be at the root, you will have to use multiple expess.statics and put views FIRST. Then modify the statis so they have paths. Like app.use(express.static(__dirname + '/client/views')); app.use('js', express.static(__dirname + '/client/js')); app.use('lib', express.static(__dirname + '/client/lib')); then make sure your include reference js instead of ../js.

Collectives™ on Stack Overflow

angularjs index.html in views folder

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related