Particleground и Angular js

181

06 октября 2018, 18:20

Когда начинаю использовать роутинг из Angular 1.6.9 перестает работать Particleground, как можно пофиксить ? Для прелоадера у меня используется Particleground, который перестает работать когда я использую это -

Для прелоадера у меня используется Particleground, который перестает работать когда я использую это -

 angular.module('myApp', [
 'ngRoute',
 'angular-page-loader'
 ]);
 angular.module('myApp')
.config(function($routeProvider, $locationProvider) {
$routeProvider
// main route
.when('/', {
    title: 'Homepage',
    templateUrl: 'pages/main.html',
    resolve: {
        timing: function($timeout, $q) {
            var defer = $q.defer();
            $timeout(function() {
                defer.resolve();
            }, 3000);
            return defer.promise;
        }
    }
})
    .when('/elements', {
    title: 'elements',
    templateUrl: 'pages/elements.html',
    resolve: {
        timing: function($timeout, $q) {
            var defer = $q.defer();
            $timeout(function() {
                defer.resolve();
            }, 3000);
            return defer.promise;
        }
    }
})
        .when('/generic', {
    title: 'generic',
    templateUrl: 'pages/generic.html',
    resolve: {
        timing: function($timeout, $q) {
            var defer = $q.defer();
            $timeout(function() {
                defer.resolve();
            }, 3000);
            return defer.promise;
        }
    }
})
// sample route
$locationProvider.html5Mode(true);
})

Answer 1

Это происходит по той причине, что вы вызываете данный метод, когда angular-route еще не отрендерил шаблон, поэтому при начальной загрузке приложения вешаем обработчик событий DOMContentLoaded на document и вызываем particleGround и точно также вешаем слушатель на событие успешной навигации и отрисовки шаблона.

const app = angular.module('myApp', ['ngRoute', 'angular-page-loader']);
app.config( .....ваши роуты );
app.run(['$rootScope', ($rootScope) => {
    $rootScope.$on('$routeChangeSuccess', () => {
        const particleElement = document.querySelector('#your-element');
        if (!particleElement) {
            return;
        }
        particleground(particleElement, {
            dotColor: '#ff0000',
            lineColor: '#ff0000'
        });
        // или
        $(particleElement).particleground({
            dotColor: '#ff0000',
            lineColor: '#ff0000'
        });
    });
}]);
angular.element(document).ready(() => {
    const particleElement = document.querySelector('#your-element');
    if (!particleElement) {
        return;
    }
    particleground(particleElement, {
        dotColor: '#ff0000',
        lineColor: '#ff0000'
    });
    // или
    $(particleElement).particleground({
        dotColor: '#ff0000',
        lineColor: '#ff0000'
    });
});