I have an existing angular application and I want to start changing some of it to a vueJS application.
My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).
I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9
However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.
So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).
If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.
Thanks
ngVue member here :)
At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!
That could be tough, because the build for the vue code will basically be a separate application.
One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.
So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:
window.postMessage({ app: 'vue', bind: '#vue-content' })
The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.
Related
We are rewriting an AngularJS app with svelte components and using Vite for building it.
It works great for the svelte components, but changes made to AngularJS code files requires the whole application to reload.
Has anyone solved that problem or and pointers that would help us construct the angularjs app differently in order to achieve that?
We changing pieces of it to Typescript, and import every file required. But the imports are not all referenced. Since AngularJS apps use injection.
Definitely not. AngularJS module unloading isn't a thing as it was never designed for that.
More information in this similar post: https://stackoverflow.com/a/23000380/4096074
I created an app with
react-create-app client
inside my e-commerce website(it uses nodejs and express), in order to implement some other functionalities. The problem is that i don't understand how to make the react-app work with ejs template, instead of using index.html. First of all i want the root component to be in a .ejs file inside views folder(outside react app). I think i need to change something in webpack, but i'm really confused, i can't even find config and there are a lot of additional plugins and code that i've never seen before, it's really difficult to understand something. Also when i run my server on port 3000 and app on port 5000 (with proxy set on 3000) it says 'something already running on port 3000'. What should i do? I can't use react on the entire website (all buttons, menus) because it's too simple for react i think, and there is some simple rendering done with ejs that i don't know how to implement with react.
At first you shouldn't use create-react-app for just bunch of components on existing page, this is whole environment done for true SPA done purely in React. If you need to just plug React to the existing page you have no choice than to read docs and learn or find a way how to setup in your existing app (you didnt say anything about it so I am not answering how.)
Secondly you need to eject your react app with yarn eject which will expose you all configs. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject
Then you need html-webpack-plugin which can accepts .ejs format as entry point https://github.com/jantimon/html-webpack-plugin.
I don't see any reason why not to use React for everything, because it is "too" simple. You can render plain HTML with PureComponents and it will cost almost 0 memory for browser to render it.
Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.
I'm beginner to appgyver steroids.
I have angular project. Now I need to make iOS application using AppGyver.
Instead of modify root view and point it to my angular app url (http://www.yourapp.com) can I add my angular app source / angular project build to AppGyver project make it iOS application.
Appreciate your comments
Gayan
You can run steroids create yourApp. This will walk you through the generation of a multi page or single page application. You can then move the structure of your angular application into the /app folder. Check out the example that the steroids create method generates and see the structure there.
You may notice some differences at first. It may take some testing to see what is failing if anything once you port things over. If you used $rootScope for anything it is not as reliable in my experience in an iOS or Android application. There are other methods for passing data between views and broadcasting (publish/subscribe) to other controllers.
You will want to use the iOS simulator or http://localhost:4567/app/moduleName/oneOfYourViewsYouAreTesting.html in your favorite browser while steroids connect is running to debug.
The version of Angular that is coming with this now is AngularJS v1.3.15 installed via bower. You may want to verify things are compatible with your current Angular version.
Ionic is used and Supersonic so you may see conflict with existing CSS or even javascript depending on what you've implemented.
There will be some tricks to learn about preloading views in the structure.coffee file and load times / rootView / initialView. There is lots of support if you come across any issues.
This forum has been really helpful in figuring out any issues I've come across. The Appgyver team is usually pretty responsive to questions directly as well.
They are updating the platform in a few days, and they say big changes are coming. They are hiring a lot of developers right now to take care of GitHub issues as well as build out the rest of their incomplete components.
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.