I have 2 js files namely collegeApp.js and branchApp.js. I have two controllers CollegeController.js which is inside collegeApp.js ng-app and BranchController.js which is inside branchApp.js ng-app.
From my html I am redirecting to another page.
Here is my html
<li data-ng-click="getBranchByBranchId(branch.branchId); setBranchId(branch.branchId)">
{{branch.branchName}}
</li>
This html page is in collegeApp.js.After clicking on branch name I am calling method And its controller looks like this.
CollegeController.js
var CollegeController = function($scope, $rootScope, $http, $location, $route,CollegeService,$routeParams) {
$rootScope.pageTitle = $route.current.title;
$scope.getBranchId = function() {
CollegeService.getBranchId().then(function(response) {
$scope.branchId = response.data;
});
}
$scope.setBranchId=function(branchId) {
CollegeService.setBranchId(branchId);
$rootScope.passBranchId = branchId;
window.location.href="./branch?
branchId='+$rootScope.passBranchId";//Here I am redirecting to branch page with id.//
}
}
The branch page is in branchApp.js and above code is in collegeApp.js.
Now in BranchController.js I am trying to catch branchId sent from previous page.
BranchController.js
var BranchController = function($scope, $rootScope, $http, $location, $route,BranchService,$routeParams)
{
$scope.branchId = $rootScope.passBranchId;//Here i am trying to get branchId//
console.log($scope.branchId);//I am getting undefined.
}
I tried $rootScope,$routeParams.But none of them worked.
Is there any possible way that i can pass branchId from collegeApp to branchApp? or am i missing something?
When redirecting your page use $location.path('/branch/' + branchId)
Plus you already have $location in your controller.
Then you'll want to use $routeParams to find the id in your url.
Update route config to find params, should look like this
$routeProvider
...
.when('branch/:branchId', {
templateUrl: 'views/branches.html',
controller: 'BranchController'
})
Then get the value like so
$scope.branchId = $routeParams.branchId;
I realized that you wanted to share information between multiple modules within the same application. Here is a completed code sample to test the scenario.
/**
* Service definition which holds the passed values
*/
angular.module('myapp')
.config('collegeService', collegeService);
collegeService.$inject = [];
function collegeService() {
var branchId = null;
return {
getBranchId: getBranchId,
setBranchId: setBranchId
};
function getBranchId() {
/**
* Implement a promise based approach if the branch ID reads from an external source
* else just return it as given below
*/
return branchId;
}
function setBranchId(brId) {
branchId = brId
}
}
/**
* First controller definition
*/
angular.module('myapp')
.controller('CollegeController', CollegeController);
CollegeController.$inject = ['$scope', 'collegeService'];
function CollegeController($scope, collegeService) {
$scope.getBranchId = function() {
/**
* Use promise based approach as below if the read method returns a promise
*/
collegeService.getBranchId().then(function(response) {
$scope.branchId = response.data;
});
/**
* Uses a simple approach as below if the read method returns the value
*/
// $scope.branchId = collegeService.getBranchId();
};
$scope.setBranchId = function(branchId) {
CollegeService.setBranchId(branchId);
}
}
/**
* Second controller definition
*/
angular.module('myapp')
.controller('BranchController', BranchController);
BranchController.$inject = ['$scope', 'collegeService'];
function BranchController($scope, collegeService) {
$scope.init = function() {
$scope.branchId = collegeService.getBranchId();
};
/**
* Invokes the init method during the Controller getting instantiated
*/
$scope.init();
}
I finally found the solution.I just added this line and it worked.
Inside SchoolController.js
$scope.setBranchId=function(branchId)
{
window.localStorage.setItem("branchId", branchId);
}
And in BranchController.js
$scope.branchId = window.localStorage.getItem("branchId");
Now i am able to use Id anywhere in controller and also i am able to pass Id from collegeApp.js to branchApp.js ng-apps.
Related
I need to execute functions of some controllers when my application ends (e.g. when closing the navigator tab) so I've thought in a service to manage the list of those functions and call them when needed. These functions changes depending on the controllers I have opened.
Here's some code
Controller 1
angular.module('myApp').component('myComponent', {
controller: function ($scope) {
var mc = this;
mc.saveData = function(objectToSave){
...
};
}
});
Controller 2
angular.module('myApp').component('anotherComponent', {
controller: function ($scope) {
var ac = this;
ac.printData = function(objects, priority){
...
};
}
});
How to store those functions (saveData & printData) considering they have different parameters, so when I need it, I can call them (myComponent.saveData & anotherComponent.printData).
The above code is not general controller but the angular1.5+ component with its own controller scope. So the methods saveData and printData can only be accessed in respective component HTML template.
So to utilise the above method anywhere in application, they should be part of some service\factory and that needs to be injected wherever you may required.
You can create service like :
angular.module('FTWApp').service('someService', function() {
this.saveData = function (objectToSave) {
// saveData method code
};
this.printData = function (objects, priority) {
// printData method code
};
});
and inject it wherever you need, like in your component:
controller: function(someService) {
// define method parameter data
someService.saveData(objectToSave);
someService.printData (objects, priority);
}
I managed to make this, creating a service for managing the methods that will be fired.
angular.module('FTWApp').service('myService',function(){
var ac = this;
ac.addMethodForOnClose = addMethodForOnClose;
ac.arrMethods = [];
function addMethodForOnClose(idModule, method){
ac.arrMethods[idModule] = {
id: idModule,
method: method
}
};
function executeMethodsOnClose(){
for(object in ac.arrayMethods){
ac.arrMethods[object].method();
}
});
Then in the controllers, just add the method needed to that array:
myService.addMethodForOnClose(id, vm.methodToLaunchOnClose);
Afterwards, capture the $window.onunload and run myService.executeMethodsOnClose()
I found a very useful tutorial on creating an angular factory that takes parameters. However useful, there's a hiccup.
Below, the factory creates an instance of a function-object/constructor. The author of the tutorial does not explain where the this "Inventory" constructor should be placed.
Would the "Inventory" constructor go into a separate file, say as an module/IFFE?
/* WHERE DOES THIS INVENTORY OBJECT GO?? */
function Inventory($http, url, project_id) {
/** The public method for getting the project price **/
this.price = function(callback) {
$http.get(url+"?project="+project_id)
.success(function(value) {
callback(value);
});
};
};
angular.factory('InventoryFactory',[
'$http',
/** This is the factory method that Angular will execute only ONCE **/
function InventoryFactory($http) {
/** This is the function that will be injected into the directive, and called multiple times by the programmer **/
return function(url, product_id) {
/** this is the new object that will be created and used by the programmer **/
return new Inventory($http, url, product_id);
};
}]);
angular.directive('inventoryStatus',['InventoryFactory',function(InventoryFactory) {
return {
link: function($scope,$el,$attr) {
var inventory = InventoryFactory('/api/projects',$scope.project_id);
inventory.price(function(value){
$scope.price = value;
});
}
}
}]);
Thanks in advance!
I have a 'messages' factory that will query my database for a list of messages.
I'm using the list of messages in two different places. Once to add a message count indicator, and then once to show a list of messages. Since I'm injecting the service into two different controllers, it seems like it's creating two instances of my factory, and hitting the database twice for the list.
How would I set things up to only ask for the list once, and use the list for both display and count purposes in both controllers?
My factory looks like this:
myApp.factory('messagesService', [
'$rootScope',
function($rootScope) {
var messages = [];
function query() {
// Would actually hit the database asyncronously
messages = ['one', 'two', 'three', 'four'];
console.log('query');
$rootScope.$emit('messages.update');
}
function all() {
return messages;
}
return {
query: query,
all: all
}
}
]);
My controllers are using blocks like this to watch for changes:
$rootScope.$on('messages.update', function() {
$scope.messagesCount = messagesService.all().length;
});
But it means i need a messagesService.query(); in each controller for things to be reliable.
So here are a few jsFiddle examples of it as I have things now:
Doesn't work (only updates the header): http://jsfiddle.net/TSLfc/1/
Works but would break if I didn't load the dashboard controller:
http://jsfiddle.net/TSLfc/2/
Works every time, but queries the server twice:
http://jsfiddle.net/TSLfc/3/
Is there a better way to organize my code? Should I build out the messages factory into it's own full module?
Here (Plunkr) is how I would do it:
I have gone back and modified my previous answer, updating with what we discussed in the comments below as well as using promises instead of the timeout as an asynchronous simulation I was showing before (see revision history for reference).
I also removed every variable/function that didn't need to be returned to the controller from the service object, if it doesn't need to be accessed via the controller than it doesn't need to be included on the returned object.
var myApp = angular.module('myApp', []);
myApp.factory('messagesService', [
'$q',
'$rootScope',
'$http',
function ($q, $rootScope, $http) {
var mService = {};
mService.messages = [];
var queryInit = false;
// We don't need to access this function in the controller
// So I am not going to attach to the returned object
var getMessages = function () {
// Stops each controller from getting messages when loaded
if (!queryInit) {
queryInit = true;
// Using the $q promise library we use 'then()' to handle
// What happens after the async call is returned
// The first function parameter is the success/resolve callback
// The second function parameter is the error/reject callback
mService.query().then(function (successResults) {
// Tell all of the controllers that the data has changed
$rootScope.$broadcast('messages.update');
}, function (errorResults) {
console.error(errorResults);
});
}
};
// Used to force an update from the controller if needed.
mService.query = function () {
var deferred = $q.defer();
$http.get('path/to/file.php')
.success(function (data, status, headers, config) {
// assign the returned values appropriately
mService.messages = data;
// this callback will be called asynchronously
// when the response is available
deferred.resolve(data);
})
.error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
deferred.reject(data);
});
return deferred.promise;
};
mService.getCount = function () {
return mService.messages.length;
};
mService.all = function () {
return mService.messages;
};
// Initialize the messages
// so we don't need to get the messages in each controller
getMessages();
return mService;
}]);
In your html, on your first controller setup an init function (ng-init="init()") that instantiates the factory:
<div ng-app="myApp">
<div ng-controller="HeaderCtrl" class="header" ng-init="init()">
Messages Count: {{ messageCount }}
</div>
<div ng-controller="DashboardCtrl" class="dashboard">
<ul ng-repeat="message in messages">
<li>{{ message }}</li>
</ul>
<button ng-click="getMessages()">Check for new messages.</button>
</div>
</div>
And in your controllers you just have the $rootScope.$on('messages.update' fn) and you can call manually by calling the services query() function which returns the promise:
myApp.controller('HeaderCtrl', [
'$scope',
'$rootScope',
'messagesService',
function ($scope, $rootScope, messagesService) {
$rootScope.$on('messages.update', function () {
$scope.messageCount = messagesService.getCount();
});
// Manual call, if needed
$scope.getMessageCount = function () {
messagesService.query().then(function (successCallback) {
$scope.messageCount = messagesService.getCount();
});
};
}]);
myApp.controller('DashboardCtrl', [
'$scope',
'$rootScope',
'messagesService',
function ($scope, $rootScope, messagesService) {
$rootScope.$on('messages.update', function () {
$scope.messages = messagesService.all();
});
// Manual call, if needed
$scope.getMessages = function () {
messagesService.query().then(function (successCallback) {
$scope.messages = messagesService.all();
$rootScope.$broadcast('messages.update');
});
}
}]);
You can set cache:true on a $http request. There are numerous ways to data bind within angular without needing to use the $broadcast approach you are using. Also note, $broadcast from a scope will be receievd by all descendent scopes, so no need to inject $rootSCope just for that purpose, can listen on $scope.
Here's one approach that controllers use promise of $http to retrieve data. I used a button click to retrive data for DashControl so can see that request does get cached
myApp.factory('messagesService',function($http) {
return{
query:function query(callback) {
/* return promise of the request*/
return $http.get('messages.json',{ cache:true}).then(function(res){
/* resolve what data to return, can set additional properties of the service here if desired*/
return res.data
}).then(callback);
}
}
});
myApp.controller('HeaderCtrl',function($scope, messagesService) {
messagesService.query(function(messages){
$scope.messagesCount = messages.length;
});
});
myApp.controller('DashboardCtrl', function($scope, messagesService) {
/* use button click to load same data, note in console no http request made*/
$scope.getMessages=function(){
messagesService.query(function(messages){
$scope.messages = messages;
})
}
});
Essentially in this scenario, whatever controller calls the factory service first will generate the data cache
DEMO
I would do it like that:
myApp.factory('messagesService', function() {
var expose = {
messages: []
};
expose.query = function () {
// Would actually hit the database asyncronously
expose.messages = ['one', 'two', 'three', 'four'];
console.log('query');
};
// Initialization
expose.query();
return expose;
}
);
And in your controllers:
$scope.messagesCount = messagesService.messages.length;
Model with broadcasting and pre-hitting database looks heavy for me.
So here is code, that can be embedded in service:
var sv = this;
var deferred = sv.$q.defer();
if (sv._running) {
return sv._running;
}
sv._running = deferred;
It based on reusing promise. To make it query database once - just don't set sv._running to false and it will always return first obtained result.
Plunkr
I have this service I inject in my controllers. It is simply a service to share some properties.
angular.module('app', []).
service('sharedProperties', function () {
var list_name = '';
return {
getListName: function() {
return list_name;
},
setListName: function(name) {
list_name = name;
}
};
});
I have two controllers. In the first one, I set the value of list_name. In my second, I want to retried this information.
Here is how are defined my controllers :
function ListCtrl($scope, $http, sharedProperties) {
...
$scope.changeListName = function(list_name) {
sharedProperties.setListName(list_name);
console.log(list_name, sharedProperties.getListName()); # shows ( 'metro', 'metro') == metro being a dummy list_name
...
};
function ItemCtrl($scope, $http, sharedProperties) {
...
$scope.showOnlyList = sharedProperties.getListName();
console.log(this.sharedProperties.getListName()); # empty string
...
};
I logged the variable and checked them in the browser console and noticed that ListCtrl sets the shared Property properly. The issue comes from the ItemCtrl controller. It seems that when I try to access the list_name with sharedProperties.getListName();, the property is empty, or the function returns an empty string.
UPDATE
I thought the problem came from the service. So I decided to use Lungojs' data library.
I got the following code :
In ListCtrl :
$scope.changeListName = function(list_name) {
Lungo.Data.Cache.set("ListName", list_name);
console.log('LIST', Lungo.Data.Cache.get("ListName"));
};
In ItemCtrl :
$scope.showOnlyList = Lungo.Data.Cache.get("ListName");
console.log('ITEM', Lungo.Data.Cache.get("ListName"));
The log in ListCtrl shows that the cache is set to the correct list_name. However, the console for ItemCtrl shows that Lungo.Data.Cache.get("ListName") is undefined even if it was correct on the ListCtrl!
I also tried replacing the cache by HTML5 local storage without success...
Well, I think its because you instantly log your sharedListPropery to the console, right after instantiating your ItemCtrl.
When it is instantiated, sharedPropertyList has no value yet.
EDIT:
Sry, JSFiddle is currently not working, so I have to put this untested code here.
But it should give you an idea
angular.module('app', []).
service('sharedProperties', function () {
var list_name = '';
return {
getListName: function() {
return list_name;
},
setListName: function(name) {
list_name = name;
}
};
}).
controller('ListCtrl',['$scope','sharedProperties',function(scope,shared){
console.log(shared.getListName()); //empty, because nothing set yet.
scope.listname = shared.getListName();
//watching the change and updating the shared
scope.$watch('listname',function(value){
console.log('listname is now '+value);
shared.setListName(value);
})
//watching the shared directly
scope.shared=shared;
scope.$watch('shared.getListName()',function(value){
console.log("sharedProperty has changed to"+value);
})
}]);
When I load a view, I'd like to run some initialization code in its associated controller.
To do so, I've used the ng-init directive on the main element of my view:
<div ng-init="init()">
blah
</div>
and in the controller:
$scope.init = function () {
if ($routeParams.Id) {
//get an existing object
});
} else {
//create a new object
}
$scope.isSaving = false;
}
First question: is this the right way to do it?
Next thing, I have a problem with the sequence of events taking place. In the view I have a 'save' button, which uses the ng-disabled directive as such:
<button ng-click="save()" ng-disabled="isClean()">Save</button>
the isClean() function is defined in the controller:
$scope.isClean = function () {
return $scope.hasChanges() && !$scope.isSaving;
}
As you can see, it uses the $scope.isSaving flag, which was initialized in the init() function.
PROBLEM: when the view is loaded, the isClean function is called before the init() function, hence the flag isSaving is undefined. What can I do to prevent that?
When your view loads, so does its associated controller. Instead of using ng-init, simply call your init() method in your controller:
$scope.init = function () {
if ($routeParams.Id) {
//get an existing object
} else {
//create a new object
}
$scope.isSaving = false;
}
...
$scope.init();
Since your controller runs before ng-init, this also solves your second issue.
Fiddle
As John David Five mentioned, you might not want to attach this to $scope in order to make this method private.
var init = function () {
// do something
}
...
init();
See jsFiddle
If you want to wait for certain data to be preset, either move that data request to a resolve or add a watcher to that collection or object and call your init method when your data meets your init criteria. I usually remove the watcher once my data requirements are met so the init function doesnt randomly re-run if the data your watching changes and meets your criteria to run your init method.
var init = function () {
// do something
}
...
var unwatch = scope.$watch('myCollecitonOrObject', function(newVal, oldVal){
if( newVal && newVal.length > 0) {
unwatch();
init();
}
});
Since AngularJS 1.5 we should use $onInit which is available on any AngularJS component. Taken from the component lifecycle documentation since v1.5 its the preferred way:
$onInit() - Called on each controller after all the controllers on an
element have been constructed and had their bindings initialized (and
before the pre & post linking functions for the directives on this
element). This is a good place to put initialization code for your
controller.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
//default state
$scope.name = '';
//all your init controller goodness in here
this.$onInit = function () {
$scope.name = 'Superhero';
}
});
Fiddle Demo
An advanced example of using component lifecycle:
The component lifecycle gives us the ability to handle component stuff in a good way. It allows us to create events for e.g. "init", "change" or "destroy" of an component. In that way we are able to manage stuff which is depending on the lifecycle of an component. This little example shows to register & unregister an $rootScope event listener $on. By knowing, that an event $on bound on $rootScope will not be unbound when the controller loses its reference in the view or getting destroyed we need to destroy a $rootScope.$on listener manually.
A good place to put that stuff is $onDestroy lifecycle function of an component:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope, $rootScope) {
var registerScope = null;
this.$onInit = function () {
//register rootScope event
registerScope = $rootScope.$on('someEvent', function(event) {
console.log("fired");
});
}
this.$onDestroy = function () {
//unregister rootScope event by calling the return function
registerScope();
}
});
Fiddle demo
Or you can just initialize inline in the controller. If you use an init function internal to the controller, it doesn't need to be defined in the scope. In fact, it can be self executing:
function MyCtrl($scope) {
$scope.isSaving = false;
(function() { // init
if (true) { // $routeParams.Id) {
//get an existing object
} else {
//create a new object
}
})()
$scope.isClean = function () {
return $scope.hasChanges() && !$scope.isSaving;
}
$scope.hasChanges = function() { return false }
}
I use the following template in my projects:
angular.module("AppName.moduleName", [])
/**
* #ngdoc controller
* #name AppName.moduleName:ControllerNameController
* #description Describe what the controller is responsible for.
**/
.controller("ControllerNameController", function (dependencies) {
/* type */ $scope.modelName = null;
/* type */ $scope.modelName.modelProperty1 = null;
/* type */ $scope.modelName.modelPropertyX = null;
/* type */ var privateVariable1 = null;
/* type */ var privateVariableX = null;
(function init() {
// load data, init scope, etc.
})();
$scope.modelName.publicFunction1 = function () /* -> type */ {
// ...
};
$scope.modelName.publicFunctionX = function () /* -> type */ {
// ...
};
function privateFunction1() /* -> type */ {
// ...
}
function privateFunctionX() /* -> type */ {
// ...
}
});