I have been looking at the Angular 1.5.x ComponentRouter and am trying to find a way to mimic the uiRouter resolve functionality. I have tried $routerOnActivate but it does not block the route from changing. Does anyone have the answer or a good reference to this functionality. In the docs it says "By returning a promise for the list of heroes from $routerOnActivate() we can delay the activation of the Route until the heroes have arrived successfully. This is similar to how a resolve works in ngRoute." but it does not seem to be blocking until the promise returns.
Related
Background, have an app built originally with angularjs, it's now a angularjs/ angular hybrid using the UpgradeModule. There's been kind of an ongoing problem with falling out of the angular zone and ending up in the <root> zone. Have hit on a fairly repeatable example.
Have hit a rather frequently re-occuring problem of getting stuck in the <root> zone and it's been distilled down to this.
So, 3 methods of creating promises, all starting in the angular zone.
new Promise(blahblah)
returns ZoneAwarePromise
new $q(blahblah)
returns Promise
let def = $q.defer(); return def.promise
returns Promise
So, this looks to me like $q promises are not getting patched with zone and so the angular zone is not being maintained and callbacks end up in <root>. Which results in things on the angular half being quite slow (once this has occurred) and occasional digest errors when something runs an apply/ digest in the callback of a promise from some sort of remote request. Common culprits are $http and callbacks from the angularfire library, etc.
So...put simply, is the UpgradeModule intended to patch angularjs promises ($q) as ZoneAwarePromise's? It's what I would have expected.
EDIT: Here is a more barebones example on StackBlitz. This example is showing the same as in my app: The UpgradeModule does not patch $q promises: https://stackblitz.com/edit/github-fwbk4x?file=src%2Fapp%2Fhome%2Fapp.component.ts
I need to load some parameters from Api end point before bootstrap application Angular 1.
I have a factory that contains my functions for request end point and save in memory. I need to use this factory to execute my roles. The problem is that I can not inject my facotry before bootstrap application. I can not create other roles that do the same thinks, i have to use this factory for my application working.
Anybody have a good suggestion about this case? Who already needed this case?
Thanks everyone.
If you are using the ngRoute router, you can use resolve functions to delay instantiation of the view and its controller until data arrives from an asynchronous API.
resolve - {Object.<string, Function>=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve (by default) or a custom name specified by the resolveAs property (see below). This can be particularly useful, when working with components as route templates.
— AngularJS ngRoute $routeProvider API Reference
I think you should be ok using the angular-ui-router. You can use resolve on your routes. This will force Angular to resolve the data before moving on to rendering the controller.
You can setup resolve before you enter your default state in ui-router.
Reference:
https://github.com/angular-ui/ui-router/wiki#resolve
I need to set up an authentication system with Node.js Express framework and Vue.js. I saw up to now solutions only with JWT. It would be nice for me to found a solution as this in AngularJS, with promises: https://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs .
Is it possible with Vue.js router or somehow otherwise to set up a resolve parameter with promise function as in this guide with AngularJS?
Thank you!
I am currently looking into this myself, and having worked with vue-router a little bit I think that router.beforeEach might do the trick: https://router.vuejs.org/en/advanced/navigation-guards.html
The way I see it is that a promise inside beforeEach route guard would be calling the backend api route and in case of success would be resolved and navigation to our route can continue, in case it's rejected - user's redirected to login route.
Will respond later once I've looked into this propertly myself as I'm still learning. Let me know if you have learnt anything about it since you've created this question.
I'm trying to figure out how I can get query parameters in the url using UI Router and AngularJS UI Bootstrap Typeahead fully working.
I have it working (well... kind of). What happens is that you have to search twice, once puts the query in the url and twice gives you results. Not ideal.
After doing some more searching and reading, I found this answer and it seems that using an $http service would be a good way to go. However, I'm only using ONE controller with 2 views. Will that still work?
UPDATE
The answer in the link provides an answer based on having 2 controllers, whereas I only have one controller.
So my question(s) is would using an $http service to store my query in enable me to put the query parameter in the url using UI Router and AngularJS UI Bootstrap Typeahead? Is this SOLEY a UI Router issue or is UI Bootstrap Typeahead play a role in this?
Code:
In my controller I initialize the relevant code like this:
$scope.searchTerms = $stateParams.searchTerms || '';
and use $state.go in my search function like this:
$state.go('search', {q: $scope.searchTerms});
It works like I said, but only after submitting the search query twice. Trying to figure how to get it working normally.
I am migrating my app from Angular 1.X to Angular 2.0 and I am having thoughts about routing solution while / after migration process.
I am currently using ui-router, with resolve in order to pass data for each route.
After some reading I came across this post. As far as I understand, there is no resolve in the new router. I now have two choices:
Continue using my current ui-router with my hybrid ng1-2 app (is it possible?), and bring each route's data via router's resolve. Will it work?
Change routing and use the new Component Router. This will make the step-by-step upgrade harder, because I will have to change my current Angular 1.X data fetching to be inside each controller / directive + I won't have Angular 2's #CanActivate which will wait for data to be resolved.
Which option is better? Is there another option? What will work here?
Thanks!
I encountered the same issue at work. I tried many things, but in the end I used a service:
var data = {
'foo': 'bar'
}
export const StateData = {
data: data
};
So now at the top of my component I can import the service:
import { StateData } from '/services/StateService.ts';
Then I can set and get data from the service by simply doing:
StateData.data.foo = "something other than bar"
Now when you switch routes, you can retrieve the new updated data within the constructor() or afterViewInit() methods.
*An added bonus of using the StateService is that you can bind your data between all components by simply adding the following method (you can name it whatever):
getStateData(key) {
return StateData.data[key];
}
You can call this method from the dom itself by doing the following:
{{getStateData('foo')}} --> will print out the value "bar"
Now if you change the value of foo within the service in a different component, it will change in the dom, since getStateData() is called whenever a change occurs and the service only loads once on page load.
I believe the init and afterViewInit methods are the reason as to why they have not added resolve to the new router, or maybe they still haven't released the version with it yet.
I hope this helps you out. I do not think using Angular 1.x + Angular 2.0 would be easy, nor would it be fun lol
I recently rebuilt my personal site in angular 2.0. The code is public, so you can check it out. If you look at contactCard.ts, contact-card.html and StateService.ts you can see it in action. Here is the repo:
https://github.com/YashYash/portfolio