I am using AngularJS on top of an MVC application. How can I make my AngularJS app depend on a resource having been loaded? In this case I want to ensure my UserData is loaded BEFORE anything else happens. I am using UI Router and I know I can set resolve states on individual routes but I dont want to have to add this to every route. Is there a global way to do this?
Simple solution: you can add a parent state of the entire app and use only one resolve there.
With this approach, the data that resolves will be available for all the children.
You can get all data in "run" block and put it in some kind of service wrapper.
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)
I am trying to run angular next to our old angularjs application. Before we try to go the ngUpgrade (a lot of refactoring needed before possible) route I'd like to try and run them independent from each other. I thought I would be able to achieve this by just rendering the tag and the associated script files that get generated (by angular-cli) on the specified routes that I want to upgrade to our new application.
I do this by adding a state to my angular-ui-router. With *param as last url value so all subsequent routes go to the same route.
img-link
But now I have an issue that when I redirect from an angularjs(e.g. /user) route to a new route( e.g. /subscription/2) the application breaks because angular can't resolve the previous route.
I thought this could work if I could intercept the routeChange in angular but can't find a way to do this.
Is this even possible?
In order for angular to intercept and handle routes you need to use an UrlHandlingStrategy. Please check the example here.
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
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 am working on a small piece of an angular project and need to define some constants that are derived from values in a database. I have a REST endpoint that delivers the data I need, but I can't figure out how to load the values before the app gets automatically bootstrapped.
I cannot modify the application to a manual-bootstrapping process. Typically a resolve would be used upon navigation, but I have other components (like modals) that use the constants that aren't necessarily part of any route.
What would be ideal would be some sort of "resolve", but at the application layer. I do have the ability to load npm and bower packages, but anything that changes to a 'manual' bootstrapping method isn't allowed.
In that case I can recommend you to use a $rootScope. I don't understand very well your needs, but everything that is stored in $rootScope will be available in all views. Just fill it with your REST service inside the first or main view of your app. Although, it is important to understand that if you refresh you page, the $rootScope will be as well refreshed, this is, all of your REST calls will be launched again. (Navigating inside angular views is NOT refreshing the page unless you ask for it using window.reload() or similar; it is just the same page with a new controller)
To avoid this last behavior (page refresh) you could also use local Storage, which is basically a small amount of memory inside your browser where you can save any data that you want to keep regardless of your page refreshes. I used in one of my projects this library: https://github.com/grevory/angular-local-storage
It was useful for saving permanent stuff until user logs out.
Hope it helps! And sorry if I am answering something not useful for you
Cheers
It seems that the only way to effectively load some values from a service prior to the app starting is to make the service-call to and then manually bootstrap the app. The idea of an app-wide "resolve" doesn't seem to exist.