AngularJS page takes long to load - angularjs

I'm creating a page using AngularJS as front-end and SpringBoot as back-end. I'm completely new to AngularJS and I can't figure out why it takes so long for my page to load.
Thank's for any help in advance.
This is the link to my page:

All the modern JavaScript frameworks come with a learning curve you have to get over. For AngularJS, since you are new to it, I would strongly suggest you use AngularJS2. It's faster than 1.x.
Familiarise yourself with the build process - in production environment you want all your files packed and minified.
For a general approach have a look at this blog article (a little older, but you get the gist).
For Angular2 check out the Angular Seed project
Watching some tutorials on YouTube about the build process will help too

Related

Alternative to Single-spa

We have huge enterprise application written in angularjs.
Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade".
So now we are creating a new application in angular, which means we have 2 applications "angularjs(old)" and angular(new).
So to switch between these two applications can be done without refresh using angular-spa.
I was trying to find if there is another framework, where navigating between two apps happens without refreshing(without refreshing entire page by navigating to new html).
Possible solution:
Use a new Angular application as a wrapper, then just use iframe to show the application you want depends on the context - old or new. The issue you might face is changing the iframe, but I guess you can use postMessage to communicate between the apps.
A bit more sophisticated:
Use Angular Elements to create your hybrid app.
I really recommend you to watch Erin talks from the last Angular connect about how Google made the migration from js to Angular.
I've recently tried the micro-frontend architecture described here:
https://www.martinfowler.com/articles/micro-frontends.html
Each app on different code repository, runtime build and quite easy to implement. Take a look :)

Is there any advantage of using angular js with magento?

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.

Creating a mobile App with Laravel and AngularJS

I've been reading up on AngularJS lately (always used jQuery) and I'm starting to understand and like it. Normally I would build webapplications with Laravel. Now i'd really like to dig further and learn about connecting these two frameworks to build an awesome SPA. In this case, Laravel serves as a REST api and Angular handles the front end. This article and also this video helped me a lot, but still raises questions.
The biggest one (maybe very stupid) is: could the HTML/CSS/JS be converted to a native mobile app, for example with PhoneGap? Because that is what I'm wishing to achieve if possible.
Also, if this is possible, is it a good way or does it get too tricky?
This is still very new to me, just need some help on the way. I hope my question makes some sence, thanks in advance.

Is github coded using angularJS in the front-end

Just really curious about this,is github coded using angularJS in the front-end? I've noticed that the pages almost never reload, just a bunch of behind the scene requests. It acts more of a web app than a web page.
I don't have anything to do with this site, but I believe it serves your purpose:
http://builtwith.com/github.com
It allows you to enter any site, and it attempts to scrape production details for you.
No, you can see by yourself:
Angular.js is just a very good framework around javascript, whatever you can do with angular you can do with vanilla javascript or with other framework (but with more pain).
They use "PJAX" for the seamless transitions:
pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.
https://github.com/defunkt/jquery-pjax
(seems its now pjax2: https://github.com/github/pjax)
Github uses github so you can check out a lot of their libraries at https://github.com/github

How to integrate AngularJS with Lithium?

I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.

Resources