angularjs SPA issue to load new contents? - angularjs

I am new in AngularJS and studying about routing. As i have created a demo application and it is working fine but the issue is whenever i click on the anchor tag it loads the required document 'x.html', once loaded in the ngView next time same content is shown but it should show new content as 'x.html' is dynamic page which shows the date Time from server.
There is no more hits to the server. How can i make changes to the app.config so that it shows new content every time. Is it against the SPA as it will take more time to load the things again.

I think, it might not be an issue with router or angular. Can you pls post the code you are writing to display dynamic time and date?

Related

Scraping Data from AngularJS loaded page

I am trying to scrape data from a public site PINNACLE page.
The page contains a div which when I fetch from Apps Script shows empty. I understand that it is because the data is loaded over ajax after page is loaded.
On checking the page, I came to know that they using AngularJS. I checked using Chrome Developer Tools but could not find the ajax URL for the same.
Could anyone help me on this. I need to fetch the data shown in table below using Google Apps Script.
Thank you all for looking into it.
I figured out the URL as shown in below image. The URL is https://www.pinnacle.com/webapi/1.17/api/v1/GuestLines/Deadball/4/487?callback=angular.callbacks._0

Ionic content shows up only after clicking on SideMenu

I have an ionic App which was working fine but now It is showing little weird behaviour, When I run the app it does not show the data at first but when I click on side menu once or twice then it loads and shows the data. I have an nodejs api from which the data comes to my app and the same api has been put in aws api gateway, I noticed this behaviour since I implemented aws sdk for binding data in my APP.
What can be the root cause for the same?
I can share the code but I am not sure where the issue is whether in controllers or views?
I solved it using Ionic Loader as the reponse was taking long time. My side menu was not getting initialized with the same time as other views hence views were not rendering without sidemenu being rendered, The idea is to show a loader on every response and hide it when it's a success, so it will render the views successfully.
Hope it helps.

Is there a way to live update app while writing angularjs?

I want to create an angularjs app but each time it requires to press the refresh button in the browser to get the update. thus it bring to this question:
Is there any way to get live update while writing angularjs app? So I don't need to press the refresh button each time I make changes in my angularjs app.
Yes, you can use grunt which is a task runner written in node, grunt has a plugin called grunt-contrib-livereload that reloads the page whenever there are changes in the files/directories that you want to watch. Alternatively, there's a scaffolding tool for client side web applications in AngularJS called yeoman, that has a generator called generator-angular - this generator has an opinionated structure towards AngularJS application development and it comes with a basic setup that you can use for livereloading code changes from any files that you have configured to watch.
Start using yeoman. It has grunt that will solve yr problem plus lots of more exciting stuff.
Check this quick start guide : http://yeoman.io/learning/
I use the open source editor Brackets.io by Adobe. Just click the lightning icon button to the right of the editor to run your web page and will auto refresh for every save.
You can do this in many ways. Many of the options are already mentioned in this post. All of them are workable. In my experience the most simplistic way to do this by the following way.No configuration , No setting , No need to code anything.
Just add this line in your <head> </head> tag of the html file
<script src="http://livejs.com/live.js"></script>

How to load a part of application before loading rest of the application in angularjs?

I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.

AngularJS: Auto reload

What is the most conventional way to make an AngularJS single page app automatically reload in the browser every time I change its code?
In other words, if I have a code editor open editing the HTML for the AnguarJS single page app, and a browser at that app, side-by-side on the same screen, hitting Save in my editor should instantly trigger the browser to refresh.
Alternatively, same scenario as above except instead of hitting Save on my editor, I did a Commit in my VCS.
Use Grunjs watch task for this.
That is the work of your task runner like gulp or grunt to watch the changes over specified files and perform action. None of this is related to angularjs

Resources