I am using AngularJS as the framework for building a web app. The DI is good for unit testing and AnguarJS also has a best practice that not have DOM UI related code in controller. I am also using jQuery UI for building UI. Then I have a problem:
For example I am using jQuery UI dialog http://jqueryui.com/dialog/#modal-confirmation, so in the HTML I have the code for declaring the dialog:
<div id="dialog-confirm" title="Empty the recycle bin?">
<p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Then I have a button by clicking on it the dialog will pop up
<a ng-click="showDialog()>Click me</a>
Then in the controller I have the code
$scope.showDialog = function() {
$('#dialog-confirm').dialog( //DOM UI code in controller!
//...
});
}
This is the basic workflow by following jQuery UI demo code: http://jqueryui.com/dialog/#modal-confirmation and I just combined it with AngularJS. It works, but I think there is a big problem in my code: I mixed DOM UI code and logic in my controller thus it breaks the test-ability of the controller.
What should I do to use jQueryUI with AngularJS without breaking DI principle and test-ability?
That's not as easy as it may seem. Angular has so called directives that are used to encapsulate DOM code, but writing directives isn't exactly trivial - it can be tough to get it right.
Your best bet it to use angular-ui which implements similar functionality using bootstrap and pure angularjs (no jquery / jquery ui dependency). It doesn't try to replicate jQuery UI though, but bootstrap's JS functionality, so that's not a drop-in-replacement. I'd suggest you try finding a pure angularjs solution first, if possible.
If you have to use jQueryUI, you can write custom directives that delegate the actual work to jQuery UI. Here's a datepicker example, and there are more examples scattered around the net. The directive keyword will help in googling.
If you really want to delve into the depths of writing angular directives, the source code of angular-ui is very instructive, but it requires an in-depth understanding of scopes, scope inheritance, data binding and angular's compilation process.
Related
The CSS works fine always.
but the jquery code (jquery plugins or custom jquery code) does not work in the ng-view (partials)
its not about few jquery functions for which i can always rewrite jquery code using angular directives. here the major problem is, i am using a lot of jquery plugins, so the whole code contains hundreds of jquery functions, effects, transitions. so i want a practical way to make all this work inside angular ng-view using partials with minimum labor.
what changes are necessary to make such jquery code/plugins work with angular?
what is the best solution?
ps:
is backbone.js better in this respect? is it easier to use jquery plugins with backbone or same problem there also?
Have a look at
https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/
and
Correct way to integrate jQuery plugins in AngularJS
My issue is that after changing views using routing, the jquery components in my page doesn´t get rendered. I have customized ui components like dropdowns that are not being processed. I saw this answer: Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view
But I can´t figure out how to make it work in my case. It seems that when angular renders the template, any but angularjs code is processed.
Thanks so much in advance.
Code: http://plnkr.co/1mwMcsqMxWGTheoQmJ22
In the example you've provided, you're not actually loading the file with the jQuery code in it (jqcode.js).
The real problem however, as you can see in this version of your example, is that the document ready event is executed before your template has been loaded and rendered. This means that the element your jQuery code is attempting to target does't exist when you try to manipulate it.
You should really look into Angular directives which is where you are advised to place any DOM manipulation logic within an Angular project:
If you have to perform your own manual DOM manipulation, encapsulate
the presentation logic in directives.
From the Angular documentation for controllers.
I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.
What are the uses of jquery ui ? and why not use jquery instead ?
I've read about Jquery ui in their official site , however , I'm still confused as to what it can do for me and whether I should study it or not ? I'm an aspiring Website Designer.
jQueryUI comes with many components such as slider-bars, accordions and widgets that you won't find with jQuery. jQuery by itself is simply a Javascript abstraction, allowing you to write agile code for the client-side. jQuery is also a dependency for jQueryUI, so you will need it in order to use the latter library.
It's similar to Twitter Bootstrap in its feasibility.
Here are a few demos for you to look over to demonstrate the difference: http://jqueryui.com/demos/
You don't use one instead of the other.
jQuery UI is dependent on jQuery. jQuery UI offers widgets and effects you can use on your website.
JQuery UI does not replace JQuery, it is an extension of it and relies on it. It provides a few widgets like progress bars or date pickers for instance.
I am currently trying to implement the panelBar feature from KendoUI into an app at work. I have realized that kendoUI and KnockOut do not interact very well together. The main problem at the moment is the implementation of the panelBar is not working very well due to having a dynamic knockout property disrupting it. Here is the ko that I have found to interfere:
data-bind="foreach: filters
This little code is inside a div wrapping others. But the main problem is the foreach is interfering with KendoUI. I figure the way to fix this is by having some way of checking if knockout is finished all the binding, and THEN calling the code to implement kendoUI.
Thanks for any help!
Are you using the Knockout binding handlers for Kendo UI? If not, check out these binding handlers. In short, they help work out the interfaces between the two libraries. http://rniemeyer.github.com/knockout-kendo/