I'm in need of your assistance.
Background
We have a legacy Vanilla JS webapp which we intent to replace with Angular. Due to time constraints we wish to do this gradually where we replace one isolated component at a time but also add new functionality as isolaed Angular apps.
The goals is of course to be able to completely move to Angular in a timeframe between 6-12 months.
Issue
I've been investigating how to seamlessly integrate an angular app with our vanilla js with webpack (which we are already using to build our app).
There has been no examples on how do this for Angular whereas I've seen examples for React.
The intention is to have a separate directory for the angular which is then bootstrapped when needed in the vanilla JS. We want to build the angular stuff alongside the rest in one aot js.
Consequences
The consequences I see is of course time to bootstrap the angular app but when using aot there should be not be much of an issue.
Solution??
This is where you guys come into play. How do we easily build the angular app together with the vanilla js app?
Ideally I want to somehow ng build --prod the angular app and then include the result in the vanilla js webpack dist.
Thanks in advance.
If I were you I would do the opposite : integrate the vanillaJS application into Angular.
As Lazar said, Angular is a platform. You code an application using Typescript.
The good news is, every valid JS code will be valid TS code. The opposite, on the other hand, isn't true.
So what I would do, is take my old application chunk by chunk, and put it in a new Angular application.
And I know you are using webpack and it might work great for you, but I highly recommend you to start from scratch with the CLI. Not only because it also uses Webpack, but because it represents 90% (arbitrary number, but not so far from it) of the Angular projects, meaning if you have any issue, there's a whole community that will be able to help you.
Without, of course, mentioning all the features such as i18n, server-side rendering, AOT ...
Related
We have an old style application, written in AngularJs and we would like to "import" couple of editors written in ReactJs.
First idea was ngReact, which is also old school (and available on bower :)) but I was not able to reference neither React or our react components.
As those two things are actually not written in same standard, is it even possible to mix them?
Or is there option to downgrade React components to ES5 during the compile & build?
Why don't we modernize angular app?
We are waiting for completely new ReactJs application version and in a meanwhile we are still using our old one. While we are waiting for the new one, we just wanted to grasp some new features in the old gui.
We ended up with rewriting angularjs to the ES6 and now they work together well.
It took couple of days, but I can say that I am more happy now than that we had that odd mixture we initially wanted to have.
I'm new to Js frameworks like Reactjs, AngularJs.
And I'm tasked by my customers with the responsibility of researching to integrate Thymeleaf with one of javascript framework to handle common components (commonality and componentization task) in my project.
But i'm wondering whether it's necessary to use a js framework along with SpringMVC and should we combine these technologies in java web application?
Thanks alot. I have searched for result for hours but no appropriate one found!
please refer blow 2 link,
https://github.com/noveogroup-amorgunov/spring-mvc-react
https://medium.com/#pietroghezzi/spring-and-react-js-the-easy-way-5abe8a529058
I develop differently these examples, first I develop frontend project and build. after creating an MVC project and moved my static build into the static folder. then build java project got a working project.
I a have an Angular 5 project up and running, and I would like to add a CMS to allow admin control over content.
I would like to use something that works with NodeJS, ApostropheCMS state that any front-end application can integrate with their technology, but I can't find anything to help me understand how this is done.
I am Looking for help to understand the integration process, if possible at all !?
And if it isn't then what would be alternative solution considering the Angular 5 project.
Thanks in advance
you can do this using the apostrophe-headless module. In that configuration you could build a separate backend site just for editing the content and use the headless APIs from your angular site so you don't have to deal with any disagreements between them over frontend things.
I am new to Angular2 client side development and i want to have a sort of a base project structure so i could go on from there.
I have found that you could create the structure using yeoman and angular2 generator but it seems that it builds on top of very early version 2.0.x.
Maybe there is an up-to-date generator?
I have also found some examples on github but all of them vary a bit from each other when it comes to structure and the content.
Regarding the site that i am developing, it would be a small company website with some static content, blog with comments, polls and an ability to sign-up / log in (i will be using Play as the backend). Nothing special so i guess a single module angular2 app would do.
Thanks in advance for the advice and tips on this one.
Angular-cli will help you out. and its up-to-date regularly. also it will help you in production deployment. and much more things goes on.
If you want configurable build processes, it's better to start with https://github.com/angular/quickstart else go for angular-cli https://github.com/angular/angular-cli
How to organize Vue-JS project [files and directory]: Non Javascript way?
Coming from a non-javascript background, I found Vue.js very intuitive and easy to use. My earlier experience in Javascript is with JQuery and vanilla javascript on the browser.
I created an application using Vue , Vue-components and vue router. Everything works fine.
My problem is, I have ended up writing a lot of code in a single index.html file of my project. This file contains over 10 templates that I have created and attached to different component in my app. I want to know that is there a non-javascript way to organize these templates in seperate files.
I see that there are options using webpack and browserify to modularize the project. But coming from non javascript background, I don't find them intuitive. I don't want to go node - npm way because that has its own learning curve and moreover it downloads a dozen of files and dependencies in my project which I don't understand. I am old school and more comfortable downloading the files and including them in the webpages.
So probably, you understand where I am going to. I need a solution where I could put my templates as separate files and read those files in the different components.
What I have tried :
Declaring the templates inside my components. But writing all that html inside the component is not that clean. It also, makes my JS file too huge. I am better in putting all data in the index.html instead.
Storing template as smaller chunk "homepage.html","about.html" and in my components, using $.get / $.load to read different components in ready function of the component. This works but I still have to fire an additional ajax call for each component which is not efficient.
Please refrain from suggesting the obvious node-npm [webpack and browserify] way. I know thats what is supported by Vue but this needs a learning curve and complete setup. Answer to this question would actually help other developers who hesitate going the node-npm way.
Please shout back if you need more clarifications to the question.
The options you've mentioned are your only real ones... the HTML of the template needs to be available when it's needed, so you either have to have it within your html file off the bat, or load it using AJAX or an in-browser loader like RequireJS (and this extension that allows it to load HTML https://github.com/requirejs/text).
In-file templates make sense for very small projects. As your project grows, you'll need to start using the tools that are built for this. NPM rocks and every JS package that you'll ever need can be included in your project in seconds.
I highly encourage you to try the Vue CLI
It does use node, npm, webpack and downloads dozens of files. Which you've you've explicitly asked for not to use, so let me clarify:
The Vue CLI takes care of the complexity and configures webpack for you.
You don't even have to know it's using webpack.
It's very developer friendly (it even has a built-in gui) and lowers the barrier to entry compared configuring a webpack config.
I hope you'll also find it "intuitive and easy to use".