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
– Kaddath, Commented Nov 24, 2017 at 13:49
it might even be templateUrl : 'public/views/books.html', as his index.html and main.js are outside — Aleksey Solovey
– Aleksey Solovey, Commented Nov 24, 2017 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
– Codiee, Commented Nov 24, 2017 at 14:30
you made a comment in this question stackoverflow.com/questions/31495743/… 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
– Claies, Commented Nov 25, 2017 at 7:05

Satendra · Accepted Answer · 2017-11-27 08:35:22Z

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.

Collectives™ on Stack Overflow

Node / Angular : Template is not loading from angular router

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related