Node delivering same js files repeatedly

I am developing a node application using express. I have a index.html file which has path of all js files which is delivered using express. I have written a directive navigation for nav bar. Whenever I am using navigation directive express is continuously delivering same files repeatedly.But this problem does not happen when I do not use directive. I am not able to figure out why it is happening. Here is directive for navigation

(function () {
angular.module('wp').directive('navigation', navigation);

function navigation() {
    return {
        restrict: 'EA',
        templateUrl: '/commons/directive/navigation/nav.template.html',
        controller: 'navigationCtrl as navvm'
    };
}

})();

navigationCtrl:

 (function () {
  angular.module('wp').controller('navigationCtrl',['$location', 'authentication',
  function($location, authentication) {
      var vm = this;

      vm.isLoggedIn = authentication.isLoggedIn();
      /*if not logged in redirect to login page*/
      if(!vm.isLoggedIn) {
        $location.path('/');
      } else {
        vm.currentUser = authentication.currentUser();
      }

      vm.logout = function() {
          authentication.logout();
          $location.path('/');
      };
  }]);
})();

template:

<div class="navbar navbar-Default">
  <div class="container-fluid">
    <ul class="nav nav-tabs">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" style= "font-size:30px;padding-left:60px" href="#"><b><font color="orange">W</font><font color="#00bfff">P</font></b></a>
      </div>
      <div class="collapse navbar-collapse " id="myNavbar">
        <ul class="nav navbar-nav navbar-left ">
          <form class="navbar-form" role="search">
            <div class="form-group">
              <input  class="form-control" style="width:350px; margin-top:5px; " placeholder="Search people">
            </div>
          </form>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li ng-if="navvm.isLoggedIn"><a href=""></a></li>
          <li><a href="" ng-click="navvm.logout()">Logout</a></li>
          <li><a href="Home.html">Home</a></li>
          <li><a href="Explore.html">Explore</a></li>
          <li><a href="Nodes.html">Nodes</a></li>
          <li><a href="message_pop.html">Messages</a></li>
          <li><a href="MyPitch.html"><span class="glyphicon glyphicon-log-in"></span> Profile </a></li>
        </ul>
      </div>
    </ul>
  </div>
</div>

And following is app.js file

    require('dotenv').load() ;
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var passport = require('passport');

require('./app_api/models/db');
require('./app_api/config/passport');

var routesAPI = require('./app_api/routes/index');
//var verify = require('./app_server/verify');

var app = express();

// view engine setup
//app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'app_client')));
app.use(passport.initialize());
app.use('/api', routesAPI);
//app.use('/verify', verify);
app.use(function(req, res) {
  console.log("success");
    res.sendFile(path.join(__dirname, 'app_client', 'index.html'));
});


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/30/node-delivering-same-js-files-repeatedly/
via @lzomedia #developer #freelance #web #lzomedia.com