Framework7: Framework7 + AngularJS

[nodkrot]

This is a well done framework (in the very early stages). However, I decided to use framework7 for one of my projects and I wanted to integrate it with angularJS. The difficulty I faced is combining page transitioning/changing from both frameworks. Angular uses ng-view and Framework7 similarly (with partial html) changes pages except for top navbar and bottom navbar.

Help/Advice on how to control the navigation of pages in Framework7 with AngularJS routes, templates would be very useful.
Thank you.

[nolimits4web]

Hi there,
I personally not familiar with Angular, never used it, so there will no be much help from me:) But I am looking to add such drivers here for common MVC libs like Angular, Ember, etc.

I think we need an Angular pro here to answer your question;)

[MathiasTim]

Hey guys, just found this framework and it looks pretty amazing...
Just searched Github for Framework7 + angularjs and found this question.

I'd not say I'm an angular pro, but I'm coding an angular hybrid app for ipad since January, so maybe I can answer your question.
At the moment I didn't look at any code of the framework7s javascript, but it's not really ease to integrate a framework with so many javascript components into angular. Since when you use angular, you don't want to use massive dom manipulation, that is not handled by angular its self.

For routing, templates and animating this stuff, I can recommend the angular-ui-router

If anyone else will write a sort of angularjs port/connector of framework7, would be nice to hear, I'm definitely interested in it.
But maybe the ionic framework is what people will use when they want ios7-looking-components with angularjs.

@nolimits4web don't get me wrong, I think you guys did/do an amazing job here, hope documentation is coming soon :)

[nolimits4web]

Hey guys, can you try to explain me (as a non-angular user) why you need it here and how you use it, what for? F7 is already has pretty solid routing. If you need angular as template engine (for example to parse your JSON and create content dynamically) it is already possible, you can just include your favorite template engine lib and use view.loadContent method to load dynamically generated content.

@MathiasTim as for me, unfortunately ionic is pretty far away from ios 7 look and behavior:)

[nodkrot]

Hi @nolimits4web , thanks for the fast reply. before i start explaining why i would prefer to use angularjs, i have not yet seen any documentations for Framework7 but i'm looking forward to it.

AngularJS:

• provides two way binding: an intelligent way of sharing data between the model and the view. See http://docs.angularjs.org/guide/databinding
• stateful hash urls so refreshing application brings you back
• consumes and manipulate data easily via api
• client side templating. here i am not referring to jade, since jade is processed server side, this limits what i can do on the client side.
• backed by google. on top of the corporate support it enjoys from google, it also has a large community. This is extremely valuable.

Take a look at the angular, its easy to get started. Hope this gives you some insight on to why i was trying to integrate framework7 with angular.

[fabiobiondi]

+1 for AngularJS support.

As AngularJS dev I have to admit that Ionic is what I always dreamed but the UI and the look & feel of framework7 UI seems much much (much much) better. Awesome job!

[cnjsstong]

+1 for AngularJS support.

Always dreaming of a artistic mobile UI framework for AngularJS apps.

[fabiobiondi]

cnjsstong2: your dream might become reality. Follow me on G+ and you might have some surprises in the next weeks ;)

[nolimits4web]

@fabiobiondi are you going to make Framework7 work with Angular?:)

[fabiobiondi]

@nolimits4web : no no.. I meant we are developing a new UI framework with a lot of ready-to-use AngularJS creative components/directives/utilities based on ThreeJS, HTML5 Canvas, D3 and many others interesting libraries.

So I would be very happy if Framework7 will support AngularJS because our framework might be used with it too : )

[toinkiie]

@nolimits4web IMO maybe we need mvc just to separate modules and data , the routing of f7 is solid but there is no model part it is so hard to manage the project if all codes and webservice inside app.js?

[nolimits4web]

I am thinking about that. I think about to add option to disable built-in router, so you can build your own with totally custom animations and transitions. Also i will try to expose methods for page transitions which also should give opportunity to use it with 3rd party routers

[cnjsstong]

@nolimits4web That would be wonderful!

[fabiobiondi]

@nolimits4web: perfect!

[yoorek]

I am currently integrating F7 with AngularJS. I chose non-invasive approach using already defined hooks like "pageInit" event etc. I am using built in F7 router focusing only on DI, databinding and more semantic directives etc. leaving routing, dom manipulation, animations etc. to F7.

I manage to make progress but I stuck with dynamic navbar - the problem is that you don't provide any "hooks" for navbar manipulation - navbar DOM manipulation is inside _load private function and there are no triggered events.

So, It would be great if you could provide triggers for navbars just like for pages in _load.
For example like this (i inserted it in _load function):

if (dynamicNavbar) {
   newNavbarInner.addClass('navbar-on-right');
   navbar.append(newNavbarInner[0]);

   app.navbarInitCallback(navbar, newNavbarInner[0]); // added navbarInitCallback
}

Just for example navbarInitCallback simplistic form of navbarinitCallback:

app.navbarInitCallback = function (navbar, navbarInner) {
   ....
   $(navbar).trigger('navbarInit', navbarInner);
};

[nolimits4web]

Hi, that sound good and seems to be just three new lines is all you need to realize it. So ok, i will add this callback in upcoming release. By the way, i'm going to add Plugins API to framework, that will be based on many hooks, they will give you more flexibility

[yoorek]

Perfect. With hooks like this I can make Angular and F7 work like a charm - using the best of both worlds.
(And actually I am quite happy with F7 routing and page loading - I think Angular ui-router or ngRoute are not necessary for Hybrid apps and most mobile web apps)

BTW - Both pure Angular frameworks for mobile (ionic and onsen) are jokes comparing to F7 - I'd rather spend time for integration F7 w. Angular then using any of them. Great Job!!!

[nolimits4web]

@yoorek by the way. I am also thinking about to add option to disable built in router, so you can create your own (for example with Angular) with own transitions (probably just with duplicated logic from F7's code) where you just need to call methods like app.pageInitCallback, app.pageAnimCallback to init framework's components. What do you think?

[yoorek]

@nolimits4web : Honestly - I'm not sure if it's necessary. First - it would require a lot of work from you and probably also on Angular side. I like idea of integrating with Angular via callbacks from F7 and using F7 routing, transitions, animations - they work very nice. Also, I think it would not solve all problems and would make rather complicated stack. Routing in mobile apps is not so complicated that we need all states, named views etc. - stuff that is provide by Angular UI-Router and is a must for complex web apps.
But, I don't know F7 very well and I just started integrating it with Angular - so far I am quite happy with results (I can use Dependency Injection, Data Binding, Services etc and it's enough... for now. I will let you know when I ancounter problems and when I will have clear idea about best integration scenario. I will publish my solution with demo app in a couple of weeks.

[cnjsstong]

@nolimits4web Hi, I'm currently also trying to integrate Framework7 with AngularJS. I'm keeping F7's page loading and wrapping views and pages into directives, and will try to make a customized routing later. So far everything seems so good. I just wonder if it's possible for you to add an animation toggle to the app.loadPage(view, url, pushstate) function? Something like app.loadPage(view, url, pushstate, animate) in which animate is a boolean would be wonderful. Thank you for the excellent work!

[cnjsstong]

And +1 for @yoorek , a navbarInit event would be extremely helpful for integrating with AngularJS!

[lukemt]

@nolimits4web sounds great. I recently tried out integrating it with meteor. Since you are using these "live-events" all over, it works just fine (exept for some smaller issues). Somehow connecting F7 and iron-router would propably be the only challenge.

[toinkiie]

@cnjsstong2 can you please enlighten us the newbie how di you implement it in angular hehe thanks :)

[nolimits4web]

Guys, thanks to @cnjsstong2 'navbarInit' event is already in dev version: https://github.com/cnjsstong2/Framework7/commit/ac5530e6829fb114339889bdd53fed92e062500c

[nolimits4web]

@cnjsstong2 @yoorek can you guys tell me on which "page loading" parts (or any code parts) you would like to see plugin hooks callbacks? You will be able to use these hooks instead of event listeners in your angular plugin

[nolimits4web]

Hooks are similar to callbacks, your Angular plugin structure could look like:

Framework7.prototype.plugins.myPluginName = function (app, params) {
  ... do any safe scoped code here
  ... and return hooks
  return {
    onPageInit: function (page) {},
    onNavbarInit: function (page) {},
    onAjaxStart: function (xhr){},
  }
}

So the cool part is that F7 will call your plugin's local hooks function

[cnjsstong]

I think when we do AngularJS integration, an easy way would be to use F7's page loading and somehow routing. For now, as we've got pageInit and navbarInit events, we can do something after a page gets loaded.

After F7 loads a page, we need to $compile the HTML and link it with an Angular scope. If there is some mechanism to share a scope(which can be treated as an JavaScript object) between onPageInit and onNavbarInit hooks, or just make sure both hooks are executed in synchronized order, it would be better. Maybe add a onPageAndNavbarInit hook?

[cnjsstong]

And for Angular users, I don't see it a good idea to integrate F7 with existing angular-route or angular-ui-route, as they are so different in basic concepts of routing. It might be necessary to build some specialized routing service like angular-f7-route... So I think it would be useful if there are some mechanism for the plugins to access the location history of a view.

[nolimits4web]

Ok, guys, from new 0.8.6 release there is a new Plugin's API.

I've made demo plugin with main plugin structure with hooks https://gist.github.com/nolimits4web/2a7e3b597bd2d8dbaf01

This plugin does nothing, just console log each hook with arguments. So you can already try to make it like Angular plugin. At least it would be better than using event listeners. There are not much hooks at the moments, now they mostly like 'pageInit' callbacks. But let me know or PR if you need more hooks

[nolimits4web]

@yoorek @cnjsstong2 guys, do you have any success/progress with using plugin hooks and Angular? Is it more convenient than using page events listeners?

[tschiemer]

Hiya

Also trying to use angular in combination with framework7, but not yet so much familiar with both frameworks. Essentially I want to use the controllers (with the databinding) and some services as an enhancement to framework7.

In my application bootstrapping is set up to first load the framework7 App and then any (angular) logic+data - idea is to have the views set up as quickly as possible for the user. This means that angular is loaded after the framework7 app is created; thus the plugin couldnt be used. But it would momentarily seem as if the plugin isn't necessary as the hooks for navbarInit and pageInit suffice.

As I see it, the dynamic loading of angular resources on page loads requires using the navbar and page init hooks - in navbarInit angular compilation fails for the page-dom (page-dom not yet inserted (?)), in pageinit the navbar is not available. _I would suggest, also passing the navbar object during the pageInit event_ which would make it simpler and makes sense as navbar and page belong together.

Sharing angular scopes is not necessarily a big issue in itself as it can in principle easily be done using some angular factory. But a question would be wether and how to manage the different scopes for different framework7 view stacks as not to pollute/leak scope data into scopes where it does not belong

To share some example (testing) code for any other developers looking into the same issue

https://gist.github.com/tschiemer/d30973454467ff08d6dc

[nolimits4web]

Hey there,
Yes, as i see now, navbarInit happens when page is not yet in DOM but it is available, it just detached. But you got it right, i will make its call a bit later when page is already avaiable in DOM. And will take a look to add navbar to pageInit

Thanks for sharing a code, it is a dark forest for me :), but i am sure it could be useful for Angular users

[kevincobain2000]

Hi,
Does the 1.0.0 release enable us to use f7 with angularjs ?https://github.com/nolimits4web/Framework7/commit/e4f701176d24c5896f8b290ce71a7bae2db38a54

[nolimits4web]

@kevincobain2000 i am not strong in Angular, but i see that many already use F7 with Angular, so yes, you can use it with Angular

[kevincobain2000]

@nolimits4web Sweet I will give it a go.
If you come across some tutorial or even template project using F7 and angular, could you please post the links over here.

[CaledoniaProject]

I had the same doubt, but then I found the following solutions!

Use template7
http://www.idangero.us/template7/

Really, nobody ever found this demo?
https://github.com/valnub/Framework7-with-AngularJS-demo-app

[pruimmartin]

Hi guys! I'm using F7 for a while and now want to integrate angular just for data binding etc.
In the index.html page everything is working as expected. However if i open another html page (in the same view) just by clicking an anchor tag. All Angular Magic stops working.

Has anybody else had this issue? Thanks!

[CaledoniaProject]

@pruimmartin Try template7 with pageInit callbacks

[nolimits4web]

It is time to close this issue as there are many examples of how to use both

[ashvin777]

Try this.. https://github.com/ashvin777/framework7.angular it is under development but can we used for framework7 and angularjs combination. Cheers !!

[russiann]

I'm currently also integrating F7 with AngularJS. I create a custom F7 Router for angular very similar to ngRoute like this:

$Router()
  .when('#/', {
    name: 'Showcase',
    controller: 'ShowcaseController',
    controllerAs: 'vm',
    templateUrl: 'showcase.view.html'
  })
  .when('#/product', {
    name: 'Product',
    controller: 'ProductController',
    controllerAs: 'vm',
    templateUrl: 'product.view.html'
  })
  .when('#/register', {
    name: 'Register',
    controller: 'RegisterController',
    controllerAs: 'vm',
    templateUrl: 'register.view.html'
  })

And it works!
I will give more news soon ;D

[ashvin777]

Hello Guys,

Try the working demo(Kitchen-sink-app) of Framework7 along with AngularJS at below URL
http://ashvin777.github.io/framework7.angular/kitchen-sink-material/#!/home.html

Github Repo
https://github.com/ashvin777/framework7.angular

[rajukiran]

Hi,

I configured environment service for F7 along with AngularJS project, At last, I need to inject the envService as a module to the project. Can anyone help me on how to inject the module in F7

I tried like this,
MyApp.config.$inject=['envService'];
MyApp.angular.module('MyApp').factory('UrlConfig',config);

Thanks & Regards,