Opening angular application pages in sequence - second call to page.open not called

Question

Opening angular application pages in sequence - second call to page.open not called

I am trying to open 2 angular pages in an application to get their screenshots using phantomjs. Page 1 needs to be opened before page 2, as it prepares some data for page 2. I use two nested functions setTimeout()as follows:

var page = require('webpage').create(),
  t, url;

phantom.addCookie({
  'name': 'token',
  'value': '<authentication-token-goes-here>',
  'domain': 'localhost'
});

t = Date.now();
url = "http://localhost:8000/#/page1";

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.viewportSize = {
  width: 1366,
  height: 768
};

page.clipRect = {
  top: 0,
  left: 0,
  width: 1366,
  height: 768
};

page.open(url, function(status) {

  setTimeout(function() {

    console.log('page 1 status: ', status);
    page.render("page1.png");

    var url = "http://localhost:8000/#/page2";

    page.open(url, function(status) {
      console.log('page 2 status: ', status);
      setTimeout(function() {
        page.render("page2.png");
        phantom.exit();
      }, 5000);
    });
  }, 5000);
});

The first console instruction: it console.log('page 1 status: ', status);prints, and I get application logs and a screenshot of page 1, but the second console log (page 2 status) is not printed because the internal call is page.open()not being called, It also hangs the console itself, because it is phantom.exit()not being called due to not being called callback.

page.open() , 2 (, XHR)! , 2 .

- ( Google facebook), . angular. ?

+6

javascript angularjs phantomjs

Rishabh 30 . '17 7:28

1

Oskar · Accepted Answer · 2017-04-11T14:10:17+0000

, , - AngularJS, :

var routingExample = angular.module('Example.Routing', []);
routingExample.controller('HomeController', function($scope) {});
routingExample.controller('BlogController', function($scope) {});

routingExample.config(function($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController'
  }).
  when('/blog', {
    templateUrl: 'blog.html',
    controller: 'BlogController'
  }).
  otherwise({
    redirectTo: '/home'
  });
});

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <title>AngularJS Routing</title>

  <script type="text/javascript" src="script.js"></script>
</head>

<body ng-app="Example.Routing" class="ng-scope">
  <script type="text/ng-template" id="home.html">
    <h1>Home</h1>
  </script>
  <script type="text/ng-template" id="blog.html">
    <h1>Blog</h1>
  </script>

  <div>
    AngularJS Routing

    <div>
      <a href="#/home">Home</a>
      <a href="#/blog">Blog</a>
    </div>

    <div ng-view></div>
  </div>
</body>

</html>

Hide result

# URL, , page.open phantomJS ( ). phantomJS . URL- . , . ( phantomJS script):

var page = require('webpage').create(),
  t, url;

phantom.addCookie({
  'name': 'token',
  'value': '<authentication-token-goes-here>',
  'domain': 'localhost'
});

t = Date.now();
url = 'http://localhost:8080/#/home';

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};

page.viewportSize = {
  width: 1366,
  height: 768
};

page.clipRect = {
  top: 0,
  left: 0,
  width: 1366,
  height: 768
};

page.open(url, function(status) {

  setTimeout(function() {

    console.log('page 1 status: ', status);
    page.render('page1.png');
    console.log('page1.png rendered');

    console.log('moving to the second page ' + url);
    page.onUrlChanged = function(targetUrl) {
      console.log('URL changed, New URL: ' + targetUrl);
      console.log(page.url);
      if (targetUrl !== 'http://localhost:8080/#/home') { // the default page
        setTimeout(function() {
          page.render('page2.png');
          phantom.exit();
        }, 1000);
      }
    };

    console.log('onUrlChanged callback handler set up');

    var url = 'http://localhost:8080/#/blog';
    console.log('opening the ' + url);
    page.open(url, function(status) {});

  }, 1000);
});

Hide result

:

Opening angular application pages in sequence - second call to page.open not called

More articles: