Video Screencast: How to use Framework7 with AngularJS

After posting my experiment of using Framework7 with TypeScript and Angular I get quite some questions from people on how to properly use F7 with Angular, so I made a quick screencast:

How to use Framework7 with AngularJS

About using ajax pages

If you use Framework7’s ajax pages mechanism read my blog post about this and how to get this working with Angular.

Should you use Angular UI router with Framework 7?

If you want to find the answer to this, check out this blog post: Should I use Angular’s ngRouter in Framework7?


33 thoughts on “Video Screencast: How to use Framework7 with AngularJS

  1. Gaston says:

    Hi Timo, i try to use this code to show posts from wordpress blog. I install “json api” plugin and i change this line:

    pub.getMovies = function () {
      return $http.get('');

    This is ok? thanks

  2. Gaston says:

    Its me again… in your example use local json and i need to use online json result like lastest comment. Thanks again

  3. Anonymous says:

    Hi. Works great in the browser but when i run it on the xcode simulator nothing loads? Is there something I’m missing? Thanks

  4. Jigs says:

    How can I add lazy loading with this? I had try but it’s not working, I think I’ll need to use data-src instead of ng-scr but when I use data-scr image gone away…

  5. Jigs says:

    Thank you very much, It’s working fine…

    I also create simple css class as follows for fade effect… that looks cool.

    .lazy {
    transition: all 500ms;
    .lazy.success {

  6. Jigs says:

    I am creating ecommerce app, and I have all dynamic data, and as per your this tutorial I have added home page content in index.html file, and create itemlist.html and itemdetails.html and include using ng-include so my index.html page will not too big.

    Now i am stuck on navigation, I have added all my categories in side panel, now I want my product will list on app when I click on side panel category and it’ll list related products as per category, for that I have tried route like:

    when(‘/category’, {
    templateUrl: ‘category.html’,
    controller: ‘CategoryController’


    in index.html

    when I click on my category it’s load category.html page but all my home page content still there and category.html is not being render properly when I type test on top of category.html file it’s print, when i click on it. but all inside content won’t display.. after related product will load I’ll also add sort by and filters in it.. so I thinking to use route base navigation like myapp/category.html?category_id=1&color=red&size=xl

    do you have any example of such kind? or can you tell me how to do this? or is there any better way?

    Thanks a lot.

  7. developersnepal says:

    HI Timo Is there any real benefit of using Angular js with F7? Does it improves the performance of the app?

  8. @developersnepal Well, performance-wise you would be better off without Angular since it is a lib which is known for its low performance. However, by using Angular you benefit from its usual features, like e.g. dependency injection, MVC model and data-binding which helps you write less code (when compared to Dom7 or jQuery) and have everything more organized.

  9. Marco says:

    @Timo I was trying to make it run in phonegap and i managed to do it only when i replace:
    document.addEventListener(“deviceready”, onReady, false);

    So looks like document.addEventListener(“deviceready”, onReady, false); is not working anymore i think. Therefore using:
    if (document.URL.indexOf(“http://”) === -1 && document.URL.indexOf(“https://”) === -1) { is not needed anymore, am i right?

  10. @Marco Nope, deviceready is still vital! You have to combine both like this:

    $(document).ready(function() {
      document.addEventListener("deviceready", function () {
        // init your code here
      }, false);

    The following code is required to check if you’re on file:/// protocol (PhoneGap) or http (web). If you only use PhoneGap, then you can remove it, yes.

    if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) {}

    Check this S.O. post for more info:

  11. Marco says:

    @Timo I found out i was forgetting to import cordova.js, thats because deviceready was not working. Sorry my mistake.

    Thank you Timo for your attention.
    Keep up the good work!

Leave a Reply