I'm learning angular and have a sample login code. This code has a constructor that clears out the credentials when called. My question is: when is the constructor called? Is it once when the code is initialized or every time a method on the controller is called? I might be confusing this with the way my backend dev framework works with DI which runs the constructor for my controllers only once when initialized.
As a followup question, do I need a logout function or will the constructor be good enough?
This is the code I'm looking at currently:
(function () {
'use strict';
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$rootScope', '$location', 'AuthenticationService', 'FlashService'];
function LoginController($rootScope, $location, AuthenticationService, FlashService) {
var vm = this;
vm.login = login;
(function initController() {
// reset login status
AuthenticationService.ClearCredentials();
})();
function login() {
vm.dataLoading = true;
var promise = AuthenticationService.Login(vm.username, vm.password)
.then(function(userInfo){
AuthenticationService.SetCredentials(userInfo);
$location.path('/');
}, function(failedReason) {
FlashService.Error(failedReason);
vm.dataLoading = false;
});
};
function logout() {
AuthenticationService.ClearCredentials();
$location.path('/login');
};
}
})();
This code is based off of Jason Watmore's blog - http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx.
I have read through the docs here once: https://docs.angularjs.org/guide/controller
It gets called every time a view or directive to which it is attached gets displayed.
The controller will be called when and ng-controller is found in html document or when a view is changed.
And when a controller is called all functions side it will be initialized but not called.So you may have to call the log out function to logout user.but re rendering the view will logout the user Which I don't think is the case here.(I am assuming it is a single view template)
Here the snippet from angular documentation.. Go through it again.
""In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.
When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.
If the controller has been attached using the controller as syntax then the controller instance will be assigned to a property on the new scope.""
Related
for example, app.controller is my main controller.
app.controller('appController', ['$scope','$ionicNavBarDelegate', function ($scope,$ionicNavBarDelegate) {
}]);
and my second controller is :
app.controller('loginPage', ['$scope','$ionicNavBarDelegate', function ($scope,$ionicNavBarDelegate) {
}]);
Can i pass $scope in the main controller and have it be passed along to the loginPage controller without typing it out again in the loginPage controller?
Yes you can pass data from one controller to other using
$rootScope
For
app.controller('loginPage', ['$rootScope','$scope','$ionicNavBarDelegate', function ($rootScope,$scope,$ionicNavBarDelegate) {
$rootScope.Items = "rootscope varibale";
}]);
app.controller('appController', ['$rootScope','$scope','$ionicNavBarDelegate', function ($rootScope,$scope,$ionicNavBarDelegate) {
console.log($rootScope.Items);
}]);
You can use $rootScope instead of $scope.
I am new in angular js. I am working with web Sql in a test project for learning purpose. My insert operation is working fine. My problem is when i fetch all the records then i can't store it in $scope.todos=results.rows
My code is
tx.transaction(sql,[],myCallback)
function myCallback(tx,results)
{
console.log(results.rows); // shows objects in console
$scope.todos=results.rows;
}
In view the todos is not working with ng-repeat.
It might help to show all of your controller, or service. If it's a controller make sure you included the $scope parameter for example:
.controller('MyController', function ($scope){
}))
If you are doing this inside a service, save it in a variable inside the service, then from a controller where the "$scope" is available include your service then call your variable containing the results. This will also be helpful if you need to share those results with other controllers at a later time.
.service('MyDataService',function(){
var todos;
return {
.... set and get functions to access variable ...
getTodos: function() {
return todos;
}
};
});
And in controller
.controller('MyController', function ($scope, MyDataService){
$scope.todos = MyDataService.getTodos()
}))
There are also ways to get the $scope working in a service but I don't think it's a great idea.
I got problem, I'm trying to get controller instance in my service:
myAppModule.service('modalService',
function ($modal, $controller) {
var controller = $controller('ExperienceDetailsModalCtrl');
});
but I've got error:
TypeError: Cannot read property '$scope' of undefined
Is it possible to access controller (defined in another file) and pass it to modal?
My controller:
myAppIndexModule
.controller('ExperienceDetailsModalCtrl', function ($scope) {
});
You can't access controller scope in service, factory or provider. The data which you wanted to share should be placed inside a service. & make it available to other controller.
I think you do want to pass controller scope to $modal then you can achieve this by doing from controller itself.
$modal.open({$scope: $controller('ExperienceDetailsModalCtrl', {$scope: $scope}), templateUrl: 'abc.html'})
Update
You could do it like below
myAppModule.service('modalService',
function ($modal, $controller, $rootScope) {
var scope = $rootScope.$new(true);
$controller('ExperienceDetailsModalCtrl',{scope: $scope });
//in scope now you will have ExperienceDetailsModalCtrl scope
});
I´m trying to code a CRUD app with Angular.JS, and I need your help to move on.
This is the scenario:
View 1 (index) gets JSONP data from a remote API and stores it.
View 2 (master) shows data filtered on a grid
View 3 (detail) shows an specific item selected on View 2
I did it already, but requesting the very same JSON object on each view, , but I think one only api call is enough.
I can´t figure out how to properly share this JSON object for all the controllers. I tried several tutorials on ngResource, $http, factories and services but still have not a clear path to go through.
How can I do this?
Any snippet or code sample you may share will be very useful to keep on tryin this thing...
Thanks in advance,
Ariel
You can implement a base controller to store common functionality that's shared between the controllers. I wrote a blog post about it recently, here's the code snippet showing how it works:
'use strict';
angular.module('Diary')
// base controller containing common functions for add/edit controllers
.controller('Diary.BaseAddEditController',
['$scope', 'DiaryService',
function ($scope, DiaryService) {
$scope.diaryEntry = {};
$scope.saveDiaryEntry = function () {
DiaryService.SaveDiaryEntry($scope.diaryEntry);
};
// add any other shared functionality here.
}])
.controller('Diary.AddDiaryController',
['$scope', '$controller',
function ($scope, $controller) {
// instantiate base controller
$controller('Diary.BaseAddEditController', { $scope: $scope });
}])
.controller('Diary.EditDiaryController',
['$scope', '$routeParams', 'DiaryService', '$controller',
function ($scope, $routeParams, DiaryService, $controller) {
// instantiate base controller
$controller('Diary.BaseAddEditController', { $scope: $scope });
DiaryService.GetDiaryEntry($routeParams.id).success(function (data) {
$scope.diaryEntry = data;
});
}]);
Using services to cache and share the data across controllers would be the way to go. Since services in angular are singleton, the same copy of data can be shared. A service such as
angular.module('myApp').factory('dataService', function($q, $resource) {
var items=[];
var service={};
service.getItems=function() {
var itemsDefer=$q.defer();
if(items.length >0)
itemsDefer.resolve(data);
else
{
$resource(url).query({},function(data) {
items=data;
itemsDefer.resolve(data)
});
}
return itemsDefer.promise;
}
return service;
});
Now in the controller you can inject the dataService and call the getItems method. This method returns a promise, which is either resolved using the cached data or by making remote request.
And the controller code would look something like
angular.module('myApp').controller('MyCtrl', function($scope,dataService) {
dataService.getItems().then(function(items) {
$scope.items=items;
}
});
What is correct way of passing variables from web page when initializing $scope?
I currently know 2 possibilities:
ng-init, which looks awful and not recommended (?)
using AJAX request for resource, which requires additional request to server which I do not want.
Is there any other way?
If those variables are able to be injected through ng-init, I'm assuming you have them declared in Javascript.
So you should create a service (constant) to share these variables:
var variablesFromWebPage = ...;
app.constant('initValues', variablesFromWebPage);
With this service, you don't need to add them to the scope in the app start, you can use it from any controller you have, just by injecting it (function MyCtrl(initValues) {}).
Althouhg, if you do require it to be in the scope, then this is one of the main reasons what controllers are meant for, as per the docs:
Use controllers to:
Set up the initial state of a scope object.
Add behavior to the scope object.
Just add this cotroller to your root node:
app.controller('InitCtrl', function($rootScope, initValues) {
$rootScope.variable1 = initValue.someVariable;
$rootScope.variable2 = initValue.anotherVariable;
});
#Cunha: Tnx.
Here some more details how I did it:
In the Webpage:
<script type="text/javascript">
var variablesFromWebPage = {};
variablesFromWebPage.phoneNumber = '#Model.PhoneNumber';
</script>
In the angular application file, registering the service:
var module= angular.module('mymodule', ['ngRoute', 'ngAnimate']);
module.factory('variablesFromWebPage', function () {
return variablesFromWebPage
});
And then the controller:
module.controller('IndexController',
function ($scope, $location, $http, $interval, variablesFromWebPage) {
$scope.phoneNumber = variablesFromWebPage.phoneNumber;
}
);