angular js: reload a page after and ng-click

Question

I'm using spring boot for my backend and angular for front. In my back, I have a restful service which fetching an sorting data when the user call a defined route, then send the result to the front.

In angular, I made a service on this defined route and i'm parsing result to render them to the view. Everything works fine, except I want to reload the page after the user click on the button wich start my batch. On this button I already have an ng-click which works and start my batch. But I don't know how to reload the page after clicking this button. Maybe I shouldn't use another function in ng-click ?

my service :

(function() {
'use strict';
angular
    .module('pfja')
    .factory('Publication', Publication);

Publication.$inject = ['$http'];

function Publication ($http) {
    var urlOpeFlexFactureValide = 'api/invoice/valid-invoice';

    var getAllValidInvoice= function(){
        return $http.get(urlValidInvoice).then(
            function(result){
                return result.data;
            }
        );
    };

    return {
        getAllValidInvoice: getAllValidInvoice
    };
}
})();

my state.js :

          parent: 'app',
        url: '/publication?page&sort&search',
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'home'
        },
        views: {
            'content@': {
                templateUrl: 'app/batch/publication/publication.html',
                controller: 'PublicationController',
                controllerAs: 'vm'
            }
        },           
         params: {
            page: {
                value: '1',
                squash: true
            },
            sort: {
                value: 'id,asc',
                squash: true
            },
            search: null
        },
            resolve: {
           ....
            validInvoiceList: ['Publication', '$q', function(Publication, $q){
                return Publication.getAllValidinvoice();
            }]

my controller :

(function() {
'use strict';

angular
    .module('pfja')
    .controller('PublicationController', PublicationController);

PublicationController.$inject = ['$scope',... 'Publication', 'validInvoiceList'];

function PublicationController ($scope, ..., Publication, validInvoiceList) {
    var vm = this;
    ...

    vm.validInvoiceList = validInvoiceList;

    function runPublicationBatch(){

        var invoice = new Array();
            if (vm.validInvoiceList) {
            vm.validInvoiceList.forEach(function(inv) {
                if (inv.selected) {
                    invoice.push(inv);
                }
            });
        }
         ManualBatch.runPublicationBatch(invoice);       

    };

my html :

        <button ng-click="vm.runPublicationBatch()" class="btn btn-primary btn-md">
                <span class="glyphicon glyphicon-play-circle"></span>

                    Start
                </span>
            </button>

//my ng-repeat with vm.validInvoice...

score 2 · Accepted Answer · edited May 23 '17 at 11:54

You first need to inject service $window than you can use

$window.location.reload();

       function runPublicationBatch(){
         $window.location.reload();
            var invoice = new Array();
                if (vm.validInvoiceList) {
                vm.validInvoiceList.forEach(function(inv) {
                    if (inv.selected) {
                        invoice.push(inv);
                    }
                });
            }
             ManualBatch.runPublicationBatch(invoice);       

        };

Or when you want to reload the page.

you can reload with $route , $state service here

score 1 · Answer 2 · answered Apr 09 '17 at 11:31

1

If you are using $routeProvider then add $route.reload() inside the ng-click function

or

If you are using $stateProvider then add $state.reload('state.name') inside the ng-click function

Note: Basically reloading entire page is not best practices. So try to avoid reload

answered Apr 09 '17 at 11:31

Srigar

1,648
3
14
28

Reload is temporary, at the end i'll refresh my table. Thank you for your advice – ramsey_lewis Apr 09 '17 at 19:32

angular js: reload a page after and ng-click

2 Answers2