ExpressJS and Angular 1 routing

Question

Im trying to use Express to create a API and Angular for front-end of my page but Im unable to correctly route my pages. can somebody see my code and tell me what am I missing or doing wrong ? The error Im getting is 404 everytime I go try to go to /about it seems that it defaults to index.html here is my code:

//SERVER.JS

var express = require("express");
var app = express();
var PORT = process.env.PORT || 3001;
var path = require('path');
var router = express.Router();

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

app.listen(PORT, function () {
    console.log("Server running in PORT " + PORT);
});

//MAIN.JS

var myApp = angular.module('myApp', ['ngRoute']);

console.log("in myApp module");


myApp.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {

    console.log("in app.config")

$routeProvider
    .when('/',{
       templateUrl:'../index.html',
    })
    .when('about',{
        templateUrl:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>",
        controller:'AboutController'
    });



    console.log('after provider');
$locationProvider.html5Mode(true);

}]);

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Morand Transportation</title>
    <link href="css/reset.css" rel="stylesheet">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <script src="./lib/angular/angular.min.js"></script>
    <script src="./controllers/main.js"></script>
    <script src="./lib/angular/angular-route-min.js"></script>
    <script src="./controllers/AboutController.js"></script>

    <link href="css/style.css" rel="stylesheet">

</head>


<body ng-app="myApp">
<div class="wrapper">
        <nav  class="navbar navbar-default navbar-custom navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top">Home</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#services">Services</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#about">About</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#team">Team</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>


        <div class="top-banner">

            <!-- Navigation -->


            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center" id="title">
                        <span id="title-first">Morand</span> <span id="title-second">Trasnportation</span>
                        <!--<img src="images/morandLogo.png" class="img-responsive">-->
                        <hr>
                    </div>

                </div>
            </div>
        </div>

    <div ng-view></div>

    <div class="push"></div>
</div><!--End of Wrapper-->


<div id="footer-bar">

    <center>footer</center>
</div>

</body>

<script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>




<script src="./lib/bootstrap/js/bootstrap.js"></script>



</html>

Show your controller.

Stubbies
– Stubbies

2017-04-02 23:55:43 +00:00
Commented Apr 2, 2017 at 23:55 — Stubbies
– Stubbies, Commented Apr 2, 2017 at 23:55
Shouldn't you use '/about' instead of 'about'?

jperelli
– jperelli

2017-04-03 00:09:47 +00:00
Commented Apr 3, 2017 at 0:09 — jperelli
– jperelli, Commented Apr 3, 2017 at 0:09

Paolo · Accepted Answer · 2017-04-03 00:23:16Z

1

probably you've made 2 mistakes:

.when('/about',{ //should have a slash     
    templateUrl:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>", 
    // this is not a templateUrl
    controller:'AboutController'
});

should be like this instead:

template:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>",

i also suggest using this awesome ui-router router with angular ;)

edited Apr 3, 2017 at 0:23

answered Apr 3, 2017 at 0:17

Paolo

7321 gold badge9 silver badges24 bronze badges

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

2 Comments

Carl.G Over a year ago

Thank you ! I was doing several things wrong but I also moved to ui-router. loved it! I just needed to direct my path to '/' with express app.get and from there do the routing with ui-router

Paolo Over a year ago

@Carl.G glad you like it! Happy coding :)

Collectives™ on Stack Overflow

ExpressJS and Angular 1 routing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related