Is it possible to compile AngularJS application to remove ng-* directives like (ng-click) and generate plain HTML like Angular 2+? If we inspect Angular 2 application with say chrome dev tools, it does not show event handlers like onClick. However AngularJS shows ng-click, ng-for etc.
Short answer:
No.
Long answer:
I won't prvide one, as your question touches many (complex) topics that are already explained elsewhere and possibliy better than I could do, but I will provide some usefull links in my short explanation.
Medium answer:
What you asking for is not possible, because AngularJS uses a different approach for change detection and event bindings.
One of the cool things about AngularJS/Angular is it's ability to to detect changes and perform updates automtically. To make this possible, Angular(JS) has to notice if things change.
Taking your example with the click event, AngularJS uses event based directives to notice the click event, whereas Angular performs a event binding using one-way bindng from the template view to the component. Angular has this possibility because it uses Zones to get aware of changes. Therefore it doesn't need a directive as AngularJS did.
This explains why you don't see event handlers on the HTML element, because Angular directly sets up the event binding. You can verify that the event is handled by Zone.js if you check the Event Listeners tab in Chrome:
Other usefull links to the topic:
https://angular.io/guide/architecture-components#data-binding
https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html
Related
I have a search controller, where the user can search for a single area.
After an area is searched, I $rootScope.$broadcast that the area has changed.
I have various other controllers that are responsible for independently loading and showing data about that area. They use $rootScope.$on, and get extra information from other sources using $http.
Is my approach the normal way of doing things? It feels unusual, since $broadcast wasn't mentioned in the tutorials I have been through.
I am trying to learn angular.
$emit/$broadcast are used a lot in angular libraries and even 3rd parties.
For instance you have events when navigating using the ng-route module, $routeChangeStart, $routeChangeSuccess, ... same goes for the 3rd party ui-router : $stateChangeStart, $stateChangeSuccess,....
It's just an event bus : listening and sending events in order to communicate with external components.
In angularJS, you will find them in the event part of the documentation.
However you should be carefull with events, too many of them can lead to lost control of what you're code is doing or be able to tell what should be the current state of your app.
It's possible for some that a cleaner way of doing it is tostore data in $rootScope/a service an use $watch on them.
EDIT : i didn't mention it but storing data in $rootScope is not advised for design/reusability.isoltion purpose.
For example we have a web app and sometimes we need to hide or show some custom directives or html parts using ng-if/ng-show/ng-hide. What we do, we click on a link "Example Show Link" and our elements appear or disappear.
So, here is the Problem:
When you go to another page/state/controller of course your directive/html part is still visible.
Is there any cool solution to hide this parts?
Except using rootScope or pushing true/false flag in every controller, 'couse there could be a lot of directives and a lot of controller
You can use routes for this, and ui-router is what I think the best one that handles this. When you use routes, only the current states' templates are shown, when you navigate out of the state, its template (together with all the directives in it) are destroyed. It automatically do it for you.
I'm sorry, I have Googled, looked through the Infragistics website and it's GitHub section, but I surrender.
How do you implement an "On row select" event, when using the IgniteUI library with AngularJS ?
Even the IgniteUI-AngularJS GitHub page, which contains a demo, doesn't show how to do this.
Here's the jQuery method of doing it (from this webpage)
$("#grid").on("iggridselectionactiverowchanged", function (evt, ui) {
var message = "iggridselectionactiverowchanged";
apiViewer.log(message);
});
...but I want to know how to capture this event from my AngularJS controller (and keeping the amount of jQuery to a minimum).
Is it possible ?
I also tried the standard way of adding a ng-model attribute to this control, and trying to put a watch on this variable, but even ng-model seems to be ignored by this control.
Has anyone used this control, successfully, using AngularJS ?
First I would like to provide some background info about Ignite UI. Ignite UI is built on top of jQuery and jQuery UI. The Angular directives for Ignite UI provide developers with a way to declaratively initialize controls and with out-of-the-box support for two-way databinding. Still the product is not native to Angular and thus not everything that it exposes as functionality can be consumed as you would with native Angular components. That doesn't mean that you lose functionality, just some of it has to be utilized through jQuery.
To answer the specific question, you can bind event handlers declaratively as described in the documentation.
I am using angular-ui in my project and I wanted to implement a modal window. Most of the components of the library (http://angular-ui.github.io/bootstrap/) are implemented as directives (as expected). However, modal is not - it is implemented as a service. This leads to a strong dependency on the view in the controller (i.e. the controller needs to know that the view uses a modal window, what should not be the case).
My question is: why is modal implemented as a service, not directive? Does it give any benefits?
The $modal directive is quite flexible, and by its API, it supports:
Being triggered on any event you want, since the controller controls when it opens.
Passing data from the controller to the controller in the dialog, using the resolve option
Using any controller or template in the dialog.
Passing data back from the dialog on close to the triggering controller, by its result promise.
While not impossible for this to all be in a directive, I think it could only realistically be achieved by using a lot of options, or a complicated object, which would have to be constructed in the controller anyway.
Another reason for this not being a directive, is that directives are usually for things in a particular place in a page. The modal by its very design is not attached to any element in the page.
I would suggest trying to design an API for a directive that gives the same functionality as $modal, and I suspect it'll reveal that using a service is, on the whole, clearer, and probably more flexible.
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.