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.
Related
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 am using an hybrid angular app where Angular 1 application runs inside an Angular 4 app. All new components are being developed in Angular 4. However since we have a huge amount of legacy code in Angular 1, I would like to reuse some of the Angularjs filters in Angular 4 components. We have a huge number of filters to deal with Internationalization (date formats, number formats, language, etc with user profile preferences).
Is there a way to upgrade the Angularjs filters as Angular 4 pipes and reuse them in Angular 4 html templates?
According to the official Angular upgrade guide (see https://angular.io/guide/upgrade#add-the-checkmarkpipe), there is no ready-to-use support for upgrading NG1 filters to NG2+ pipes. You have to write the pipes yourself, but for most of the cases this is not so complicated.
Note that there are a few built-in internationalization (i18n) pipes in Angular (date, number, currency, percent), and with Angular5, they were completely rewritten (see https://blog.ninja-squad.com/2017/11/02/what-is-new-angular-5/), causing some breaking changes.
If I want to use the Angular-upgrade module in my Angular1 application it seems like I have to bootstrap the whole app using Angular2's bootstrapping, including ditching the ng-app declaration. My team is very interested in graduating our apps' components over time to Angular 2, but touching the bootstrapping is a little too impactful for us at this moment.
In order to use the Upgrade Adapter do I have to transform the way my app bootstraps in order to use an Angular2 component? Is there anyway to use an Angular2 component in a full Angular1 app?
Here's a great article that describes multiple scenarios for upgrading, but none of them leave the app bootstrapped as a normal Angular1 app.
Short answer is No.
From angular documentation
Pure Angular 1 applications can be bootstrapped in two ways: By using
an ng-app directive somewhere on the HTML page, or by calling
angular.bootstrap from JavaScript. In Angular 2, only the second
method is possible - there is no ng-app in Angular 2. This is also the
case for hybrid applications. Therefore, it is a good preliminary step
to switch Angular 1 applications to use the JavaScript bootstrap
method even before switching them to hybrid mode.
For better understanding how upgrade works read this article from official documentation https://angular.io/docs/ts/latest/guide/upgrade.html
I have built an app with Ember.js and Cordova which runs perfectly on newer devices, but is laggy on older devices.
Onsen UI works perfectly for my needs, however it is designed around Angular and I am not sure if it is even possible to implement it with Ember. (I have tried to no avail).
I have looked for using Ember and Angular together, however all I found was Angular vs. Ember debates.
The forum page of Onsen UI asks visitors to post on Stack Overflow.
I am looking for guidance on how to implement Onsen UI with Ember/Handlebars.
This is the particular demo I want to utilize http://onsenui.io/OnsenUI/demo/sliding_menu/
Ember and Angular are mutually exclusive and should not (and probably cannot) be used together. There are parts of OnsenUI that can be reused like the stylesheets but it'll be a lot of work since Angular uses directives that can be styled too.
I've built a webpage using html, css, javascript, and jquery. I just started learning Angular.js. My question is do I have to rebuild the site in order to meet certain angularJS conventions or is everything I will be adding for Angular unobtrusive to my previous built code?
It is actually recommended that you NOT use jquery with angular for starters. To get the most out of angular you will most likely have to re-architect your website. The reason for this is that Angular is a framework; jquery is a library. Their concerns are different.
When we think in Angular terms, we think about:
Views, not DOM elements
Directives, not event bindings
Models as a projection of view
Functionality separation
See here for more in depth explanation: http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html