In my application , there is a need to check for the authentication of the user which we usually store in the cookies (whether user is logged in or not). So, whenever a user hit a page (by navigating the url directly in address bar), we need to check first whether the cookie value is present or not. For that, we need to access one of our service which reads value from the cookie. But, where and how exactly I can inject my own services during bootstrap application.
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
//Where to inject the dependencies of my own services here??
});
Have you tried using the injector directly?
angular.element(document).ready(function () {
var yourServie = angular.injector(["app"]).get('yourService');
// Do something here with your service before bootstrapping
angular.bootstrap(document, ["app"]);
//Where to inject the dependencies of my own services here??
});
I don't have my code base in front of me but we do this with $http to make a request to the server to get configuration before we bootstrap.
Related
I'm using IonicFramework to create a mobile app and I want to set the back button text to "Back", but since my app is in several languages I'm using the $translate service to translate the "Back" string to the proper language
This crashes the app since services aren't allowed to be injected in the app.config block.
Any ideas how to solve it? Here is my code:
app.config(function($ionicConfigProvider, $translate) {
$translate('label_back').then(function(translation){
$ionicConfigProvider.backButton.text(translation);
});
});
I need to perform a $http request before any of my application loads up, so no UI, controllers, services, etc.
The purpose of the request is to check if the user has a valid session on the server based on the presence of a named cookie in the header.
So using a promise I can process the response and if not a valid session, or none exists, then redirect the user to my login page.
So my question, is where should the initial session check request live, my initial thoughts are to use the run block when setting up the application module.
Does this make sense or should I take a different approach?
The problem when doing this in the run config, you cannot put the intialisation of your application on hold. This means, that the first page will get loaded and the dependencies (controllers, services) will get initialized. If you want to do this check before everything gets initialized you will have to do the request before angular bootstraps.
You can bootstrap Angular manually if you remove the ng-app from your html element and load at the end of your index.html a script with:
angular.bootstrap(document, ["myAppModule"]);
You can also make a $http request before you bootstrap angular. In your case this will look something like this:
var initInjector = angular.injector(["ng"]);
var $http = initInjector.get("$http");
return $http.get("config.json").then(function (response) {
//this is to load the config to a constant
angular.module("myAppModule").constant("config", response.data);
angular.bootstrap(document, ["myAppModule"]);
}, function (errorResponse) {
console.error("config not found!");
});
I would like to attach a function that gets executed whenever Angular is making an $http request. What I'm trying to do is essentially show a loading spinner whenever any Ajax Requests are being made by any App. In jQuery I have done this in the past by:
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
});
Any insight into how I can attach a function that shows and hides a loading div whenever any controller throughout the application performs an Ajax Request?
Maybe there is a better way (directives?)
Thanks!
Alessandro Ferrucci
the only thing that monitors all traffic in the app are the httpInterceptors youll have to write an inteceptor as a service that shows your div, when a request is detected and hides it when a response is detected.
interceptor are creaeted as services and passed to the $HttpProvider at config time.
you can read about it here
https://docs.angularjs.org/api/ng/service/$http
I'm working on e2e tests for a web app and I would like to log in a user and persist their session.
Specifically the following scenario:
The log in form is posted with valid credentials.
Angular routes the user to a landing page.
I call browser.get( /* the current url */ )
I expect the current URL to be the same, instead of my user getting kicked back to the log in screen.
We're using HTTP header based auth and I don't know how to configure this scenario for testing purposes.
Is it as simple as activating cookies somewhere? Or maybe supporting the auth headers via a config?
I managed to solve this be simply adding browser.sleep(1000) in before calling browser.get( /* the current url */ ).
Basically Protractor was hammering on the router to fast and my app was kicking me out before auth creds were set. Or, perhaps, might be the HTML5 routing takes a little time to process (our deep links are hashed, but then angular converts the hash to HTML5 routes).
You can use browser.waitForAngular(); too.
You can use promises like this
goAfterLogin: function(){
browser.get('http://www.example.com').then(function(){
return this; //or other return
}).then(function(){
return this;
});
}
Its up to you how will you use it (you as well can create promis with waitForAngular() )
I'm using Oauth to manage session users in my AngularJS app. My Angular app needs to know information about the session user because it is used in my $resource objects(to make REST calls like GET /user/:user/projects). I want this user variable to be global and synchronous, so making an async call with $resource or $http to get the user adds boilerplate to the code that needs this session user(because it has to wait for the user information to return from server).
Right now I'm using this dirty hack that resolves the issue: in my index.ejs file(notice that the user is rendered server side with ejs)
<script type="text/javascript">
var session_user = <%- user %>;
</script>
and then I do
$rootScope.user = session_user
The problem is that when I unit test the controller, of course session_user is not defined.
I'm thinking that maybe I could create a service that returns this session_user variable, so I can use a mock for testing. Any other ideas? What is the recommended aproach to this kind of problems?
It doesn't seem like that much of dirty hack actually. It would seem problematic only if the session user would change without reloading your html from the server (and thereby getting a new session user).
Angular modules have a constant function that I use for this sort of thing:
angular.module("MyModule", [])
.constant("User", window.session_user);
And then you can treat User as a injectable value in your controllers.