So I have a project that I am working on and it requires that I use jsPlumb for graphical elements connections and I am building my app entirely using AngularJS.
What is the procedure to follow if I want to include another library's code into my controller (to fire up some jsPlumb code, say on ng-click) or any other part of my AngularJS code? Should I do that or why should I not do that?
Take a look at this well-commented jsPlumb/angularJs integration example:
https://github.com/mrquincle/jsplumb-example
I don't see an easy way to establish two way data binding between Angular and jsPlumb.
What I ended up doing on my project is creating a custom Angular service which serves as a bridge between controllers and jsPlumb. Such service contains methods specific to application, such as:
removeElementFromFlow
addElement
getElements
getConnections
isElementConnected
etc.
It allows to keep all jsPlumb plumbing code outside of controllers, keeping them clean.
JSPlumb has put out a tutorial on how to use JSPlumb with Angular:
https://jsplumbtoolkit.com/docs/toolkit/demo-angular.html
Related
I've a Java developer who's begun working in the Javascript enterprise domain. Specifically I've begun working with Strongloop/Loopback API and AngularJS in the client.
I'm creating entities with ease with Strongloop and am very impressed with how quickly I can generate an expanded model. When it comes to the client however things appear to slow down as I have to manually create the Angular Controllers, Services and the crud template views.
I've used reflection in Java considerably in the past and I found it to be very effective. I was hoping someone might be able to let me know if there's either a reflective way to initialise Controllers so that I could have one EntityController if you like that would export the CRUD methods. Alternatively if there's a tool that might be able to access the restful api and generate generic templates, controllers and services for the restful API?
Thanks in advance for any help!
Mark.
I believe that you are looking for loopback angularjs SDK.
It will not generate views and controllers but you will have angularJS services generated that contains all the LoopBack models and methods you have defined. You have to register the AngularJS module lbServices as a dependency of your app.
Documentation covers this very well with step-by-step instructions how to setup client application.
After you setup loopback angular client, then it is easy to use models in your controllers. All you have to do is to add your model as a dependency in your controller.
If you want to avoid manual work of generating angular controllers, routes, views etc then you should consider using one of the angular application generators ( i.e. yeoman generator-angular ).
To make long story short:
use angular generator to generate angular application.
generate angular services using loopback angularjs SDK.
add loopback model as dependency to your controller or service
See also Angular SDK built-in models API
I have AngularJS app called myApp. It has several controllers which are used in different pages (website is based on Symfony so page reloads happens sometimes). I need to execute some lines of code in every controller. how do I do that without duplicating that code?
You can use angular.service
Services
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
click here for More details
In angular we are used to DI, services, routing and the like. I am wanting to hear from people who have projects that have transitioned to polymer from angular and what they found to be correct way to approach and accomplish similar feats in Polymer. I've found the easiest comparison to be made with the directives and custom polymer elements but from there things diverge.
How do we go about sharing some sort of "service" in a polymer app and create some sort of DI container where we can use to mock dependencies? Also would like to know how you accomplished (routing/nested routing) where before you could have used the ng-Router or UI-Router.
This might help you get going with routing https://github.com/erikringsmuth/polymer-router-demos.
When you use custom elements your APIs are HTML attributes. For now you have to test in the browser with Jasmine or QUnit since Node and PhantomJS don't support custom elements yet. You test by creating an instance of the element, calling a public function on it, and asserting the result.
HTML Imports are loosely equivalent to DI. I haven't seen any mocking libraries for HTML imports yet.
Services will be an interesting topic going forward. Right now you either include business logic in the custom element or have some external script calling public APIs on your custom elements and binding everything together.
When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.
I'm trying to find the way of incorporating AngularJS into existing application. Application is modular, so every module has HTML markup and JS script files. Modules are loaded with requirejs and jQuery (for loading markup).
I would like to use AngularJS features in some of the modules, having in mind the possibility of migrating to AngularJS in future. So ideally I want something like this:
define([ 'angular' ], function (angular) {
return function (element) {
// The "element" parameter contains the reference to
// the detached DOM node that contains the markup.
// And what I think should be done is compiling
// or initializing AngularJS with the given DOM HTML fragment
// and with controller, etc.
angular.doSomething(element, ...something...);
// The application module engine will inject the returned element
// into the DOM tree.
return element;
};
});
Any ideas? Thanks!
Just following the tutorial, specifically Step 2 (http://docs.angularjs.org/tutorial/step_02) will show you how to just do a single controller on the page with some simple functionality.
You can just use this, or you can start expanding it by modularizing it as in Step 7. By creating an module you can then add directives and services and take advantage of all that Angular offers. You don't necessarily need to configure routes or anything, but by creating an app module, you can incorporate other modules or services offered throughout the web or by Angular.
AngularJS isn't designed to really run alongside other frameworks and be used for little bits and pieces. You could hack it together to do this but it'll probably become very messy. Angular is much better suited to becoming the basis of the entire app.
Something like jQuery is great for dropping into an app and adding functionality, but angular is far more complex.
If you do want angular to take control of certain parts though, take a look into the ng-controller directive and how it works. Then in your standard markup you'd just add the ng-controller attribute to any element, and then add a new angular controller to your javascript. It would then manage that DOM element.
Look into angular controllers for more info on that. But as I say, I'd suggest making the app entirely Angular rather than trying to just add angular bits to it