Can anyone suggests me angularjs framework with fabricjs.
I'm going to build angularjs application , having canvas (FabricJS).
Thanks in advance .
I would not recommend you to use angularjs with fabricjs.
The project I'm currently working on uses this combination.
We get a lot of troubles related to scope. E.g. if you need to update something in angular from fabricjs, you need to determine if angular digest loop is currently running and if not, run it.
You could try React + fabricjs instead. React looks more flexible and much faster works with DOM.
In my Angular project (seat reservation system) I use Fabric.js (for seat plan editor) without any complications. I have no problem with displaying more than 1000 objects.
Here you can find my "Hello World" Angular + Fabric.js project.
Here you can find my answer on question "How to use / include fabricjs in Angular2".
You should not worried about how bind them togheter. Keep it simpe.
Fabric will trigger a series of event from user actions, a bunch of event similar firing function that you can find in your doc. Use those to update your app state.
For all the rest keep a reference of the canvas in you scope and use it normally.
Related
I'm working to integrate noflo into AngularJS. For some reason, I've only been able to find an old answer that seemed to direct users wanting to do this to "the-graph", but wasn't super-clear: github.com/noflo/noflo/issues/286.
I am working to attempt to integrate into AngularJS; if anyone has a working example of doing this, a plukr or fiddle would be appreciated.
Secondly, the "left-click" option that allows editing node properties doesn't appear functional in the-graph example. It seems to work here, but not here. I was wondering how to get the search/properties edit box for each node to function when including inside an existing UI.
So, in sum,
How can I get the "left-click" node properties to show up in a custom UI?
How can I best integrate noflo into AngularJS? The-graph has a ton of other libraries that appear to need to be added (React, Polymer, HammerJS, KlayJS, KlayJS-NoFlo, etc..)
Thanks for any help!
It is not clear what you hope to achieve. Do you want to:
Program webapps using NoFlo and AngularJS?
Make an app (using AngularJS) with a node-editor like the one used in NoFlo UI (the-graph)?
Or something else?
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
Is there any way to make an ionic modal have a ui router nested state with multiple modal pages?
It sounds like you are describing a wizard, A model that has multiple pages (or steps). Because Ionic and AngularJS go hand in hand with each other you can use some of the pre-built AngularJS components to achieve this, here is a link to a few:
https://github.com/mgonto/angular-wizard
https://github.com/simpulton/angularjs-wizard
There is an ionic wizard plugin, which although it is designed for wizard like steps, will pretty much provide a set of linked modal pages which share state, which should meet your needs.
http://arielfaur.github.io/ionic-wizard/
It also has nice features such as preventing progression in a wizard until fields are filled out etc.
I would recommend not doing that because I have tried it in the past and in the end I realized that it wasn't really practical. What you could do is, add:
ng-include src="'your-template.html'" ng-controller="yourTemplateController">
Now you have a view and a controller associated with it. All that is left to is, make the URL change. This can be done by using location.hash, or setting $stateParams and checking for it using $watch. I hope this helps.
I am trying to find a solution for an image slider such as Amazing Slider and how to integrate it in my e-commerce web-app which I have developed using Angular JS. I want to have features such as lightbox and a slider with thumbnails underneath, and also video integration. I know its a lot to ask but its a shame that this very strong framework lacks (to my knowledge) a proper image viewer. Has anyone tried this integration before? Are there any other solutions. After doing a google search all I found is bootstrap UI and a gist for lightbox. But these are not anywhere near of what I am asking for. Please advise.
The reason AngularJS does not have such an inbuilt facility is that AngularJS was not meant to address such things. Its an application framework. It is not meant to be a UI framework.
Having said that, I am assuming you have the images you want to render in some sort of collection in AngularJS. So you can just write a very simple directive which will take your collection as a ng-model and render the slider for you. This allows you to reuse this component in multiple places in your app.
If you have only one place in your app that you need the slider, then just a simple ng-repeat will suffice.
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.