I have used jquery integration with vaadin many times inside custom components. I wanna see an example of angularjs integration with vaadin.
Additionally need to know AngularJS is working with IE9.
you can check out https://github.com/akquinet/vaangular/tree/master/vaangular-demo for an example of how 2 integrate Vaadin and AngularJS...
The main thing that happens is creating a $scope for AngularJS that is wired up with vaadin. There is one essential challenge: the JavaScript invoked by vaadin is outside any AngularJS dependency injection or scope management. Meanwhile, all code you write for AngularJS is obviously inside dependency injection and scope management.
Furthermore, AngularJS assumes (at least per se) that the page's HTML is parsed once and wired up to AngularJS. With vaadin, however, the page's HTML is just some proxy to fire up vaadin, and there is nothing to wire up. Even more so, the part with AngularJS in it might be added to a vaadin UI a considerable amount of time after the application was started.
So, what is needed is an approach to create some new AngularJS-wired-up DOM and Controller on demand from outside AngularJS dependency management / scoping magic.
given a module 'innerModuleName' defined with angular.module, vaangular achieves this (in bespoke NgTemplate.js) in two steps:
First, a scope within AngularJS is created via
angular.injector([ 'ng', innerModuleName ]).invoke(function($compile, $rootScope) {
Second, the scope (called scpe) and DOM are brought together via
var connectorElement = angular.element(connector.getElement());
var cmp = $compile(templateElement);
scpe = $rootScope.$new(false);
cmp(scpe);
scpe.$digest();
connectorElement.append(templateElement);
At the end of this process, we have a new part of the DOM wired up to a new controller.
The point is that now, you can have the Vaadin Connector inside angularJS
Related
We have a hybrid AngularJS / Angular 8 app, and we keep constantly running into issues with really slow change detection between components from different versions of the framework. Until now we've only had this problem when using AngularJS components inside Angular components. The common case is having a new Angular 8 form that has some old AngularJS components in it, and with some specific AngularJS components it can take anywhere between ~2 to ~10 seconds for the changes made in the component to propagate to the Angular form and for form validations to run. The UI doesn't hang or anything, it stays responsive, but there just seems to be a varying delay in communications between the different versions of the framework. Other AngularJS components in the same form might work seamlessly. We haven't found out the root cause for it yet, but we have found one reliable workaround; use $timeout(() => $scope.apply()); in the AngularJS component, usually in the $onChanges-listener. This triggers change detection in Angular and removes the delay.
Now we're facing it with an Angular component that is used inside an AngularJS component. We have a new Angular component that essentially wraps an NG Bootstrap datepicker, and after selecting a date in the datepicker, there is a varying delay of several seconds (up to around 10 seconds) before the parent AngularJS form realizes that any changes were made. Angular's upgrade guide mentions that you can use NgZone.run() to manually trigger change detection when using downgradeModule() (which we are), but we haven't found a way to get it working. The documentation doesn't really go into detail how run() should be used, either. We also tried ChangeDetectorRef.detectChanges(), to no avail.
I tried passing the AngularJS parent component's $scope down to the Angular component and using setTimeout(() => $scope.$apply()); in the Angular component after emitting a change event with an EventEmitter, and that did work; the delay was gone. But obviously this is not something we want to use for real.
Any suggestions on how to eliminate the change detection delay between AngularJS / Angular 8 components, either by manually triggering change detection from an Angular component or some other way?
In the end we didn't find any other solution than the one described in the question: passing the AngularJS $scope as an input parameter to the Angular component and wrapping the event emissions in $scope.$apply(), i.e.
$scope.$apply(() => valueChange.emit(value));
Based on the Angular upgrade guide, this seems to be the only way to get it working when using downgradeModule().
Problems occur in AngularJS as it runs in cycles ($digset). That way, AngularJS can evaluate the changes between the model and the view.
In every $digest cycle, the watchers are executed. This is the phase where Angular evaluates the expressions that are attached to the view and re-renders them back to the user.
There are a lot of times when operations in the client should and need to be done outside of the “Angular world”, which means Angular is not aware of these changes and does not reflect the changes to the user. There are several methods to resolve this issue, one as you mentioned using $timeout, methods are:
$apply()
$timeout()
$digest()
$evalAsync()
$evalAsync() was first introduced in AngularJS 1.2.X, and for me, it’s the best method to use.
Before $evalAsync() was introduced, Officially answered by the Angular team, when you have issues with cycles and want to reflect changes from outside the “Angular world”, use $timeout().
After Angular has evolved and more users have experienced this known issue, the Angular team has created the $evalAsync(). This function will evaluate the expression during the current cycle or the next.
For more details: source
I am using angular element for javascript error reporting.
I am following this tutorial for error handling and reporting in the angular application. This code is working in angular application but I want to reuse it outside the angular application. So I have packed this code in an angular element and used as a custom element in a non-angular application. But it doesn't work.
I think angular elements don't have the access to the scope of the page.
But I am not sure what is the problem here, I just want to know this is possible or not, If yes what mistake I am doing.
Thanks.
To access angular elements or component, you can go through this.
https://angular.io/guide/component-interaction
It allow you to access and manupulate element of another component.
If you are trying to access method from outside the source. you should go through ngZone
https://angular.io/api/core/NgZone
I am new to Angular and I understand one of its 'rules' is that no DOM manipulation should exist in the controller. I have heard that a lot of people starting out with Angular dont completely understand this and end up writing JS code directly into their application, my understanding of this is if you are writing an Angular application you should completely forget about regular JavaScript.
I have found that in order to use a third party plugin or a regular JS script in an Angular app is to wrap it up in an object. I have read that usually this is done by either wrapping the script inside a directive or a service.
So I have a couple of questions:
What are the main concerns to think about when choosing between a directive or a service as a wrapper?
Are there major performance and/or maintenance issues between using a directive or service as a wrapper?
I suspect that if you are doing any http requests that you would in that circumstance use a service, that is the only thing that I know when you would use a service as a wrapper object
You should use directives. In their definition, they have a link attribute which receives a function. This function is executed after the directive template is rendered in the DOM. So inside this function you can access any element inside the directive template.
Remember: if you are going to do some DOM manipulation you should only execute it in the linker function of the directive that renders the DOM you're manipulating.
You can learn more about creating custom directives in https://docs.angularjs.org/guide/directive
I am building a Angular Js (Ionic) app. So while reading the best practices in angularjs development lot of sources said that controllers should not be used for Dom interactions. Currently the ionicloading and ionicpopup calls are made from the controllers. Do these considered as DOM interactions, if yes where this suppose to be added ?
showing/hiding popup etc...from controller is perfectly acceptable.
e.g. you have a button on UI. You can use ng-click="onButtonClick()" and invoke the popup to disply some message.
When we say "avoid DOM manipulation within controller" - don't do stuff like document.getElementById("#someId").someDOMOperation() or $("#someId").someDOMOperation(). you better write a directive and use it on UI.
Actually $ionicLoading and $ionicPopup are services which are allowed to maninulate the DOM in specific cases like these (modals and such).
In your controllers you use these services and invoke the methods you need but the DOM manipulation happens in the service.
This is from Misko Hevery (Father of Angular JS)
I am just curious to know, Is it like after the removal of few components like :
The rest off other components will remain same, because it is not mentioned in the image above
like:
Services,
Event (broadcast, emit, on)
run block
constant
config
And many others.
Hope the above question is valid, If so please give me idea about what is still remains , so that I feel easier in learning/adapting the new angular 2.
TypeScript:
I have seen the changes in class oriented block changes in typescript
like :
class MyComponent {
constructor() {
this.name = 'Max'
}
sayMyName() {
console.log('My name is', this.name)
}
}
Does that mean the commonly used DOM manipulation functions like
document.getElementBy
window object
And other things will same to an extent ?
Please give me some reference or idea about How much the Typescript has changed
Question 1:
The high-level abstraction is still the same (controllers, directives, services), but all the implementation details changed as the framework is rewritten in TypeScript.
For example, angular modules will be ditched in favour of ES6 native ones, which means run block, constant and config will not be relevant. Howevver, since they're keeping dependency injection, some way of configuration must exist, so whatever you can do in config and run will still be doable.
Question 2:
You probably confused TypeScript with JavaScript. The former has always had a syntax like that (so will the next version of JavaScript (ES6/harmony) to some extent).
However, the language change does not affect how you use the framework as TypeScript is supposed to be a superset of JavaScript, so most valid JS is also valid TS. You do not have to use features specific to TypeScript if you don't want to.
Based upon my understandings of how angular 2 is coming together this is how I see the other pieces fitting together.
Disclaimers
I am not a developer on the project, just a guy who is trying to keep up with the project as it is being developed.
The current state of angular 2 is alpha/developer preview and can/will change as development progresses
Overview
As angular 1.* progressed in its maturity there was a clear movement to utilizing conventional JavaScript patterns (see controllerAs, bindToController, no global controllers) and by following that convention your code for angular 1.* will be closer aligned to angular 2. The other movement that will assist you as you prepare for angular 2 is to think about your application in the idea of components (directive + controller with services injected in).
Services
These are classes that can be injected into components
Events (broadcast/emit)
These are a pub/sub implementation based upon the inherited $scope model which is not going to be present in angular 2, so another eventing model will need implemented. I have not heard this discussed from the angular team, so either be patient or pick another pub/sub model to implement.
Run block
With angular 2 being component based when the app is run is a direct correlation with the constructor of the root component (the one being bootstrapped)
Constants
Constants in angular 1 are just values that can be injected into other components, nothing has changed here and values can be injected into components in angular 2.
Config
With the angular module system going away in lieu of ES6 modules the idea of configuration (initializing values for a service) can be done in the constructor of the service. Also, angular 2 is going to support the idea of lazy loading additional components so configuration can be done later as well as upon application start
references
angular 2 project home page https://angular.io/
ng-conf videos https://www.youtube.com/user/ngconfvideos
angular 2 todo demo https://www.youtube.com/watch?v=uD6Okha_Yj0
angular 2 forms intro https://www.youtube.com/watch?v=4C4bmDOV5hk
getting started video https://www.youtube.com/watch?v=HmWm21cCAXM