I have a single page web app which has close to 10 different sections like
discussions
profile
video
etc , each of them have their states in the router as , it has its own controller and template and the urls are like
1. http://myapp/#/discussions
2. http://myapp/#/profile
3. http://myapp/#/video
when the angular app loads all the templates and js files are downloaded and at IIS only one request is made ie:
http://myapp/
but the things after '#' don't get passed to server. The UI router replaces templates at the client side but I want to track how many users visit the particular sections of my web app.
I cant do that from IIS logs as no resources are requested for individual sections in short i am expecting a log entry in IIS as below when a user visits discussion section
http://myapp/discussions
please let me know if I am correct in this approach or should i follow some other method.
A single page app, by definition, only makes an initial request to the server (IIS) to retrieve HTML and javascript. Subsequent interaction with your app is all handled by the javascript you loaded initially.
You won't be able to rely on your web server for tracking this. Instead, you should find something that can fire events from the javascript side, such as Google Analytics.
Related
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
So lets say you have a React-based mobile web app, that takes advantage of server-side rendering for the initial view ( for speed + SEO reasons ). There is no "index.html" file - the index file is dynamically built server-side and returned in the initial response.
Now lets say you want to add PWA functionality to that app. You hook up a service worker to cache assets, etc.
One of the core tenants of PWA's is that they provide an offline experience. Say we just want to show a refresh page, "You're offline, click here to refresh", when the service worker detects the user is offline.
Online examples provided by google talk about using an App Shell -- a static HTML file, which can be cached by the service worker on initial visit, and which will be the "shell" your react app lives inside. This shell ties in to showing an "offline" view.
How does this work with server-side rendering, where there is no "shell" html file, and each route can potentially return a different index.html file?
Any demos or examples of this functionality in the wild?
Any demos or examples of this functionality in the wild?
Yes!
Take a look at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option in sw-precache to define which underlying resources are used to server-render the App Shell HTML.
The service worker it generates will take care of updating the App Shell HTML whenever any of the resources it depends on changes.
In this model the service worker will return the same App Shell HTML document for all navigation requests, so it assumes that the App Shell HTML is generic enough to then be populated at runtime with the dynamic content that's associated with the actual URL via your standard client-side routing logic.
I'm thinking how to implement a SPA on Zend framework 2 using Reactjs? Haven't seen any tutorial that might help me. So, I was asking if this is possible. How would zf2 will handle the routes?
The routes are handled on the client side (by pushing URLs into browser's history so you can also use browser's back button for navigation)
Simply put, changing a route will not load a whole page from the server.
The server does not even know that your JS app is changing the URL in the browser (imagine you write by hand http://example.com#test while you were already on example.com; that #test thing is a fragment URL and it will never be sent to a server)
Instead, the JS application will respond to (once again, client-side) route changes by rendering a different page or section, and making some ajax calls to the server to fetch or update data.
Now let's see what the server should do:
send the first page (the "single-page") and the assets (CSS, JS) on
the first load
respond to app-originated AJAX API calls once the page is loaded and
the JS app has been started
That's why they call them "single page apps", because they do much of the logic and the presentation in the browser (DOM rendering, routes), and the server merely acts as a data layer, or a backend if you like this word better.
I have a Single Page web application which just has index.html as the entry page for application, all other URLs and screens load based on extjs scripts.
I added the Javascript tracker code before tag and am able to track whenever a user logs in via index.html page. Howerver, there are multiple screens with different URLs in my application, not sure how can we track other screens(different URLs loaded at runtime) via Piwik
I saw some solution for Angular JS single page application, do we have something similar for extjs as well?
Please post any related information and with those pointers, probably we can reach a solution.
Thanks in advance!
There is currently no official guide about this but it is planned.
In order to track the different screens, you will need to push manually page views to Piwik. First you can have a look at the guide for the JavaScript Tracking Client.
Here is an example to push a page view:
// Piwik must be loaded normally above
// Track a page change
_paq.push(['setCustomUrl', newUrl);
_paq.push(['setDocumentTitle', document.title]);
_paq.push(['trackPageView']);
You could also track events if some links are more "actions" than pages.
You can also have a look at all the features and options in the JavaScript Tracking Client API reference.
I'am doing my first AngularJS project with ASP.NET Web API backend. What I am trying to do is, whenever a user visits www.mydomain.com, a login page (index.html) will displayed. After successfull login, he will be redirected to the dashboard.html (this is the shell page, partial views go here). My project structure is shown below-
I am confused about some issues:
Is this the best/common practices what i am trying to do in above?
As because dashboard.html is the main page, should i place app.js on dashboard.html?
If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)?
How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part?
This question may be silly. I googled, but did not find any example/article addressing such issue.
Would you please help?
Thank you in advance.
I am not sure how ASP.NET deals with it, but to my knowledge ASP.NET is just a server side framework whereas AngularJS is client side framework.
These two framework solve different problem, but has some overlapping features.
If you start using angularjs, then most of the time you will deal with the term "Single Page Application (SPA)".
There are different approaches in how you can handle the url redirection after login. I will just show you two example. There are many more how you can handle the user authentication and session.
First Approach:
In SPA, most of the time browser will change the url route and state directly in the page itself without making the entire page request from the server.
With that said, your dashboard.html will most likely be come a static template file which will be loaded from the browser directly. (i.e. the server does not dynamically parse the dashboard.html but only serve as a static file). Upon the user login, the angularjs will fire a asynchronous HTTP request into the ASP.NET authentication end point. A successful login may return a token to the browser, and the client will use it to manage the user session. At the same time, the Angular will have to change the route to /dashboard/. Notice that that the entire flow happens transparent to the user, it does not fire a full page HTTP request.
Second Approach:
Alternatively, if you choose to redirect from the server, you will have to send a HTTP Redirect 302. and since HTTP redirect will eventually call make a full HTTP request to /dashboard/, and it will then have to reload and bootstrap the angular app.js from the browser again. In this case, the user will have to wait for the dashboard page to be processed by the server upon login
Issues:
Is this the best/common practices what i am trying to do in above? there are many approaches, I think it is best to find the one that works for you. If you have a RESTful API, then you might want to have a look at the SPA approach in more detail.
As because dashboard.html is the main page, should i place app.js on dashboard.html? in SPA, you don't need to load app.js twice. but if you use the second approach, you have to reload the app.js again.
If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)? depends on your approach as stated above
How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part? Authentication Strategy, UNIX style authorization
There are more official guide that can help AngularJS Developer Guide.
Hope this helps you to integrate with the ASP.NET authentication mechanism.
you should have multiple shell pages. this link can help you...
refer to Multiple Shell Pages part.