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.
Related
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.
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.
Using AngularJS 1.5.8 and Django/Django REST Framework as the back-end.
At this points have two URLs (app/ for login and app/dashboard as the main content); would be great to just have app/.
login and dashboard I have as components; navbar and sidebar I have as directives.
Using ngRoute currently and somethings I am reading lead me to believe I should be using ui-router to accomplish this.
Just some basic things that came to mind.
My sidebar has several tools I am developing. I want the user to be able to click on them, and then have the content related to that tool load in the main content area without the page refreshing or the URL changing.
Some of what I have read suggests ui-router might be better for this purpose? I am not, sure as I am just learning AngularJS and still struggling with its concepts. Thus, I don't have any code to post that needs to be fixed. Primarily just trying to understand the concepts and technology I need to look into to accomplish this. Makes it hard to lookup results on Google and SO when you aren't even sure what the terminology and tech is that you should be looking for.
Not sure if ngRoute or ui-router should be used; whether the modules should be built as components or directives; if the content for each tool stays in its own HTML template; etc...
This is a somewhat broad question but what you are looking for is client-side routing. Both ngRoute and ui-router offer this functionality and in very similar ways except ui-router offers significant extensibility with nested routes and multiple named view containers.
My advice is to start with ngRoute and learn it's ins and outs and then switch to ui-router if you find you need this extra functionality.
Client-side routing can either be used with the hash-bang (#/) or using html5 mode you can use a base URL that would function visually like server-side routing.
Now you've got the terms to search at least so happy Googling!
I have created an angular application which uses web services to fetch data from my backend and also implementing other logical data based on user.
Since it is a client side application, the code will be visible for anyone and my logical functionalities. I am afraid that it is possible that anyone can find a loophole in my application.
Even if I minified my js files, there are many tools available to unminify it.
So is there any possible way to hide my js files from browser or some other way to avoid reading my code?
The only solution is you cant hide the javascript code from inspect. The maximum possible method is to minifiy the and uglify the code to make the code un readable. but still there are some other methods to hack it. Please look here for more details.
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.