I just moved from directives in AngularJS to using components in React and I have came across an issue.
In Angular I used attributes directives, for example a directive that would add Google Analytics events to elements in the DOM, or automatically apply multi-line ellipsis.
Is there a similar alternative in react, not necessarily attribute directive but maybe a best practice?
Thanks.
Related
We have a Angular 1.x app. Each screen/layout has multiple widgets. We have new requirement to inject a help icon into every widget. To make the setup less intrusive, we have come up with a controller which looks up for the widgets and then injects the icon dynamically.
I would like to ask the UI experts here regarding the appraoch to be used to select the widgets (and hence inject the icon into them). Is selecting by a CSS selector better than selecting by ID (say widget ID)? What are the pros and cons of both approaches?
Thanks,
Midhun
I believe the best way is to create attribute level directive instead.
it can be parameterized like help-article="create_category" or even using several attributes
it's safer to keep classes and id for styling while linking logic to custom attributes
more expected in angular world
I read the the documentation from angular website about debugInfoEnabled.
Still doesn't clear with concept, how $compileProvider.debugInfoEnabled(false) inside angular config can improve the performance of application by removing the element level class (angular-directives) binding such as ng-scope and ng-isolated-scope.
Does anyone know, how performance boost can happen by setting up debugInfoEnabled to false in $compileProvider?
Can anyone help me to clear out my concept about angular $compileProvider.debugInfoEnabled feature of angular 1.3?
Any Help would appreciated, Thanks in advance:)
These classes that are added to your DOM elements are directives (directive can be elements, attributes, classes, or comments).
When angular is compiling the DOM and hits a directive it then runs through that directives logic to change, manipulate, update, or do whatever task it is that the directive is asking angular to do.
For example it will take your ng-repeat directives and build out multiple DOM elements accordingly.
By removing these directives (classes like ng-scope & ng-isolated-scope) angular will not stop at these locations and execute logic. Because of this the performance increase is achieved.
I posted this onto the durandal discussion groups, but want to cover my bases on it:
https://groups.google.com/forum/#!topic/durandaljs/PWgPUHcpzic
Basically, I want to see if anyone has successfully wrapped an existing control that is the complexity of the Mozilla PDF Viewer (http://mozilla.github.io/pdf.js/web/viewer.html) into a Durandal or Angular control, and been successful.
I know for other things, like date pickers, it's possible, but with this particular control, it's doing a lot with canvas and a few other interesting controls.
Any ideas on how I can accomplish this?
Can we use a knockout binding to accomplish this?
How do we control the positioning of this widget?
Yes, you would write a custom Knockout binding and wrap that binding in a Durandal widget. As for positioning, that's accomplished with CSS (or dynamically with a CSS Knockout binding).
I'm curious in my exploration of AngularJS.
Sometimes views are quite complex and the logic provided by CSS and Angular templates is not enough. For example, let's say that I want to add decorative elements whose number change according to an image size.
How should I implement it in AngularJS?
Try to decompose views into directives. Directives play role of components in AngularJS.
What is a main difference between a plugin and a component in extjs ?
When should I implement and use some behavior as a class and when as a plugin ?
Well that is more a conceptional question than related to any programming issue. But it can be answered in two sentences:
A Plugin modifies or extend the behavior of a component at creation time without the need to extend the whole class
Plugins can be mixed, meaning a component can include many plugins which allow you to instantiate many component instances where each may have different behavior but all uses the same component class
Like #A1rPun mentioned
Plugins allow us to create reusable code that will modify or add to a
component's look and behavior during or after its instantiation.
Components in ExtJS provide basic, required functionality. There are
many components readily available like text box, combobox, grid,
tree, panel, etc.
Components can be used without using plugins also.
Plugins add more functionality and/or look n feel to existing
components. For example, ExtJS has grid component into which we
can plug-in "drag and drop" plugin. Grid component can be used
without drag and drop also.
Plugins cannot be used independently without using Components.