Angular loads HTML index instead of ng-app.js on refresh

Question

I am playing around with adding in an Angular-UI router which is working perfectly when I click on links within my application. For example, if I go from / to /feed/9 it will load in the /partials/post.html file into the ui-view div and I can then use the '9' held in $stateParams to populate the template with the data from post 9. However if I refresh the page, the site breaks and Angular tries to load index.html as the ng-app.js file? I have no idea what is happening here. I've uploaded some screenshots to demonstrate this and I've included my node server, angular routing and the relevant html partials. I have no idea where this is going wrong so I can provide any additional data and any help would be greatly appreciated!

Working fine when coming from another link on '/'

On refresh!!

Node - server.js

var = /* Dependencies and vars */;

mongoose.connect(dbConfig.url, dbConfig.options);

app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.use(bodyParser());
app.use(flash());

require('./routes/api.js')(app);      //For CRUD operations on the database
require('./routes/api_proc.js')(app); //Protected endpoints for CDN
require('./routes/api_ext.js')(app);  //For getting data from GCal, fb, Twitter and Instagram

/* The following code is a url rewrite to pass all
   further get requests that aren't defined in the
   above routing files through the index page and
   hence through the Angular 'frontend' routes */
app.use(function(req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

app.listen(port);

Angular ng-app.js

var app = angular.module('app', ['ui.bootstrap', 'ngResource', 'ui.router']);

//Using state ui-router
// ROUTES
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url : '/',
        templateUrl : 'partials/home.html'
    })

    /* ... */

    .state('feed', {
        url : '/feed',
        templateUrl : 'partials/feed.html'
    })
    .state('post', {
        url : '/feed/{id:.*}',
        templateUrl : 'partials/post.html',
        controller: 'postController'
    })

    $locationProvider.html5Mode(true);

});

app.factory("Feed", function($resource) {
  return $resource("/api/feed/:id", {}, {
      query: {
          isArray: true
      }
  });
});

app.controller("postController", function($scope, Feed, $stateParams) {
    var feed = Feed.query();
    feed.$promise.then(function(promiseData) {
        postArray = promiseData.slice(0,promiseData.length);
        $scope.feed = promiseData;
        $scope.id = $stateParams.id;
    });
});

index.html

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <!-- CDN -->
            <!-- Angular, Bootstrap, Angular modules, etc. -->

        <!-- Styles -->

        <!-- Angular Script import -->
            <script type="text/javascript" src="ng-app.js"></script>

        <base href="/">

        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>     
        <nav><!--Bootstrap nav--></nav>

        <div ui-view></div>

        <footer></footer>
        <script>
            //For Bootstrap tooltips which are in some of the partials.
            $(document).ready(function(){
                $('[data-toggle="tooltip"]').tooltip(); 
                $('[rel=tooltip]').tooltip();
            });
        </script>
    </body>
</html>

/partials/post.html

<div class="container-fluid main-content">         
    <header class="banner" class="row">
        <h1 class="page-title">{{id}}</h1>
    </header>

    <!-- Main page info -->
</div>

try src="/ng-app.js"; without the / you are telling the browser to load the resource from a directory relative to your current path, rather than the document root. When you click links within angular, they do not force the browser to load a new page, and thus the ng-app.js isn't loaded again. but when you hit the refresh or type in the url by hand, it does cause the browser to perform that search. Better yet, don't store .js or .css files in the document root, but in their own directory to avoid this kind of confusion. — Claies
– Claies, Commented Aug 31, 2015 at 8:31

farincz · Accepted Answer · 2015-08-31 08:15:25Z

3

I think you have relative paths pointing to your css files. When you load page from /feed/9 then links are invalid. Maybe it happens also for templates referenced from angular.

answered Aug 31, 2015 at 8:15

farincz

5,1931 gold badge33 silver badges42 bronze badges

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

1 Comment

admrply Over a year ago

Amazing! Thank you! Changed <script type="text/javascript" src="ng-app.js"></script> to src="/ng-app.js" and it works brilliantly! Can't believe that's all it was! Haha

Collectives™ on Stack Overflow

Angular loads HTML index instead of ng-app.js on refresh

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related