i am working on a angular 8 application , when user clicks on a button it should redirect to a vendor portal which is completely a different webapp (diff Url), when user redirect to vendor page , user should see the same header ,footer and navigation what i have in my web application. but the vendor application is on angularJS(1.x).
so my question is can we convert the Angular8 project/component into a standalone JS file and ask the vendor to load the JS file in their application ? this JS file should contain the logic to replace/inject with in their page. for ex: we ask the vendor to create a html element with ID name "custom-header" in their page and ask them to add my JS file (hosted on CDN ) on their landing page, and in my JS file we need to write a logic to look for "custom-header" Id and replace with our content ?
so can we write custom code in our Angular8 application and export it as a standalone JS file ?
Note: my Header/Navigration/footer angular components are shared components , i want to use the same component in my webapp as well as vendor component
Here's the shortest answer: No.
Here's the 'been there done that answer':
I've spent time trying to make things backward compatible and it's rarely worth the effort. I have written alot of angularJS and Angular2+ code and believe that any time you spend trying to crowbar a solution here would be better spent just making the angularJS module. AngularJS a simple, fast framework and you could have your result quickly. Alot/most of your logic/html could be directly ported over with small mods.
Here's the TL;DR answer:
I hate to ever say 'You can't do that' with technology because I'm usually wrong... but you can't do that directly. Well, I guess you could use iframes but that's not a good idea.
While there is a path to incrementally merge angularJS into an Angular 8 app, the same is not true of the reverse. However, you should be able to leverage much of the existing logic from the A8 app into a module that angularJS could just import.
Without seeing how intricate the A8 component is, angularJS is alot simpler and it's relatively easy to throw together a controller/directive/view single import. I don't see a clear path to automatically updating the aJS code when you update your angular 8.
Related
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I am new to PWA, i am curious to know that is it possible to create a PWA in angularjs?
please provide steps to make PWA using angularjs if it is possible to create PWA using angularjs.
There's nothing framework-specific about PWAs - your site just has to meet a certain set of criteria:
Everything is served over HTTPS
The design must be responsive
Your app must be available offline (i.e. it needs a Service Worker)
You need to provide a manifest file containing metadata about your application
Your app must work in all modern browsers
Page transitions shouldn't block the app (i.e. you need to show loading screens/spinners if things are taking a while to load)
Each page in the app needs a unique URL
All of that is achievable with Angular 1 - it'll probably be easier with a modern framework, but there's nothing stopping you sticking with what you've got, for now at least.
look at this github project https://github.com/addyosmani/angular1-dribbble-pwa
I am new to angular js, I have started refactoring code in my project which was developed by some developers previously working in my organization. There are some problems in the code that is making my web page slow.
There is a dashboard page with all the feature links over there. On click of each and every link the html is getting replaced with the specific feature. Now to make this happen the developers have included all the controller/service js file in the dashboard page itself, which is obviously making the page to load slow.
Please help me out or at-least give me a direction in which i should start thinking.
Sounds like you are trying to optimize something that you are no investigated.
You can use oc-lazyLoad package in order to achieve your requirements, but bare in mind that, it only improve the first bootstrap nothing else.
From your description, it looks like you have a different performance problem, you should investigate it using devtools performance tab.
The Scenario
I'm developing the front-end (CSS only) of an Angular SPA.
I'm not especially familiar with Angular routing.
I'd like to add a standalone page containing Bootstrap components just for development purposes (yes, I know this means it won't be a single page application anymore). This way I have one unified view with all the components so I don't have to switch back and forth while working on the CSS. It also acts as documentation for the Bootstrap for the other devs to refer to.
What I've tried
I originally added a bootstrap.html page to the app folder, alongside the app's index.html This worked at first, but has now stopped working. What would be the best/standard way to achieve something like this?
Update: I've managed to fix some of the JS errors, so the page is up and running again. My question remains though: "is there a way of adding a standalone page that is considered standard/best practise, or is it literally just add a separate HTML page at the app root?"
If you use a target='_self' in your linking anchor tag, this should force a full page reload, and that will avoid the angular routing - which is where I expect your request is getting hijacked (by design).
e.g.
link
Answering your updated question
Not to my knowledge, since (as you correctly pointed out) this mixes the SPA design pattern.
Angular js is new in market so is there any advantage of using angular js with magento ?
If yes then anyone knows how can we use both in a single project ?
Angular is not new in the market, it´s pretty old already. Anyway, the benefit of using Angular (or another client framework) is that your shop can be a lot faster - instead of a page refresh for every click, you can load data/templates with Angular. For example, with a REST API. Meaning: you only load what you need and the server can handle more users.
There are many resources about this topic already, here´s a small list:
https://github.com/Wildhoney/Magento-on-Angular
http://www.webspeaks.in/2014/03/integrating-angular-js-with-magento.html
https://firebearstudio.com/blog/moa-magento-on-angular.html
http://www.neevtech.com/blog/2013/04/12/lightning-fast-magento-store-with-json-angularjs-and-magento-j-a-m/
https://www.reddit.com/r/Magento/comments/33mcgq/we_did_it_we_converted_our_magento_site_to_a/
Read through all those links and you will know why it´s good and how it can be done.