Angular-Route for Templates

Question

I am having trouble getting my routes to work in my Angular application. It is properly displaying the main template, but when I click on the link for the other template, nothing happens. Here's my code:

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
   <title>Node, NPM and Bower</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
   <link rel="stylesheet" href="style.css">
</head>
<body ng-app="app">

<nav>
    <h3>Angular App</h3>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

<div ng-view></div>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="./app/app.js"></script>
</body>
</html>

APP.JS

angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
   $routeProvider
   .when("/", {
      template : "<h1>Home</h1>"
   })
   .when("/about", {
      template : "<h1>About</h1>"
   });
});

Also, is there a reason that Bootstrap and Angular don't work at all when I try to use a localhost with Express and Node? for instance, if I pull up index.html in my browser the text is sans-serif, etc., but if I pull it up using localhost, it's still the default serif font.

SERVER.JS

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function(req, res) {
   res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(3000, function() {
   console.log('app started');
});

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

Angular 1.5
So with basic 1.5 routing you need to use:

   <a href="#about">About</a>

To hit the route. See Plunker for more info

Angular 1.6
If you are using angular 1.6 it's:

<a href="#!about">About</a>

Look at AngularJS: ngRoute Not Working for other options.

Bootstrap problem
There shouldn't be any problem, it's properly caching.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 21 '17 at 19:26

Anders Vestergaard

1,139
1
14
21

Thanks for the help! That fixed things. However, it still doesn't work on localhost. I'll add my server.js file so you can look at that too. – Hudson Taylor Feb 21 '17 at 19:54
Your server.js file looks good to me. Isn't there any errors? Is angular not loaded or is it the server that is not running? – Anders Vestergaard Feb 21 '17 at 20:32
I figured it out. I had to add these three lines: `app.use(express.static(__dirname + '/views')); app.use('/bower_components', express.static(__dirname + '/bower_components')); app.use('/public', express.static(__dirname + '/public'));` – Hudson Taylor Feb 21 '17 at 20:44

score 0 · Answer 2 · answered Feb 21 '17 at 20:45

I figured out the answer. You need to tell the server to route your static files from their directories like so:

app.use(express.static(__dirname + '/views'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/public', express.static(__dirname + '/public'));

Angular-Route for Templates

2 Answers2