Nerd stuff

Video Screencast: How to use Framework7 with Angular 1.x

Timo

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 Angular 1.x

Please keep in mind that this tutorial is older and refers to Angular 1.x If you want to use Angular2 or newer, please read this article first!

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?

Links

Follow me on social media

Related posts:

  1. Why I do not use Ajax Pages in Framework7
  2. Build a Calendar in 5 mins with HTML and Framework7 | Video Tutorial
  3. How to use ajax pages with Angular 1.x in Framework7
  4. Should I use Angular’s ngRouter in Framework7?

47 thoughts on “Video Screencast: How to use Framework7 with Angular 1.x”

  1. 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('http://www.araminoticias.com.ar/?json=get_category_posts&slug=deportes&count=10&status=publish');
};

    This is ok? thanks

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

  5. Pingback: Mobile Web Weekly No.82 | ENUE

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

  14. Pingback: Video Screencast: How to use Framework7 with AngularJS – AngularJS News by AngularJobs.com

  17. 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…

  19. Thank you very much, It’s working fine…

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

    .lazy {
    opacity:0;
    transition: all 500ms;
    }
    .lazy.success {
    opacity:1;
    }

  20. 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:

    $routeProvider.
    when(‘/category’, {
    templateUrl: ‘category.html’,
    controller: ‘CategoryController’
    })

    and

    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.

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

  24. @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.

  29. @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);
    by:
    onReady();

    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?

  30. @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: http://stackoverflow.com/questions/12576062/jquery-document-ready-vs-phonegap-deviceready

  31. @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!

  36. Thanks for that, I configured by using that tutorial previously. Its working fine i just asked for confirmation.

    Moreover, when i try to change the theme when device android. content starts from title bar instead of after title bar.

    Can you tell me why is that happening.

    Here you can find the index.html.

    (Code removed by admin due to insufficient formatting. Please post your code to Codepen – thanks!)

  37. @kiranrajujakka What do you mean? Can you post your code to Codepen so we can see what’s going on? Also, a screenshot of the problem might help. Thanks

  40. @kiranrajujakka

    As the documentation states, you need to change navbar to “fixed” layout. See the part of the documentation where it says this:

    “And the final part before App initialization, we need to change “Through” type navbar layout to “Fixed” in Material theme (for Android):”

    if (isAndroid) {
    // Change class
    $$('.view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
    // And move Navbar into Page
    $$('.view .navbar').prependTo('.view .page');
}

    Also, noone deleted your reply. It needs to be approved first which can take some time.

  41. I’m very glad to here that there is a support on my thread.. Thank you very much for that.

    Can you help me to configure environment service for this angular template. I started working on this template since 1 month. Moreover I started my first hybrid application which has started with this template only. I’m struggling with configuring this template to environment service.

    Thanks again for awaking people on hybrid app development.

    Hope you might get notified me as early as possible.

    Thanks & Regards,

  42. @Anonymous Since the release of Angular2 I cannot recommend to use this template any more, since it’s based on Angular1. If you want to use Angular, better go for Ionic. If you want to use Framework7, use VueJs.

  44. Hi,

    I have thorough knowledge on AngularJs, I would like to play with angular- Framework7. Could you please correct the environment service for me. I Wrote few line in config.js which you can find in the below link,..

    In that i’m unable to inject the envService to app.

    Could you please help on:: is this the correct approach or i need to follow something else which is preferable for Framework7?

    https://www.dropbox.com/s/qaszt1fckhsuadl/config.js?dl=0

    Thanks & Regards,

  45. @Anonymous See my previous comment:

    Since the release of Angular2 I cannot recommend to use this template any more, since it’s based on Angular1. If you want to use Angular, better go for Ionic. If you want to use Framework7, use Vue.js or jQuery.

  46. Hi Timo, Why my json cannot read at index.html. np-repeat cannot work, what should i do for fixed?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.