Is there a reload/refresh or like the Angular 2 version a renavigate method for the now deprecated (but much too late for the current project already built on it) component router for AngularJS 1.5?
Currently in order to destroy the route components and reload them I had to create a dumby route at the same level that I switch to and then back in order to force the components to be destroyed and then be rebuilt due to the view being composed of dynamic form fields.
I'd also be interested in any other suggestions if no API call exists to refresh a route.
The answer was to use $routerCanReuse and explicitly return false (since we don't have any other logic to apply), which when you reroute to the same route will now destroy and recreate the components allow for the dynamic forms to be re-rendered.
Related
I am trying to prevent the situation where code is injected multiple times when revisiting a previously viewed Route.
In a conventional site, the page is reloaded, and thus all the tags and their content need to be downloaded again, but in React, using react-router-dom, the history is changed without a page refresh. This leaves the previously injected code on the page.
I'm trying to gauge if the logic for restricting when a tags content should be injected into the React app belongs in:
GTM Trigger
GTM Tag
I cannot find any documentation for achieving this in triggers (as tag firing options->once per page doesn't work in this case), but achieving it in the tag code could be as simple as checking for the existence of an id wrapping the tag code, and preventing injection if it is already present.
Any suggestions?
I was building a dashboard view in my react-admin app, using a custom route and a List. (I found the necessary doc in the Custom App doc)
But ra's List component is bound to current route, location etc.
As I will show multiple lists I guess I may use ListController instead, with a custom view.
This approach lead me to an idea... Why not use react-admin to build both my app's admin and front-end ? I would be able to use the same dataProvider, authProvider, custom actions etc.
Do you, react-admin lovers, think it'd be good idea to try using ra components (List, Edit, ListController...) and leverage the power of ra to build a fully ui-customized production app ?
Is there a proof-of-concept out there ?
I wonder if I should give this a try (I really wan't to) and I'd love it if I could get feedback from developers who endeavored to do just that already.
I think it's a good idea, and it should be relatively straightforward. React-admin controllers (ListController, EditController, CreateController) don't depend on the route explicitely. It's only because they are used as children of Route props that they receive route parameters (rescource, id) in their props. ListController and CreateController do need a location prop to work, because that's where part of their state comes from (the filters in the list, the default values in the create form). But if you pass your own location, it may work.
We could imagine refactoring these controllers to be completely route (and location) independent, but I'm afraid of the added complexity for handling filters in the URL.
I would like to use Protractor to perform automatic screenshots across all our e2e tests.
The purpose for that is to be able to review those screenshots occasionally in case there're some visual slips we introduced. My idea to accomplish this automatically is to take a screenshot after angular ui router performs state transition.
The transition is a good indication we'll be looking at a different view. My question thus is, is it possible for Protractor to hook up to state transition?
For AngularJS (1) you can use mockModules, I don't exactly know if you can hook onto the router then. With Angular (2) you can't use mockModules.
Possible alternatives are:
listen to url changes
Create a customer methods that also adds taking a screenshot after url change when you click on an element that results in a route change.
Hope it helps
I am creating component based Angular app using Angular version 1.5.5 and typescript. In the header component I have country dropdown. That header component is re-used in multiple pages. Once the country is selected from the dropdown that particular scope lies only for that page, once I navigate to other page its got lost.
Is there any better way to reuse the component based on my scenario?
Few suggestions,
You can make use of $rootScope since its globally available, keep the country in $rootScope so that once you changed the model it will be available in the other pages as well
I don't know whether its suits your situation, If you are using angular routing keep the header component outside ng-view so that it will not change will navigating through different pages.
Any quick-and-easy answer to the scenario where you want to build something like a simple questionnaire with React and React Router where you don't want the user to be able to modify the URL to browse anywhere and you also don't want to push history state into the browser, essentially preventing use of the back button?
Sample routes might look like:
questions/1
questions/2
questions/3
...so on
But the URL should stay the same at all times and the history won't change, essentially what a single page app without routing would behave like.
For the history part, you would need to use replaceWith() everywhere you want to change route.
If you're using <Link>, you could create your own version which uses replaceWith instead of transitionTo - you should just be able to copy its implementation and replace the PropTypes require call with require('react-router/lib/PropTypes').
I can't immediately think of a non-horrible way to prevent the user from jumping around though - presumably you also want the app to break if they try to start on anything but the base URL? I would just use some simple state to control which component is currently being rendered instead of using React Router if that's the behaviour you really want.