Node / Angular : Template is not loading from angular router

Question

Please help me knowing what I missed ? here is my code:

folder Structure:

app
  public
    views
      books.html
    controllers
  index.html
  main.js
  server.js

index.html

<!doctype html>
<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>ANGULARJS App</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
        <script src="/main.js"></script>
        <!-- <script src="/views/books.html"></script> -->
        <script src="/controllers/bookController.js"></script>
        <script src="/services/service.js"></script>
        <link rel="stylesheet" href="/style/style.css">

        <!-- load angular -->
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h2>Library App using Angular and Node</h2>
            </div>
        </div>

        <div ng-view></div>

    </body>
</html>

main.js

var app = angular.module('app', ['ngRoute'])
.config(function($routeProvider,  $locationProvider) {
    $routeProvider
    .when("/", {
        templateUrl : '/books.html',
        controller  : 'bookController'
    })
    .when("add", {
        templateUrl : "/add.html",
        controller  : 'addController'
    })
    .when("edit", {
        templateUrl : "/edit.html",
        controller  : 'editController'
    })
    .when("top-rated", {
        templateUrl : "/topRated.html",
        controller  : 'topRatedController'
    });
});

server.js

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

app.get('*', function(req, res) {
  res.sendfile('./public/index.html'); 
});

books.html

<div ng-init="loadIntialdata()">

    <div class="container well mtp75">
        <!-- <span ng-click="emptyInput()" data-toggle="modal" data-target="#bookModal" class="btn btn-success pull-right">Add New Book</span> -->
        <a class="btn btn-success pull-right btn-space" href="#!book/add">Add New Book</a>
        <a class="btn btn-success pull-right btn-space" href="#!book/top-rated">Top Rated Books</a>
        <input type="text" ng-model="search" placeholder="Search">
        <div class="row"></div>
        <br>

        <table cellpadding=10 cellspacing=10 border=0 class="table">
            <tr>
                <th>No.</th>
                <th>Favourite</th>
                <th>Name</th>
                <th>Author</th>
                <th>Genre</th>
                <th>Rating</th>
                <th>UPDATE</th>
                <th>DELETE</th>
            </tr>

            <tr ng-repeat="book in books | filter:search">
                <td>{{$index+1}}</td>
                <td>
                    <div class="star-rating"><span id="favourite_{{ book.id }}" class="glyphicon glyphicon-heart"
                                                   ng-class="{'fa-heart': book.favourite}"
                                                   ng-click="markAsFavourite(book.id, $index)"></span></div>
                </td>
                <td>{{ book.name }}</td>
                <td>{{ book.author }}</td>
                <td>{{ book.genre_s }}</td>
                <td>
                    <div class="star-rating">
                        <span class="glyphicon glyphicon-star-empty" ng-repeat="v in [1, 2, 3, 4, 5]"
                              ng-class="{'fa-star': v <= book.rating}" id="rating_{{ book.id }}_{{ v }}"
                              ng-click="rateBook(v, book.id, $parent.$index)" value="{{ v }}"></span>
                    </div>
                </td>
                <td><a ng-click="enableUpdateForm($index)" class="btn btn-primary btn-sm glyphicon glyphicon-pencil"
                       href="#!book/edit"></a></td>
                <td>
                    <div ng-click="deleteBook($index)" class="btn btn-danger btn-sm glyphicon glyphicon-remove"></div>
                </td>
            </tr>
        </table>

    </div> <!-- End OF Row -->

</div>

Firstly I was getting this error:

Uncaught SyntaxError: Unexpected token <

Now template is not loading, no console error All I can see is loading my index.html and dispalying this

"Library App using Angular and Node"

shouldn't it be `templateUrl : 'views/books.html',`? (assuming index.html is in public folder, or else it would be `templateUrl : 'public/views/books.html',`) — Kaddath, Nov 24 '17 at 13:49
it might even be `templateUrl : 'public/views/books.html'`, as his index.html and main.js are outside — Aleksey Solovey, Nov 24 '17 at 13:51
I am not getting any error on console like unable to find books.html, I changed it anyway.I think issue with server.js — Codiee, Nov 24 '17 at 14:30
you made a comment in this question https://stackoverflow.com/questions/31495743/node-angular-app-uncaught-syntaxerror-unexpected-token/31495954#comment81861546_31495954 stating that "it didn't work for you", but your question here shows code simillar to the broken code in the question, not the proposed fix in the answer. i.e. use `app.get('/*',...)` rather than `app.get('*',...)`. The `/` helps the server realize you only want the wildcard from the root, not the wildcard from **everything**. — Claies, Nov 25 '17 at 07:05

Satendra · Accepted Answer · 2017-11-27T08:35:22.577

You need to take care of following things when you use ngRoute

As you have a modular structure and you have different files for your routes, controller and services then you must declare app variable once and make use of this variable while declaring service and controller

You main.js should look like

// declare app variable
var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider,  $locationProvider) {
    $routeProvider.when("/", {
        templateUrl : '/books.html',
        controller  : 'bookController'
    })
    ...
});

While declaring controller make use of same variable declared in main.js

app.controller('bookController', ['$scope', '$rootScope', 'sharedProperties', function($scope, $rootScope, sharedProperties) {
  ....
})

Now load script file in following sequence index.html

<script src="/main.js"></script>
<script src="/services/service.js"></script>
<script src="/controllers/bookController.js"></script>

Note: service.js should be above controller.js because controller make use of service.

Node / Angular : Template is not loading from angular router

1 Answers1