AngularJS ngRoute 404 page not found


I have been trying to figure out why my view doesn’t work. I am not sure if I am missing dependencies or just have something simple wrong.

when I run the program through pycharm is shows the index.html page, and when I click on one of the links to the different views it displays a 404 page not found.

I have these directories under my project folder:



can anyone see what I am doing wrong? Thank you.

AngularJS js file:

  var mainApp = angular.module('mainApp', []);
      function ($routeProvider) {
            .when('/home', {
                templateUrl: '/partials/home.html',
                controller: 'controller_home'
            .when('/about', {
                templateUrl: '/partials/about.html',
                controller: 'controller_about'
            .when('/cart', {
                templateUrl: 'partials/cart.html',
                controller: 'controller_cart'
            .when('/contact', {
                templateUrl: 'partials/contact.html',
                controller: 'controller_contact'
            .when('/myAccount', {
                templateUrl: 'partials/myAccount.html',
                controller: 'controller_myAccount'
                redirectTo: '/partials/home'

mainApp.controller('controller_home', ['$scope', function controller_home($scope) {
    $scope.message = "$scope.message : from controller_home";
    .controller('controller_about', ['$scope', function controller_about($scope) {
    $scope.message = "$scope.message : from controller_about";
    .controller('controller_cart', ['$scope', function controller_cart($scope) {
    $scope.message = 'this is the cart';

HTML file:

<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
    <meta charset="UTF-8">
    <title>My Webpage Title</title>

    <!--Stylesheet index.css-->
    <link rel="stylesheet" href="CSS/index.css" type="text/css">
    <link rel="stylesheet" href="CSS/animations.css" type="text/css">

    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
    <script src="scripts/mainApp.js"></script>

    <!--Site Header-->
    <div class="header">
        <h1>Header to Page</h1>


    <!--Site Navigation Bar-->
        <a href="/home">Product</a> |
        <a href="/cart">Cart</a> |
        <a href="/about">About</a> |
        <a href="/contact">Contact</a> |
        <a href="/myAccount">My Account</a><br/>
        <div ng-view></div>


    <!--Site Footer-->
    <footer class="footer">

    <footer class="footer-disclaimer">
        <ul class="navbar">
            <li><a href="policy.html">Policy and Agreement</a></li>
            <li><a href="privacy.html">Privacy Policy</a> </li>


You are missing dependency ngRoute

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

also your controllers should be ,

mainApp.controller('controller_home', ['$scope', function($scope) {
    $scope.message = "$scope.message : from controller_home";
mainApp.controller('controller_about', ['$scope', function($scope) {
    $scope.message = "$scope.message : from controller_about";
mainApp.controller('controller_cart', ['$scope', function($scope) {
    $scope.message = 'this is the cart';


Answered By – Sajeetharan

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.