As per my understanding services in angularjs are "Singleton". Following is my Scenario where I am using angularjs with Asp.net MVC application.
I have created angularjs service and I use it in one of my controller, which is used on one of the HTML view. If I navigate from that page to some other page, Which results in call to Server then in that case my angularjs Service gets reset. Later, When I come back to the same page my service again gets created/initialized. Can someone please explain me the reason?
Most likely you use ngRoute or angular-ui routing for making single page app, when you change pages controller gets reloaded, which forces all the logic in controller to run again hence call your service, If you are on the view which use other controller its expected not to run service from first one. Some code would be nice too.
hope this helps.
Related
I have an AngularJS application, which I'm in the process of converting to a hybrid Angular/AngularJS application using ngUpgrade. The AngularJS application is unusual in that it doesn't use the AngularJS or Angular UI router - instead it has its own hand-rolled navigation solution, which doesn't update the URL displayed in the browser, or interact with the browser's history API. So far, so good.
I want to start using the Angular Router in the hybrid application, but initially only for new pages.
To get the 2 parts of the application - Angular and AngularJS - interoperating with each other, I have downgraded the Angular Router service and injected it into one of my AngularJS services, so that I can call Router.navigateByUrl() to navigate to a new Angular page component, from my AngularJS code.
This works correctly - the Angular page component is added to my <router-outlet> and is displayed in the browser as expected.
Strangely though, the browser URL does not change. When I enable tracing for the Router, I can see the new route being correctly processed, and the new page is displayed in the browser, but the browser URL still shows the old route. Also, if I look at the browser history, the new route has not been added to it.
I've tried injecting NgZone into my AngularJS service and calling Router.navigateByUrl() inside NgZone.run(), but it doesn't make any difference.
When I call Router.navigateByUrl() from my Angular code, everything works fine - except when I do this after I've done it from AngularJS, when I then see the same symptoms. It's as if calling the Router directly from AngularJS is somehow breaking the link between the route and the browser URL bar.
Can anyone help please...?
So the issue was that the AngularJS $location service wasn't being updated when the route changed, leaving a disparity between its value and the value being displayed in the browser. There was also a watch in this service which was being triggered in every digest cycle, that was then resetting the browser url from the value in the $location service!
Turns out this was because I needed to configure the Unified Angular Location Service in my AppModule viz:
imports: [
LocationUpgradeModule.config()
]
and downgrade the $locationShim service for injection into AngularJS viz:
angularJS.module('my-app')
.factory('$location', downgradeInjectable($locationShim));
I'm writing a single-page application in AngularJS that needs to know, whether user is logged-in before running any routes at all.
I'm using Django backend, which supports anonymous sessions, so just looking at cookies I can't figure, if user is logged-in or anonymous. So, to find that out I want to make an Ajax request to backend in Angular application-global .run() and delay any execution of angular application until that request finishes.
How do I do that?
Create a directive that you can put on each view. Our project has a base view using razor so it makes it easier. Let the directive wait for the promise and only make the content visible when it is resolved.
For page navigation in asp.net MVC application with Angular.js, shall we use only angular.js routing or go to server for new page using asp.net MVC controller.
It depends on how you have designed the application architecture and communication.
Primarily, if you are using the ViewResult result type from the Action methods then you will have to use the MVC routes.
Understand that angularjs $routeProvider enables client side routing only and is not the same as MVC (server side) routes.
You use the $location object to capture the URL changes to the address bar and the request is captured by the angular route (before it gets a chance to fire towards the server) and the configured template and controller are served.
Hope you understand that you then would (generally) use the $http service to fire asynchronous calls to the respective actions on the server that WILL make use of the MVC defined routes too.
Logically, group related sections of your application using template-type routing on the angular side and more generalized routes on the server side.
Check out the mechanics in another post here.
Hence, like I said, it really depends on your design.
I personally like to just use MVC to serve the default AngularJS files and then let Angular's routing handle the navigation within the application.
I have an multipage application in which i am using angular js, i have my angular controller which is simple and uses the logic which is placed under my angular factory js.
The example i have is that on the first page i have inputs which caters my search parameters on click of search button the results are shown on my second page, first time it works fine.
Now i navigate back to my first search page via browser back button and modify the search parameters on click of search button now i am not able to view the search results or rather the new parameters which i have passed are not getting refreshed.
In short when i am redirecting using angular js, the parameters in the angular factory are not set or rather the values are not refreshed after the second redirect.
How can i refresh the values every time i redirect to some other page using angular factory.
The issue got resolved.
used factory for sharing the values between controllers and services for getting values from server side.
the issue i had is that i had not created my factory properly.
I'm implementing something where the view changes based on the selected value of a select dropdown. I'm doing this using ng-include="mySelectedValue", which is attached to <select ng-model="mySelectedValue" ng-options="..."></select> tags.
Just wondering what happens under the hood, because this is essentially a SPA with no routes that is being loaded inside one of my Rails apps.
When the app gets loaded, does it just load all the views in the browser somehow? I don't get how angular works so magically. Would love to know how views are popping up when there are no server calls.
I assume mySelectedValue is a src.
According to Angular Docs:
By default, the template URL is restricted to the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on it.
$sce.getTrustedResourceUrl is basically an ajax request to fetch the corresponding template. So your server call is here :)
After that, there goes the $compile for the template, and renders the view.