I have an angularjs1.5 app and it is using ui-router for state change.Recently, I got the requirement to implement google analytics in our app. I never worked on google analytics before.So, I started doing some research.so far, I bottom down to two points.
Analytics.js -> use analytics.js and use $stateChangeSuccess on $rootScope to track the ui state change. This is simple and straight forward. it tracks any state change in the app and sends tracking data.
angulartics -> This directive can be used to track state changes/ event changes or any dom changes. Looks like, the implementation is not that simple.I am not sure if this works with ui-router.
my thought here is if only state changes need to be tracked then I should go with option 1 and if state/events level changes need to be tracked then should go for option 2.
Could you pls let me know if I am on track or am i missing something here? it would be great if you could point me to any sample implementation on both approaches.
Thanks a lot in advance !!!
Related
I need to keep the state of a component A in cache, so that when I navigate from A to B or C and I come back to A it does not get re-render again (it also includes a API call in its constructor, so it's kind of slow). I will like to keep this initial state through out the whole session of the user.
In Vuejs https://jsfiddle.net/shidianxia/ckj7xbqq/ they have a very simple way to do this using this syntax:
<keep-alive :include="include">
<router-view></router-view>
</keep-alive>
I will like to have something similar for AngularJS, notice I say JS so old angular. I have an hybrid application using modern angular but keeping old angularjs router.
I appreciate your help, thank you.
According you your comment I think it would make sense to build it in 2 parts.
Part 1: Keeping the state in a service
By keeping the state in a service you would limit the request send to the server and thus saving time.
Part 2 Using $templateCache
By using angularjs template cache service you should keep the time for rendering the view with your data to a minimum. You can find infos on how to use that in their docs https://docs.angularjs.org/api/ng/service/$templateCache
If you in the end still have this flicker while rendering you should use ngCloak to prevent showing the uncompiled view (https://docs.angularjs.org/api/ng/directive/ngCloak)
In my Angular SPA, there's some data loaded from the backend that is used throughout the application. This data doesn't change while the app is in use, so to keep things slick for the users I'd like to only load this data once. I can see two possible solutions here:
Load the data when the app is first initialised and attaching it to $rootScope using angular.module.run()
or
The first controller to need the data loads it, and then puts it... somewhere... where everything else can get to it.
Which approach is the "most Angular" way to do this, and how would I start to implement it? Most of the questions on SO seem to be about loading data with the controller rather than when the app itself starts. I'm using 1.4.7 with UI Router if that makes a difference.
You could implement a service which has been sugested by others and ALSO make the service load the data in a lazy way. (Lazy loading pattern described here: https://en.wikipedia.org/wiki/Lazy_loading)
I have a tab in my Ionic project which consists of a map. On that map, the user can pan around and do things such as draw polygons, etc.
However, when the user moves to another tab and comes back, the map is completely reset and all his work is gone, because Angular seems to destroy the state. In addition, another request will have to be made to the map tile server because of this, which can be expensive (financially) for the company.
Is there a way to tell Angular not to reset the state when navigating from tab to tab? Or perhaps this project isn't a good fit for Angular based technologies?
I am not sure how the map is being created in your scenario, but have you tried nesting your states? http://angular-ui.github.io/ui-router/ has a great example of a nested state that shares data between them. You might also look into the $cacheFactory service: https://docs.angularjs.org/api/ng/service/$cacheFactory and use it to store and retrieve your map.
I was trying to find some resources online for using Google Analytics' event tracking functionality in a Backbone application, and the only one that I was able to find was a blog post from airbnb, which uses CoffeeScript. Does anyone know of any resources for a regular javascript Backbone app? I have not used the event tracking functionality before, so basic resources are appreciated ...
Thank you!
You can just push events into the queue whenever is appropriate.
So, for example, we have a single paged app, for which we want to track page views, although we're never reloading the page.
To achieve this goal, we attach on all of our router events a listener which pushes each new page view into the _gaq stack. (This is greatly simplified.)
router.on("route", function(page) {
_gaq.push(['_trackPageview', page]);
});
This will push the page argument into the Google Analytics tracking stack. Just make sure that you've set up Google Analytics prior to this call.
For events, for example, we sometimes want to track a button being pushed. Therefore, we just make a _trackEvent push into the queue with the object containing the details of what we're pushing.
Instead of putting a ton of _gaq.push code on your page, I would recommend you to make a function available throughout your app that abstracts this functionality, such as:
var track = function(event, payload){
_gaq.push[event, payload];
};
This will isolate you from changes to the Analytics API, as well as allow you to add other reporting locations to your tracking events easily.
I have a web application with require.js, backbone.js and jquery.
The brief structure of the app is as follows:
There are 2 sections on the screen (toolbar and main content below).
There are multiple components (address management, event management), each triggered by a hash fragment change and require a
page transition.
There is one backbone.js router. It's the heart of the application. The router is activated with a new hash fragment (manually entered,
back button, menu item selection).
Up until now, in the router, I made the page transition, I DIRECTLY called the controller ("view" in backbone) of the selected component.
So there's a CENTRAL handling of controller calling.
But this has to change now to a DISTRIBUTED handling. I now need to respond to a new hash fragment from two different places: From the toolbar component and from router.
So my idea is to exchange the direct controller calling mechanism with pub sub. Now MULTIPLE components could register for a special action and the router just "fires the event".
I searched around and found Chaplin (https://github.com/moviepilot/chaplin), a backbone.js example application.
The developers of Chaplin seem to have a similiar thing called "ApplicationView" (https://github.com/moviepilot/chaplin#toc-router-and-route):
"Between the router and the controllers, there’s the ApplicationView as
a dispatcher."
Is there anyone who has already this kind of architecture and can tell me his experience with this or has anybody solved this in another way?
I've used a similar, though maybe less complex, architecture in this project. I give a pretty good explanation in this answer to a related question. The quick overview:
I manage app-wide events that change the application state using a singleton State model that works similarly to Chaplin's pub/sub architecture. This is just a basic Backbone model, with some added methods to deal with serializing and deserializing attributes as strings, so they can be set in the URL.
Application components that change the application state in response to user interaction or other input do so by setting properties on app.state.
Components that need to update when the application state changes do so by binding to change events on app.state (it looks like this is exactly the way Chaplin's mediator works, though they renamed the methods to fit the pub/sub paradigm).
I treat my routers like specialized views that update the address bar and respond to user input in that area. Changing the address (manually or by clicking on a link) causes the router to set() the necessary changes on the app.state model, and everything else updates accordingly.
I hope that's helpful - I think it's a little simpler than the Chaplin approach.