How to use ajax pages with Angular 1.x in Framework7

Since my last screencast about how to use F7 with Angular the most asked question that I got was about ajax pages, something like this:

"In your example you have all your pages in one html file but what if I separated each page into its own file using Framework7’s ajax pages mechanism? (read F7 docs about ajax pages).
If I use it, all the bindings from Angular do not work anymore. How do I fix this, oh mighty Timo?"

(Minor quote inaccuracies might be included)

Well, the problem here is that Framework7 will get each page via ajax (when a link that points to it is clicked) and then inject it into the DOM. Angular does not know anything about this and thus will not update any bindings. Luckily, there is an easy fix for this.

The solution to ajax pages with Angular

When you inject a new HTML snippet into the DOM via Ajax pages, you simply do:


(See demo source code for an example how to use this)

This will recompile the HTML snippet that got added and then apply the changes and BOOOOM, that’s it.

Note: You don’t want to do this to often as it affects performance quite a bit.


I also created a quick demo for you to check this out. In order to work you must serve it via http protocol from a web server like Apache or NGINX. Just double-clicking the index.html file and serving it via file:/// will not work because you cannot do ajax calls via file:///.

Get the demo on: Github

New project:

I created a new online platform called

The goal is to provide really simple and quick examples for common ZK use-cases and requirements (what is ZK?).

The idea is based on which was a great help to me when I was coding a lot of Adobe Flex.

If anyone has some nice examples to share, feel free to sign up and just post it (requires review and approval by me).

I, personally, try to post every time I learned something new about ZK.
Might help someone else who has the same problem.

Please, Adobe. Give us the Ajax Builder!

I think, I already mentioned that I really like Adobe’s products for creating animations and rich internet applications, which are namely Flash Professional, Flash Builder, Catalyst and Illustrator. What I don’t like is the target platform: The Flash Player. So, after all these debates about Flash, isn’t it time to simply drop the Flash Player and add an additional compiler option for Flash Builder and Flash Professional? Yes, you guessed right. I am talking about HTML5 deployment. Wouldn’t it be great if one could build rich internet applications using technologies like ActionScript3 and MXML, which are both superior to JavaScript and pure HTML, without being forced to target the Flash Player? Flash Professional could simply render into HTML5’s <Canvas> element. It has already been shown, that this is possible. Flash Builder could simply transform the code base into HTML/Ajax, similar to the client-side part of GWT. I know that I might sound a bit childish here but, I’d call this “Ajax Builder” :-D

Don’t get me wrong. I didn’t say: “Replace the Flash compiler option.” – This is important since there are still some things HTML5 can’t handle, like webcam support for example.
=> No Flash, no ChatRoulette.
So, til HTML5 is ready to completely replace Flash, both compiler options must be offered.

Also, the whole Illustrator-Catalyst-FlashBuilder workflow should be kept and optimized for HTML5. Although Catalyst is still in its baby-shoes and has some serious mis-concepts, the basic idea is great. Adobe should keep working on this.

Further, AIR shouldn’t be canceled if Flash gets (ever) dropped. Instead, AIR could be a great way to bring Ajax-based rich internet applications to the desktop (and mobiles).

The benefit is clearly visible: Flash-developers can keep using their knowledge about AS3, MXML and Adobe’s software products, but simply target a Flash-free platform.
In the same time, all this Flash-sucks-no!-Flash-is-great-blahblah would finally come to an end.

Update: Seems like, Adobe heard me :-)

One reason for using Flash instead of HTML5

I think, I finally found an answer to the question, why one should use Flash instead of HTML5: Binary sockets

Newer Flash Player versions allow developers to open binary socket connections, which is not possible using pure HTML5/JavaScript in the browser (HTML5 only supports websockets, which are different).

Thus, for example, it would not be possible to create a FTP client without Flash or a backend system since such an attempt would require one to open a socket in order to implement the FTP protocol.

XMLHttpRequest and subdomains

If you’re trying to do a XMLHttpRequest in JavaScript but keep failing, this might help you:

First, you need to know two important things:

  1. If you try to call a file using the XMLHttpRequest object in JavaScript, which is located on a different server, relative to the running JavaScript source, you’ll probably get an error.
    The simple reason for this is, that many servers don’t allow crossdomain http-requests.
  2. If both files, the JavaScript source, and the file to parse, are on the same server, using the same domain, you should be safe.

Now, here comes the nasty problem.

Let’s assume, we have a JavaScript file called test.js, which is located at

Further, we have a test file, which we want to load though our Ajax call, which is located at

Now try to do the Ajax call like this:

var req = new XMLHttpRequest();"GET", "", false);
req.setRequestHeader('Content-Type', 'text/plain');
req.onload = function(){
alert("Ajax call was successful");

Open the JavaScript file in your browser.

You’ll notice that this won’t work. Why is that so?

The reason is simply, that we forgot to type “www” in the browser:

Remember that “www” is just a subdomain, nothing more, but enough to change the domain name so that our Ajax call won’t work. In many browsers, you can just type instead of and it’ll work fine as long as you just want to surf the web, but if you’re doing Ajax calls you’ll really have to be careful. Might save you a lot of time and nerves :-)