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.
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.
Currently we have application developed in Angular 1.X but we don't want to migrate from Angular 1.X to Angular 2, Since it is very wast application it will require more effort. We want other way around . Can we use Angular 2 features within Angular 1.X Application. In future whichever pages is created should be in Angular 2 but need to be worked side by side with Angular 1.X .. Like calling new route or new component from Angular 2 from Angular 1.X. Please let me know whether its possible or not.
Thanks
Kind of. What you are looking for is an Angular Hybrid app. Here's an article to help with what you are looking for.
Yes, it is possible.
You can use the new angular components/modules in a legacy angular application (downgrading) or you can use legacy components in the a new angular application (upgrading).
There is a section on the angular webpage describing all this. Direct link is here
https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code
I have to integrate an existing UI application to a REST based back end. The UI is a single html page that uses JQuery + CSS to create a sliding tab experience. Both the UI and REST application are Spring Boot apps.
I'm new to Javascript frameworks. AngularJS made a lot of sense to me for data binding and updating the DOM.
However, now that I am trying to do the integration, there is a .js include in the UI that contains a massive set of JQuery plugins (they are just pasted in one after another).
AngularJS functionality like 'ng-repeat' does not work with this file included. The UI application does not work without this include.
I believe the solution is to put all JQuery Plugins into a Angular Directive (Initialising jQuery plugin (RoyalSlider) in Angular JS). This looks like a painful task.
Are there other frameworks that would work with this?
I have found some threads suggesting a ground up approach with Angular ("Thinking in AngularJS" if I have a jQuery background?), but I'm stuck with this current UI app's structure.
Suggestions? I'm thinking of using JQuery to acquire the JSON and inject it into the UI and adding Thymeleaf for its fragments.
After some research I have found that using JQuery is the way to go if your application was built with JQuery. If I could do it again, perhaps Angular should have been the base for the UI application. However,after some exploration, I have found JQuery does a lot of cool things around AJAX and Dom manipulation. When used with ThymeLeaf in Spring Boot, you end up with a power set of UI tools.
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript 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