i everybody, I wanna do something like this, $('[property="something"]').remove(), but in angular, someone can help me.
Angular has element which has similar syntax as JQuery. By default it only supports jqLite which only has a subset of what is available with JQuery, but if you make sure to load JQuery before you load Angular then JQuery will be used in place of jqLite.
You can then do angular.element('[property="something"]').remove();
Do note that there will almost always be a better way of solving a problem, the only place you really should be doing DOM manipulation is inside directives.
Related
There's this JSONEdit AngularJS directive: https://github.com/mb21/JSONedit which I want to use for my Angular (version 5) application. I haven't worked with AngularJS for ages since I've only used it when I was student in university and didn't really had an idea how everything works. Does anyone have tricks/hacks/tips how to easily convert that code so it would be easily used in Angular 5 application?
I am so sorry but it is not possible for simple reasons.
The structure of angular 2+ definetly different from angularjs (1.x.y)
Another reason is that, there are any other directives/dependencies (such as jquery ui, sortable and bootstrap 3) used by that directive therefore you must convert them and import in right order as described in github.
In short, find an alternative and make some simple changes to make similar.
For example you can use this simple alternative
https://www.npmjs.com/package/ang-jsoneditor
I have made an angular element directive for both header and footer. Header directive contains cart element functionality and my accounts feature. Is there anything wrong about making it as a directive?
Is it the angular way or best practice of using the power of directive?
Angular 1.5 introduced the Component (https://docs.angularjs.org/guide/component) which mostly serves as a replacement for a directive (https://docs.angularjs.org/guide/directive). At the very least, you can achieve most of the things (I'm not entirely sure if it serves as a complete replacement) that a directive can do. Components seem to be more structured and is more conducive to component based development (with a name like 'component' that shouldn't be too surprising :P).
If you need to write something that would be the equivalent of an Angular directive restricted to 'A' then you should probably still use a directive, otherwise for most other cases, writing a component will serve as a better idea. I like to think of a directive as a "decoration" as of Angular 1.5.
As for your question of "is it wrong to use directives" - the answer is "no, probably not, but using a component is a more accepted practice for most things with Angular development these days".
Hope that helps!
I need to migrate an site from one framework to another because I need to use Angular JS.
I found zurb-foundation very interesting. It happens that it seems to use jQuery.
According to this website https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary.
I had a bad experience running Bootstrap and Angular together and I don't want to repeat the same mistake.
It happens that I found the following line at zurb-foundation index.html
<script src="js/vendor/jquery.js"></script>
A quick search has shown that it seems to be a "simplified" version of jQuery (am I wrong?).
I've seem many people questioning things related to Angular in Foundation apps.
My question is: Is Angular compatible with Foundation?
While you'll read in many places that you should stay away from jQuery when using Angular, you'll also notice a subtle "at first" here and there. Angular is quite opinionated, and employs a declarative way of doing things, whereas jQuery is imperative. Check this out for more on the topic.
To answer your question:
Scotch.io's tutorial about Angular and Bootstrap involves UI Bootstrap, a library of directives written in Angular to be able to integrate common Bootstrap functionalities easier.
The equivalent of UI Bootstrap for Foundation is Angular Foundation. I recommend giving this thread a look-over as well, as it contains information that may be relevant to your use case.
So yes, Angular is compatible with Foundation. Happy hacking :)
a quick answer is of course they are compitable with each other. check this out from Zurb. However if you do not want to use JQuery, then the easiest way is to use pineconellc for foundation 5. foundation 6 does not have a port yet as far as I know.
I'm following angular docs about animations and the approach is like that:
html
<div ngview class="animate">
css
.animate.ng-enter{
...
}
.animate.ng-leave{
...
}
But following this page, the aproach for the same case is something like that:
html
<div ngview ng-animate="'animate'">
css
.animate-enter{
...
}
.animate-leave{
...
}
I would to know the difference about these two approaches, about "best practice", performance and everything...
From what I understand the second page you have listed is just a wrapper for ngAnimation into a directive. I am not even sure if this is official and if is kept up to date with latest angular releases (especially 1.2).
Update: ngAnimate reading through the page on yearofmoo I found this that I think answers your question:
> One of the major reasons why the ngAnimate directive was removed was
because it was difficult to integrate 3rd-party CSS animation
libraries into your code. A good example is with the animate.css
library, which, to make it work with ngAnimate, you would have to
hardcode the combination of CSS classes into the ngAnimate attribute
for each event that takes place. This would be much easier with a
driver or module that you load into your application and boom things
are working.
I think you should be more concerned on where you would like to write your animations (eg CSS3 vs JS) and go with the mainstream way.
You can find a good up to date guide on yearofmoo explaining the different approaches.
You can also watch egghead.io lessons 48-50
Using the directive ng-animate is deprecated: the best practice is that all animations are done by adding classes to elements, as in your first example and link to the Angular docs. A fairly comprehensive guide is available at Year of Moo.
One point to make is that you can still use this to use custom animations defined in javascript. See the Year of Moo article for more information, but they start off as:
myApp.animation('.animate',....
This would be used in cases where you need to support older IE (that doesn't support various CSS transitions/animations), you might want to use a transition from an existing Javascript library, or you might have something very simple Javascript behaviour that still should be treated like an animation (say, adding a class for a few seconds, and then removing it). It's actually a fairly powerful method that allows you to (ab)use Javascript for visual niceties, but keeps it extremely separate from any other logic.
There are three approaches to create animation, css transition, keyframe and JS animation. each has their own pros and cons. You can read this nice article for a comprehensive understandings.
Remastered Animation in AngularJS 1.2 - yearofmoo.com : http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I just started to learn AngularJS and struggle with some concepts of AngularJS. It would be great if somebody could explain me some points...
I understand that ng-click is technically not the same as onclick (see here), but both are placed in the markup. I thought that would be a "bad practice"? Why is this one of the core concepts of AngularJS, if most people say this is "bad"? I thought it would be better to select the DOM element from JavaScript and not to place logic in the markup.
If ng-click is the right way to react to click events in AngularJS what should I do with other DOM events? I see that there are several other directives like ng-mouseover, but not all DOM events have a AngularJS equivalent. How would I handle a 'drop' event in AngularJS (hence in the AngularJS way - not the normal way)? To be clear: I want to drag a file into my webapp.
Thank you very much,
Pipo
Why is this one of the core concepts of AngularJS, if most people say this is "bad"?
Well, people who really like Unobtrusive JavaScript might say it is bad. Angularians (and those with a flex background) see value in the more declarative approach.
"Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together... By declaratively describing how the UI should change as your application state changes, you are freed from low level DOM manipulation tasks. -- Overview doc
See also Don't the data attribute options used in Bootstrap, Angular.js, and Ember.js conflict with Unobtrusive Javascript principles?
what should I do with other DOM events?
Write your own directives to listen for them (or find one that someone else has already written). Angular gives you the power to extend what the browser can do -- by writing your own directives.
Update: in the comments below, Tim Stewart mentions AngularUI's ui-event, which lets you bind a callback to any event not natively supported by Angular.
By nature, Angular requires elements in the markup in order to function properly. Further, those elements must be "compiled" each time they change, for the most part. So, it's already somewhat "obtrusive" irrespective of the JavaScript. You can't simply replace the markup, and have everything auto-bound for you like you can with something like jQuery.
Strictly speaking, unobtrusive JavaScript:
1. separates structure and behavior, in order to make your code cleaner and script maintenance easier
2. preempts browser incompatibilities
3. works with a clean, semantic HTML layer
(Wikipedia)
That's not Angular, for sure. In order to achieve the two-way binding on everything, they chose to make custom binding points in the DOM, as opposed to using a class name or ID the way that jQuery would do. (A somewhat non-standard approach, but it obviously works.)
But the real way to think of it is this: Basically each controlled section of your markup is not really straight HTML anymore anyway. It's really more of a template now, and as such requires interaction with the engine that is preparing it for rendering. As such, the traditional rules of unobtrusiveness don't really apply... (FWIW, I'm a huge fan/user of the jQuery.on() function to bind elements to events automatically when the element is added to the page. Very clean and flexible, IMHO, and I do wish there was a similar mechanism in Angular. I like adding a class to items in multiple locations on the page that invoke the same event handler automatically. Having a single place to go change code is a good thing. but I digress...)
For me, the bigger issue is that of progressive design. Does the web page work without JavaScript enabled at all? Does anyone really care about that? Hmmm...