Is it possible to use any external js library within Angular js. If So, how to use it ? Suggest me with an example.
angularjs already included jqlite which is a short version of jquery with limited jquery api.
http://docs.angularjs.org/api/angular.element
maybe the link below will be useful as a start if you want to use jquery plugins with angularjs.
http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html
Related
i want to implement Angular JS, Angular JS UI plugins and bootstrap in my ASP MVC 5 apps. Some people say Jquery is still in use in Angular JS part, so could any one here please explain when and where i would need to use JQuery in Angular Js code?
Angular doesn't include jQuery but a light-weight plugin called jq-lite. This provides a lot of the methods that jQuery does, but not all of them.
It specifically has to do with Angular.element. You can take a look at the documentation here
https://docs.angularjs.org/api/ng/function/angular.element
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
Basically, there are a couple of pointers to keep in mind
Keep all DOM logic outside of the controllers. Use custom directives on attributes for that.
Instead of simulating mouse events, use their angular counterparts. Examples include ng-click and ng-mouseover. Add these directives to the elements in the form of attributes.
Instead of adding classes, use ng-class
If you are using jquery or jqlite, be sure to include the jquery script before the angular script.
Our project uses various jquery plugins. We are trying to convert it into angularjs. What is the right approach in terms of implementing such a functionality in angular perspective. is it correct to a write directive for each plugin and call the jquery plugin internally it or do we have any standard approach.
TIA
Try to use Angularjs plugins rather than jquery plugin
If you are using jquery plugin then you have to take care of $digest cycle because your jQuery plugin may have setTimeout() inside which make angular out of $digest loop, so it may be possible that you may got trouble in getting $scope values.
We are creating a single page app with Angular routing.
The problem is that the Javascript with the controller(s) need to be referenced.
I want the js file to be downloaded dynamically on demand.
Is it mandatory to use a system like RequireJS ? Is there an alternative ?
AngularJS is just a wrapper over pure JS to make a system that's defined in its documentation (MVC, two-way binding, directive and so on). So, you can download the JS and bind the controller defined in the file to the angular app (ng-app). You don't need to use RequireJS to load the file, rather you can use pure JS to do the work.
Most people use requirejs but you can do it in pure JS.
stackoverflow.com/questions/7718935/load-scripts-asynchronously
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?
I have been using this code to bootstrap AngularJS:
angular.bootstrap(angular.element("body")[0], ["stApp"]);
However now I decided not to use jQuery and I am getting the message "selectors not implemented"
Is there a way I can resolve this without have to use the jQuery selector?
First of all, you can use ng-app even if you load AngularJS script at the bottom of a page, there shouldn't be any problem with this.
And yes, if you don't include jQuery AngularJS falls-back to so called jqLite - a minimal subset of jQuery APIs needed for proper functioning of AngularJS. As mentioned on http://docs.angularjs.org/api/angular.element the only selectors implemented in jqLite are tag name selectors. So If you really want to do manual bootstrapping you should change your code to:
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document).find('body'), ['stApp']);
});
Here we are only using a tag-name selector so find is working as expected, even without jQuery included. Demo plunk: http://plnkr.co/edit/xsE02zWxK993FTXtWUbp?p=preview