I'm developing a complex information system, and our front-end stack is defined to use Angular Framework. I'm aware that Angular was planned and mostly suitable for Single-Page Applications. But at this stage, I'm facing an issue with MPA support from angular 6. Basically, our client's requirement is that to view certain element in a system, it has to be opened in a different tab because normally people will open multiple and use it to gather or compare elements between each other.
My current app is distributed among multiple lazy loaded modules, so my question is what is the best way to implement MPA support for angular, in order to solve this issue? I know that if I open a link in a separate tab, the whole application has to be downloaded by the client and only then he can view the particular page. Can anybody advice on maybe certain solutions for this case, or whether its possible to not download the whole app on a new tab? Thanks.
PS. I've browsed through the whole internet, but haven't found any solution for this.
I am working on a multipage app using angular these days. There we use normal location.href navigation for routing rather than using the angular router module. This way angular app can be used as a multipage app. When we do this, every time when we are reloading the browser, angular bootstrap everything and loads from app component onwards. So when you use lazy loading, you can limit the the no.of modules loading every time the browser refreshed. same happens when you open something in a new tab.
As suggested by #Suresh Kumar Ariya, server side rendering is to just render the static content of a page while the javascript files needed for the dynamic functionality of that page loads in the background. So I don't think this is what you are looking for unless you wanna just serve static content fast for user experience improvement.
What you can do is try to do more lazy loading to minimize the initial loading and optimize your code
You can also opt for Angular with Service Side Rendering Concept. So Data can be shared b/w client and server end. https://angular.io/guide/universal
Thanks everybody for advices, solved the issue with service workers, now all tabs are loading instantly =) thanks to #Patryk Brejdak
Related
After looking around a bit I came to no conclusion about this matter: does Google and other search engines crawl pages that are only accessible through ng-click, without an anchor tag? Or does an anchor tag always need to be present for the crawling to work successfully?
I have to build various elements which link to other pages in a generic way and ng-click is the best solution for me in terms of flexibility, but I suppose Google won't "click" those elements since they have no anchor tag.
Besides the obvious ui-sref tag with I have about other solutions like:
<a ng-click = 'controller.changeToLink()'>Link name</a>
Altough I am not sure if this is a good practice either.
Can someone please clarify this issue for me? Thanks.
Single page applications are in general very SEO unfriendly, ng-click not being followed being the least of the problems.
The application does not get rendered server side, so search engine crawlers have a hard time properly indexing the content.
According to this latest recommendation, the Google crawler can render and index most dynamic content.
The way that it will work is that it will wait for the Javascript to kicking and render the application, and only index after the content is injected in the page. This process is not 100% proof and single page applications cannot compete with static applications until recently.
This is the main reason why most sites are using them for their menu system, as that would make for a much better user experience than full page reloads. Single page apps are not SEO friendly.
This is slowly changing as now Angular Universal, Ember Fast Boot and React are adding the possibility to render server side an SEO friendly page, but still have it take over as SPA on the client side.
I think your best bet to try to improve your SEO is to submit a site map file to google using their webmaster tools. This will let google know about those pages that you trigger via ng-click.
Note that this only has a chance of working if you are using the HTML5 mode for the router and not using bookmarks (urls using #), as Google does not index bookmarks.
In general its very hard to get good SEO for an Angular 1 app, and thats why its mostly not used for public indexable content. The sweetspot of AngularJs is for building the "dashboard" private section of your app, that users can access after logging in.
Try using prerender.io to prerendered these angularge pages and filter out bot requests and serve these prerendered pages from the page cache.
I am using angularjs 1.4
I would like to have 2 web pages for my web application. 1 web page for log-in and another web page for the main app. If user logs in correctly, he will be re-directed to the web page for the main app.
I am not sure which is a better design for angularjs. Should I use 1 ng-app for one webpage or should I use the same ng-app for the 2 web pages? Which approach is better for angularjs? Or doesn't matter?
I don't think there is a right or wrong answer here.
In my opinion:
If I have a large application that has a couple of large components - then I like splitting them up into separate applications.
If you have a small application with 2 pages then I guess this should be in the same single page application.
If you have a master page and you don't want any reloads or glitches - then this must be in one single page application.
Depend on your architecture, if you want to have each web page on two diferent servers then the answer is yes better two diferents apps in the other hand if both apps are in the same server, domain etc then only one app is going to work well.
I am building a single page app. I have been playing with AngularJS. I'm a little nervous about 2.0 so I am open to alternatives to Angular. My challenge is, my site has a hierarchical structure.
/Home
/About
/Blog
index.html
post1.html
post2.html
...
/Products
index.html
product1.html
product2.html
...
index.html
/Contact
/Online
form.html
index.html
Most SPA apps I see are only one level deep. In addition, I can't animate the navigation items associated with each level. In other words, when I click a link at the top level, I would expect the sub-navigation items to animate in. The other problem is dynamically loading content. I don't want to load my app when it initially loads, instead, I want to defer loading of content until its needed.
Can anyone recommend a SPA framework to help me address this challenge? I don't think I can tackle this problem with Angular 1.3. The router in Angular 2.0 look like a potential option. For now though, it does not look viable.
Thanks!
My challenge is, my site has a hierarchical structure
There is nothing about SPA or AngularJS that makes a hierarchical structure harder than a 1-level flat structure. The built-in angular router can handle this just fine.
In addition, I can't animate the navigation items associated with each level.
Well, post a detailed question about that, but maybe take a step back and think about "animated navigation". Sounds like low-usability, distracting, unnecessary behavior to me. You look to be building a basic marketing and sales site for some company. Not sure animated navigation should be a major concern.
I don't want to load my app when it initially loads, instead, I want to defer loading of content until its needed.
This is also almost certainly premature optimization and misuse of engineering cost/effort. Defer loading of content (HTML and text) perhaps but probably not code (javascript). Splitting an app up into deferred-loading modules is for apps with 100 developers and huge codebases with multiple complex areas (think airbnb, facebook). Chances of you realistically needing to do this and having it be a worthwhile effort (cost/benefit) for your stakeholders are extremely slim.
I don't think I can tackle this problem with Angular 1.3
I'd recommend trying with the built-in angular 1.3 router first and if you end up wanting multiple distinct states at the same URL path, check out the angular-ui-router.
I am loading an extjs4(.2.1) application within a div in JSP page. In my JSP i display various links based on what the user is allowed to do. On click of each link the page refreshes and I set some javascript variables (based on server-side logic) which are used by the extjs app as input.
In order to get rid of the page refreshes and therefore improve performance I have refactored this page using AngularJS(I just learnt Angular so I thought I would try using it). I have used routing. So now I get all the inputs for each of the menu clicks at once on page load. When the user clicks on a link the Angular route sets up the appropriate inputs for the extjs application without refreshing the page or going to the server. The extjs application now is present in an IFrame instead of a div as before so the Angular route basically refreshes the IFrame each time a link is clicked to reload the extjs app.
The results seem good. Pages load faster.
My questions :
Is this good design?
I know AngularJs's real power is in data binding and directives which I do not leverage. Is it an overkill to use AngularJs for this usecase?
Is there a better suited library for this specific purpose?
Thanks for your time.
While it may work, other people maintaining the app need to understand the two frameworks and visitors to your site will have to download all that extra code.
It looks like EXTJS 4 has extensions for UI routing ext-ux-router and ExtJS 5 has it built in.
By using a router built into EXT JS you may be able to avoid the iframe reloading hack.
Recently I have taken over a Windows Store app project written in C#/XAML and one of its requirements is,
Migrating the project to Javascript/HTML5, and by making javascript dynamically loaded from our website, we can update the code logic as often as desired without having to prompt user to download a new version of our app. The deployed app is very simple and does not require update, each time the app launch it will try to load the javascripts and contents from the web.
This requirement is from marketing and they think it is fantastic if the app can be updated in this way. I don't know if this is a good idea, or even feasible.
My questions
Give me some reasons if this is not a good idea/not feasible
If javascript can be dynamically loaded, what about html and css files?
Edit
When I asked this question, I had not heard of Cordova, the idea of hybrid app was quite new at that time. With Cordova, we can write app that runs in this way. The web content (HTML/JS/CSS) is rendered in a WebView control and can be updated from the web each time.
In short, I don't believe the app can be written in this way.
The application code is part of the appx package when the app is deployed and if you wish it to be accessible via the store, it has to pass MS's app certification checks.
This ensures that the app code is is suitable quality and ticks the appropriate security boxes etc.
I don't believe you can dynamically load application code from a remote source, otherwise you could be loading any old unverified cack and this code would not have been checked.
However, the updating mechanisms are very simple as I understand it and pushing a new version of your app code to the store will allow users to update the app at their leisure and handle the process for you.
I think the best you can get in terms of loading things dynamically would be to load a webpage remotely in your app (the webpage could be updated as you wanted). This would not allow you to run application code from the webpage, and with the webpage being remote, it would run under the 'web context' from a security perspective, so you'd not be able to use a lot of the native functionality you could run locally.
If the reason for re-developing the app in JS/HTML is to load code dynamically, I would advise against it. There are not a huge range of differences between a C# implementation and a JS implementation, so it would seem inefficient to redo all the existing work in a different language.