CODEWITHSUNDEEP
node.jsangularjsexpress
Pirzada
Pirzada

Reputation: 4713

angularjs index.html in views folder

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

Upvotes: 3

Views: 4874

Answers (1)

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

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

Upvotes: 3

Related Questions