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/
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.
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
Just learning , new to this site.
Is it possible to have ExtJs and AngularJS together in same application ?
or is it worth to have both of them in same application ?
Thanks
Sometimes people use ExtJs components in an AngularJS app.
AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
I've built a webpage using html, css, javascript, and jquery. I just started learning Angular.js. My question is do I have to rebuild the site in order to meet certain angularJS conventions or is everything I will be adding for Angular unobtrusive to my previous built code?
It is actually recommended that you NOT use jquery with angular for starters. To get the most out of angular you will most likely have to re-architect your website. The reason for this is that Angular is a framework; jquery is a library. Their concerns are different.
When we think in Angular terms, we think about:
Views, not DOM elements
Directives, not event bindings
Models as a projection of view
Functionality separation
See here for more in depth explanation: http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html
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?