I was forced to use jQuery code in Angular to hack a plugin that I need to use; should I put this code in the controller or in a <script> tag in the html (to have code that manipulates DOM close to the DOM)?
Its better you write your own custom directive. Please follow here at https://docs.angularjs.org/guide/directive.
You should keep the view logic separate either to HTML or to directives. Angular recommends this to keep your business logic separate from view logic.
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've been using the Angular bootstrap UI modals for a new project
Modal UI
But for what I have read anytime you manipulate the DOM is better using a Directive instead of a controller,
So. when using a modal or calling a modal aren't you somewhat manipulating the DOM?
Should not that Directives be written for a "directive" instead in a controller? If so, can anyone point to an example?
Thank you
Yes.
Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.
See: https://docs.angularjs.org/guide/controller
I also use the UI modal. I believe the actual manipulation is not done through your defined controllers but through directives. You can check out the actual code here: https://github.com/angular-ui/bootstrap/tree/master/src/modal
I wanted to know, If we want to manipulate the DOM. Where we should do that.
Is it in a Controller or a directive or somewhere else ?
I have read somewhere that manipulating the DOM in controller should be avoided. Is it correct?
You should use Angular JS Directive for DOM manipulations. DOM Manipulations should not exist in Controllers, Services or anywhere else but in Directives.
One of the nicer features of AngularJS is the framework's ability to separate the roles of the model, the view, and the controller. The separation is clean enough that you shouldn't need to manipulate the DOM directly from code inside the controller. Instead, the controller only manipulates the model, which influences the view through data bindings and directives. The end result is a clean and testable.
Take a look at this
Video - This video tutorial covers manipulating the DOM in AngularJS using directives with a link function.
Best practice is:
Dom manipulations only in directives.
Read here
I've making use of AngularJS Partial templates to create a dashboard. There is a listing view and when you click on an item, it switches to an Items-Detail partial.
Inside the Items detail partial, I'd like to show some charts via RGraph. However, for the life of me, I can't figure out how to do this.
I can't seem to invoke javascript from inside the partial html. So I think I need to do it in the controller, or maybe create a directive?
I'm pretty new to AngularJS so my understanding is still very rudimentary and likely misguided.
AngularJS ("jqlite") doesn't support <script> tags inside partials.
Include jQuery on your page, however, and it should work. Note that jQuery must be included before AngularJS.
See also AngularJS: How to make angular load script inside ng-include?
I need to know if AngularJS is used as js framework for the front-end, do we need Handlebars separately for template-engine? ... as in my view template-engine functionality can be accomplished using AngularJS itself !
You are right, Handlebars and Angular together would be pretty useless.
Handlebars and Angular are completely different things.
Handlebars is a template engine. You write a fancy templatey-string, give it a JSON object, and it renders out HTML from the data. There's no data-binding, no updating, it's just a once-off render.
AngularJS is an HTML compiler and databinder. Angular will look through the HTML for angular-templating tags, interpret/compile them, and update the HTML with changes to data on a given controller scope. Angular doesn't just render an HTML string once, it compiles the HTML, binds it to a scope, and updates when data on that scope changes.
Handlebars in one picture
AngularJS databinding/templating in one picture
AngularJS's HTML compiler in one article
AngularJS's whole overview/guide, so you can know how it actually works