Is it possible to integrate Angular js directive inside Angular 7 component at the runtime. The Angular js is a separate project module with its own folder stucture.This folder structure includes directives as well. Can these angular js directives be imported into Angular 7 application by providing the directive's file path and used in Angular 7 component template. Kindly suggest if there is a way to do this.
This is NOT recommended. The architectures and life cycles of both are very different and you are just increasing the chances of errors, time and effort by doing so.
To answer your question: Yes, there is a way to do it as you can manipulate the DOM using any JS lib/framework and by using your ng7's #ViewChild/templateRefs to gain control of the element, but you will face issues while updating data to/from Angular7.
I'd highly suggest you make a new ng2+ component and import the code from your old project and work on it to make it into an Angular2+ component.
Related
I have an AngularJS application(say x) which we were using as a directive in our other AngularJS applications before.
Now we are using Angular 8 for our new applications and we need to use the same AngularJS component(x).
Is there a way to do that without migrating the code of this component x to newer Angular version since the code of this component x is huge.
Someone told me to use micro frontend but i couldn't understand how to use that in this scenario.
Any thoughts/suggestions would be greatly appreciated!
One possible way is to transform your Angular 8 application in an hybrid application that can bootstrap each of the Angular and AngularJS parts. To do that your AngularJS app needs to be in 1.5
See this documentation to turn your app in an Hybrid app : https://angular.io/guide/upgrade
Then, you extract your AngularJS directive in a package that can be use in both applications and avoid duplicated code.
And maybe this old topic can help you :) : Use AngularJS directive in Angular Component
I am working in a project which is developed using AngularJS1.2, since it is older I am thinking to write feature modules in separate app using Angular and then with the help of Microfrontend thinking to combine with older app. To achieve this, I am not able to get a good source/guide. Can anyone please help me.
I see 3 ways but haven't tried any of them though. So, I don't have any working solution.
Have a route from angularjs that points to angular app(full page load) and everything from there onwards, angular handles everything. There is no angularjs involved. This may not be the best option.
Let angular code load on demand when the feature is required and provide placeholders for the angular features inside angularjs project. This way you can share custom scope to nested child angular project.
Use web components developed in angular(angular elements) and use them in your angularjs application. They work independent of technology/framework/library.
I develop in Angular 2+ for quite a while using Angular Material, but the documentation of AngularJS Material is more complete and wide then the one to Angular 2+, there is a way to use AngularJS Material components in an Angular 2+ project? More specific on Angular 6
You will have to run both frameworks simultaneously to make it work. While that certainly is possible, it usually isn't desired, especially if there isn't a clear separation between where the AngularJS application and the Angular 2+ application ends and begins (for instance as there would be if you're migration an AngularJS application to Angular 4). AngularJS components, spread around an Angular 2+ application doesn't seem like a desirable situation.
Here are some additional issues:
Component names may clash
Routing may interfere with each other
Communication between AngularJS components and Angular 2+ components is difficult
I have two suggestions.
Either do away with the AngularJS dependency and clean up after the former co-worker.
Or, create thin wrapper components around Angular2 Material components, that has the same name and signature as the AngularJS material components. This is only possible if the components work somewhat similarly.
I recommend the first suggestion, since the latter might only be plausible for the most simple components.
We are working on pure javaScript project, which could really benefit by using angular js but it's a huge project and re-writing the whole project in angular is not an option . Does anyone have any idea or advice about integrating angular with an existing project
Angular is a framework. It's all or nothing...you are going to rewrite everything just due to the nature of how Angular works. You can't really just 'sprinkle' some Angular on top of it because Angular controls the entire view.
It may be possible to just use Angular in a certain area of the page, but this would be a huge waste of resources (Angular minified is 143K) and make for terrible code.
I'm trying to find the way of incorporating AngularJS into existing application. Application is modular, so every module has HTML markup and JS script files. Modules are loaded with requirejs and jQuery (for loading markup).
I would like to use AngularJS features in some of the modules, having in mind the possibility of migrating to AngularJS in future. So ideally I want something like this:
define([ 'angular' ], function (angular) {
return function (element) {
// The "element" parameter contains the reference to
// the detached DOM node that contains the markup.
// And what I think should be done is compiling
// or initializing AngularJS with the given DOM HTML fragment
// and with controller, etc.
angular.doSomething(element, ...something...);
// The application module engine will inject the returned element
// into the DOM tree.
return element;
};
});
Any ideas? Thanks!
Just following the tutorial, specifically Step 2 (http://docs.angularjs.org/tutorial/step_02) will show you how to just do a single controller on the page with some simple functionality.
You can just use this, or you can start expanding it by modularizing it as in Step 7. By creating an module you can then add directives and services and take advantage of all that Angular offers. You don't necessarily need to configure routes or anything, but by creating an app module, you can incorporate other modules or services offered throughout the web or by Angular.
AngularJS isn't designed to really run alongside other frameworks and be used for little bits and pieces. You could hack it together to do this but it'll probably become very messy. Angular is much better suited to becoming the basis of the entire app.
Something like jQuery is great for dropping into an app and adding functionality, but angular is far more complex.
If you do want angular to take control of certain parts though, take a look into the ng-controller directive and how it works. Then in your standard markup you'd just add the ng-controller attribute to any element, and then add a new angular controller to your javascript. It would then manage that DOM element.
Look into angular controllers for more info on that. But as I say, I'd suggest making the app entirely Angular rather than trying to just add angular bits to it