Highcharts documentation says that it has some dependencies that can be met with jquery, prototype or mootools. Is there a way to use highcharts/highstock with angularjs without bringing in any of these other libraries?
Angular includes it's own "jqLite" which is a subset of jQuery functions that were necessary (or at least made it much easier) for Angular itself to work. Including jQuery itself will override the jQLite built in to Angular (but they should work fine together and have for me, I'm only using jQuery for ng-grid currently).
Does Angular use the jQuery library?
Yes, Angular can use jQuery if
it's present in your app when the application is being bootstrapped.
If jQuery is not present in your script path, Angular falls back to
its own implementation of the subset of jQuery that we call jQLite.
http://docs.angularjs.org/misc/faq
I've also been looking at charting solutions that will blend well with Angular and have started playing with d3js
http://d3js.org/
Basics of D3js
http://mbostock.github.io/d3/tutorial/bar-1.html
AngularJS D3JS Directive Writing
http://briantford.com/blog/angular-d3.html
D3 essentially gives you a toolkit of functions that help to scale values to build a chart from scratch and has built in interpolation for transitions between data sets. There seem to be lots of cool examples but to build from svg or html elements into your desired chart from scratch is probably extensive work.
For something a little more pre-built and I believe without external dependencies either is Google Charts
https://developers.google.com/chart/
AngularJS Google Charts Directive
http://bouil.github.io/angular-google-chart/
Yes, there is.
Highcharts relased a Standalone version
Check it out, I think it's a more direct answer to your question than what was posted here.
Also, there's an Angular Directive for Highcharts:
Highcharts-ng by PabloJim
Also, for more info check out a similar question: Highcharts in AngularJs without jQuery?
Related
I have to integrate an existing UI application to a REST based back end. The UI is a single html page that uses JQuery + CSS to create a sliding tab experience. Both the UI and REST application are Spring Boot apps.
I'm new to Javascript frameworks. AngularJS made a lot of sense to me for data binding and updating the DOM.
However, now that I am trying to do the integration, there is a .js include in the UI that contains a massive set of JQuery plugins (they are just pasted in one after another).
AngularJS functionality like 'ng-repeat' does not work with this file included. The UI application does not work without this include.
I believe the solution is to put all JQuery Plugins into a Angular Directive (Initialising jQuery plugin (RoyalSlider) in Angular JS). This looks like a painful task.
Are there other frameworks that would work with this?
I have found some threads suggesting a ground up approach with Angular ("Thinking in AngularJS" if I have a jQuery background?), but I'm stuck with this current UI app's structure.
Suggestions? I'm thinking of using JQuery to acquire the JSON and inject it into the UI and adding Thymeleaf for its fragments.
After some research I have found that using JQuery is the way to go if your application was built with JQuery. If I could do it again, perhaps Angular should have been the base for the UI application. However,after some exploration, I have found JQuery does a lot of cool things around AJAX and Dom manipulation. When used with ThymeLeaf in Spring Boot, you end up with a power set of UI tools.
I have been looking for some good ways to build up a angular website with help of basic html templates but it doesn't work with carousel and some other elements.
Can any suggestion for slider in angular?
Angular doesn't necessarily play nicely with jQuery plugins.
(I'm assuming you are using a jQuery carousel, you didn't say though).
That doesn't mean you can't use Jquery plugins, it just means you can't use them in a very Angular way.
Best to use Angular modules instead wherever possible.
See carousel at ...
https://angular-ui.github.io/bootstrap/
This is a reliable library
Hope this helps
Angular slider here ... https://github.com/seiyria/bootstrap-slider ... but I've never tried it
I am developing a mobile app using ionic framework. I am looking for a Recurrence Picker without jQuery and bootstrap dependencies in AngularJS
just like Google Calendar that I attached.
Is there any Recurrence picker plugin in AngularJS?
Here are a few options I found while I was in the exact situation as the OP:
https://github.com/devmynd/angular_rrule_recurring_select
https://github.com/chouseknecht/angular-scheduler
https://github.com/jacobscarter/angular-cron-jobs
If you're using Angular UI Calendar which is currently dependent on jQuery anyways you could roll your own hybrid directive with the jQuery plugins that are out there:
https://stackoverflow.com/a/11607742/1742393
I will probably just end up making a custom one.
Edit: I ended up creating a custom directive that allows the user to enter plain text that is parsed by rrule.js.
There is this one, which uses the rrule.js library.
I've tried both from above but they don't build so I was not able to evaluate the UI.
https://github.com/devmynd/angular_rrule_recurring_select
https://github.com/chouseknecht/angular-scheduler
After being frustrated, I found ac-recurrence on npm which is a plus. I've integrated with my code base with minimal changes for my build system. The UI looks okay but do plan to style it a bit differently.
https://www.npmjs.com/package/ac-recurrence
I am quite new in Angular world. I am working on an application which involves Angular JS. I've been confronted with the requirement to implement custom scrollbar. My application does have jQuery too, but so far most part of my project uses Angular. So should I be using some jQuery widget or implement it via Angular.
If Angular, can you provide me pointers on how should I proceed?
You should probably implement it in the Angular way, i.e., building / using a custom Angular's directive:
http://docs.angularjs.org/guide/directive
Learning resources for Angular:
https://github.com/jmcunningham/AngularJS-Learning
You can always use jQuery plugins / widgets in an Angular app, but in that case the best way is to encapsulate each plugin within a directive. Angular-UI is a project which does that for several components, including Twitter Bootstrap:
http://angular-ui.github.io/
I'm aware of angular-perfect-scrollbar, a simple Angular's directive for perfect-scrollbar, but haven't tested it yet:
https://github.com/itsdrewmiller/angular-perfect-scrollbar
http://www.yuiazu.net/perfect-scrollbar/
Depending on what your requirements are, you can style your scrollbars strictly in CSS and not need any JavaScript:
http://css-tricks.com/custom-scrollbars-in-webkit/
I was reading that AngularJS comes with a lite version of jQuery. However I keep hearing reference to people who talk about Angular and jQuery going together. I even checked out ng-grid and noticed that it says:
Angular Data Grid written in AngularJS and jQuery by the AngularUI Team
So if I do use Angular just when would I need jQuery and what does the version that comes as part of AngularJS not provide?
jQLite is a very stripped-down version of jQuery. jQLite is enough for angular to work. This is to minimize dependencies.
Yet, if you load jQuery before angular, then angular will use jQuery.
Most of the time, you do not need to use jQuery. Even so much that, for beginners, it is advised to leave out jQuery completely as there would be a tendency to use jQuery when there is an easy / angular way. There has been so many examples on this (mostly showing and hiding elements through jQuery when there are ngShow and ngHide directives).
Later on, when you start to write directives, you then may need to add jQuery.
ngGrid possibly does many things for which jqLite would not suffice. Thus, they used jQuery.
Documentation and features of jqLite:
http://docs.angularjs.org/api/angular.element