I am working in Angular.js (Angular 1) website - http://keraiz.com/.
I make a main controller for all common thing like login, cart. but when I login or add something to cart it does not show until I reload complete page. If I use $state.reload() then, the controller for page is reload but how I reload my main controller.
You should use $rootScope for user and cart since they should be accessible application wide or a service/factory is to be used.
Also you are using $rootScope and $scope for the same variables like
$rootScope.cartProducts=response.data.response;
$rootScope.totalItem = $scope.cartProducts.length;
totalItem is also in the scope, so updating that would not update the $rootScope value, so overall the whole code should be uniform for the scope and the rootScope to be correctly updated, and that have to be done by you.
Try this link for understanding scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes
NOTE :: Your code is accessible on the internet, so use gulp or grunt etc for maintaining production version code (concat,uglify etc).
Related
I have an Angular js factory. In which I am storing the user information after successful login. Now I have multiple controllers in all of them I need this user information so I need to inject this factory to each and every controller. Is there any way to access this factory data throughout the project without injecting in each and every controller?
Can we directly inject it into the module?
Some suggestions :
storing the user information in factory is not a good approach because if user reload the page it will reset the factory data and user will not exist anymore.
As sajeetharan suggested, you can use HTML5 localStorage or sessionStorage to store the user information. So, that without injecting you can easily access stored storage value everywhere you want.
Yes, if you need the user information so you need to inject the factory to each and every controller because on switching from one controller to another controller you have to fetch the data from the factory.If you inject the factory only in the main module it will not load the factory when you move from success login to some other page.
User information can be stored in local storage or cookie so that i can be accessed anywhere.
You can also consider using $rootScope, in that case also you need to inject in all the modules which you require.
a factory is part of a module.
Injecting it into the controllers needed is the way of using the saved values throughout the module.
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.
In an AngularJS Single Page Application, if you are in the main page and now you route to the second page, and use the "service" (as a global), and use myService.cityName to pull data using AJAX (by using $resource), that's fine.
But what if on your page header, you also have an input text box, and you can type in a city name, and when the user press Enter, you are routing to the same page (the second page). So I think browser didn't do anything because it is the exact same URL. How would you solve this issue or what is the AngularJS's way of handling this?
(Update: it is not to refresh or reload a page... it is about, say, you get weather data for a city, and you are on the forecast subpage, with a path of #/forecast. Now at the top search box on the page, you enter a different city and click "Submit" to go to the same path #/forecast then nothing will happen)
Update2: essentially, in my controller code:
$scope.submit = function() {
$location.path("/dataPage");
}
and my form is <form ng-submit="submit()">.
so if I am already on the dataPage, then now browser wants to go to dataPage to show new data, but since the path and hash is exactly the same, the browser just will not do anything. (I suppose due to no hashchange event happened, so nobody will notify AngularJS to do anything)
Your question is unclear, if you want a page refresh like F5, one solution is at "Solution for refresh page". But if you just want to reload things, you could follow "Solution for reload page".
Solution for refresh page:
To update a page, all that you need to update the model data of controller and the page will be updated accordingly. Ideally, you should never refresh an entire page in AngualrJS . If you need to do so, you are not using AngularJS correctly .
The $location service does not provide access to refreshing the entire page. If you need to refresh the entire page, you need to use the $window.location object.
$window.location.href = "YOURPAGEPATH";
Solution for reload page:
just want to reload things under ng-view, re-initialized the current route controller, you could do like below.
$route.reload("YOURPATH");
$route.reload() will reinitialise the controllers but not the
services.
If you want to reset the whole state of your application you can use:
$window.location.reload();
This is a standard DOM method which you can access injecting the $window service
Also see: $route documentation
According to $route documentation:
Causes $route service to reload the current route even if $location
hasn't changed. As a result of that, ngView creates new scope,
reinstantiates the controller.
Well you can just save data from request on your global service. And in controller you can bind that data, so if you press submit from header that function should just refresh your data in service.
I trying to add angular widgets into an existing non-angular app. The problem is that these widgets are not added by Angular, and are mostly injected into the DOM by a non-angular script.
The first thing I thought was to use angular.bootstrap for every widget. But the issue with that approach is that I cannot share services between widgets. So, instead of doing that, I want to bootstrap the Angular app once, and load the controllers manually for each widget.
Here is a sandbox jsbin where I've been trying stuff without success
I'm trying to make app1 manually and app2 automatically, while sharing the sharedThing service.
Well, I found my answer.
I don't know if I had solved it before, but I had to make a call to $apply after recompiling the element to see the changes without manually modifying the input. Also, I discovered that I can initialize the angular app with an element outside the DOM and I can compile elements outside the root element! That is perfect for what I'm trying to achieve.
Anyway, here is the jsBin with the code working.
In the app config
app.config(function($controllerProvider) {
app.register =
{
controller: $controllerProvider.register
};
}
then after you declare controller function
app.register.controller('CtrlName',CntrlFn]);
Dan had wrote a great article about it. http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx
Is there a way to refresh a controller from another controller?
For example, Controller1 runs then Controller2 runs. At the end of Controller2 there is a
"command" to re-run Controller1. Is this possible?
In my post I had made earlier it seems like my questions was unclear what I was trying to do. Here is a link to it.
Updating a controller from another controller Angular
if you are using ngRoute there is a method to re-run the all the controller without having to reload the page.
app.controller('MyCtrl', function($route){
$route.reload()
})
If you want to refresh data, please use services and refresh data in the services. Sequential things can be done of ajax by using promises. Please let me know if you need any help in designing the solution
I think you need to look into using directives. By using directives you can encapsulate and share scope objects.
Please read the documentation on directives and "shared scope".
http://docs.angularjs.org/guide/directive