CODEWITHSUNDEEP
node.jsangularjsexpressroutesview
willthefirst
willthefirst

Reputation: 1619

Angular.js and Express: Routing is not working

I've scoured the internet for somebody with a similar problem, but still no solutions. In comparing my app to Angular-Express-seed, Angular-Express-Master, and any of the other popular examples out there, nothing appears to be broken, yet it just doesn't work. Does anybody have a ideas of why this may be?

I'll try to spare detail without removing what may be the problematic bit of code:

/app.js

// All environments
app.set('views', __dirname + '/views');
app.set('port', process.env.PORT || 3000);
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set("view options", { layout: false });
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.session(
    { secret: 'spunkydelicious',
      cookie : {
        maxAge: (3600000*24*7) // 1 week
      }
    }
));
app.use(passport.initialize());
app.use(passport.session());
app.use(require('express-jquery')('/jquery.js'));
app.use(express.static(path.join(__dirname, '/public')));
app.use(app.router);

...

app.get('/', index.index);
app.get('/partials/:name', index.partials);
app.get('*', index.index);

where the 'index' of index.index, index.partials, etc. corresponds to this:

/app/controllers/index.js

exports.index = function(req, res){
    res.render('index');

};

exports.partials = function(req, res) {
    var name = req.params.name;
    console.log('Hurah!');
    res.render('partials/' + name);
};

/public/javascripts/app.js

'use strict';

// Declare app level module which depends on filters, and services

angular.module('emit', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when( '/', {
        templateURL:'partials/test',
        controller: AppCtrl
    }).
    otherwise({
      redirectTo: '/'
    });

    $locationProvider.html5Mode(true);
}]);

/public/javascripts/controllers.js

'use strict';

/* Controllers */

function AppCtrl($scope) {
  console.log('123');
}

/views/index.html

<!DOCTYPE html>
<html ng-app="emit">
  <head>
    <base href="/">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

    <div ng-view></div>

    <!-- Plugins -->
    <script src="/javascripts/vendor/angular/angular.js"></script>

    <!-- Angular -->
    <script src="/javascripts/app.js"></script>
    <script src="/javascripts/controllers.js"></script>

    <!-- Other scripts -->
  **strong text**  <script src="/javascripts/script.js"></script>
  </body>
</html>

/views/partials/test.html

<div class="">Yay!</div>

Pardon the length of the code, I just can't crack what I'm doing wrong. No errors are logged by the server of the client console. Any debugging steps I could take?

Upvotes: 1

Views: 3396

Answers (1)

Alex Netkachov
Alex Netkachov

Reputation: 13562

After very long and confusing debug session I've figured this out... Surprisingly, the error is in templateURL - it should be templateUrl.

Upvotes: 6

Related Questions