I am working on complex application and every controller has more than 2000 lines.
Can anyone suggest to break the codes into small controllers and used as a dependency on main controller.
Use multiple controller to handle the task in your page.If you are using long controller you can split the definition to multiple files by passing the scope to another method and then define the rest of methods there.
In the first file:
app.controller('CtrlA', function($scope){
app.expandControllerA($scope);
});
In the second file
app.expandControllerA = function($scope)
{
}
You can pass any variable or dependencies to expandControllerA function.
Related
I am programing in Angularjs, and have have a page that is divided into 3 teplates which one has an html file and js file.
The js file of which template is characterized for having the controller of the html of that template.
At the end i want to pass a variable from a certain controller to another how can i do that once they are in different controllers. Thanks
Mr.Avraam Mavridis, here is some code:
Basically down here is the controller that i want to get the value of the parameter (clientPosition) to pass it to another controller:
crm.controller("clientsModule", ["$scope", "$http", function ($scope, $http {
$scope.changeTemplate = function (index, clientPosition) {
$scope.panelTemplate = index;
$scope.clientPosition = clientPosition;
};
}]);
There are various ways you can achieve this. The easiest way to do this is using a broadcast and watch. You basically set the value in the controller you want to and create a broadcast event for it. In the controller that you would like to access the value, you put a watch and listen to any updates for the value.
The above way is also the dirtiest way to achieve what you want
A more elegant solution would involve create a model binding on the view and accessing those properties via logical progression on the controller you want to access that value in. You essentially create an angular service for your models and then access those services in the controllers.
i am writing a code in angularjs which loads the controller file as per session demands
i have a separate controller files for admin(let say ctrl1) and for staffs (ctrl2) and one common(ctrlComm) file which can be use any among them,now i want to call function of ctrl1 inside ctrlComm, i do not want to write or paste the file code again,how can i do this.Here is my code.
ctrl1:
customerSupport.controller('studentSheet',['$scope',function($scope){
$scope.searchStudent=function(studentid){
angService.getfromRemote('students/'+studentid)
.success(function(response){
if(response.success){
...
}
})
}
}])
ctrlComm
activities.controller('usersActivites',['$scope',function(){
$scope.studentdetail=function(studentid){
console.log("how can i call the searchStudent if ctrl1 here ??");
$scope.searchStudent(studentid);
}
}])
Sharing a function is a clear sign you need a service.
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
I believe you already have angService in place for this. Inject this service in usersActivites and you are good to go. You can tweak your service to get student details directly. Create some function there like angService.searchStudent and from service return appropriate response.
I'm kind of a big angularJS newbie and I'd like some highlights concerning dependency injection.
I've done some research and here is what I understand so far.
I have 2 service files (using factories) :
-mogService.js
angular.module('anglober.services').factory('mogService', ['$http', function($http) {
var mogService = {};
//mogService code here
return mogService;
}]);
-modalService.js
angular.module('anglober.services').factory('modalService', ['$modal',
function ($modal) {
//modalService code here
}]);
One controller file :
-mogCtrl.js
angular.module('anglober.controllers').controller('mogCtrl', ['$scope', 'mogService','modalService', function ($scope, mogService, modalService) {
//code using mogService and modalService parameters
}]);
As I understand it, the dependency injection is done by passing my services as parameters of the function parameter in my controller declaration, the array of string is here so that after minification, angular still knows which variable is what.
However, the modalService variable is undefined when I test my code. The mogService is recognized alright though (only if I remove any call to the modalService variable).
What am I doing wrong ?
I've read things about using $inject, which is the better practice and why ?
I'm declaring modules in the app.js as follows :
angular.module('anglober.services', ['ui.bootstrap']);
angular.module('anglober.controllers', []);
var app = angular.module('anglober', ['anglober.controllers', 'anglober.services', 'anglober.directives']);
Is this good practice ? Declaring modules and their respective dependencies in one file then only use "getters" without the dependencies array parameter in module files ?
Thanks for your time.
Three steps that work for me (plunkr):
1. Be sure you define a module's dependencies only once.
Indeed, check that angular.module('anglober.services', [...]); is indeed called only once with the second argument.
At the same time, be sure to call these lines before the actual services/controllers /... definitons.
2. Wire every dependency
You should add 'anglober.services' dependency to 'anglober.controllers': the last requires modalService which requires $modal, it may help angular anyway.
3. Add possible missing lib requirements, in the right order
First jQuery, then angular, bootstrap and eventually bootstrap.ui and your modules.
I use $scope.data.xxxx etc in many places in my AngularJS application. Right now I am declaring $scope.data in each controller like this:
$scope.data = {}
Is there a better place for me to do this. For example could I better do this when setting up my app.js file in the .config or .run ?
Numerous places you can put it
var app= angular.module('myApp',[])
As service
app.factory('myData',function(){
return { foo:'bar'}
});
As Value
app.value( 'myData', { foo:'bar'});
As constant
app.constant( 'myData', { foo:'bar'});
In each case would inject myData in controller, directive, another service etc to access it
app.controller('SomeController',function($scope, myData){
$scope.data=myData;
})
You can use at least 2 options:
Use $rootScope as storage.
Use service. Services are singletons that you can inject to any controller and expose their values in a controller's scope.
I suggest you to use service (at least for me, its better way). from $rootScope all controllers can see your globals,
Good example how to use Service as storage you can see in Fiddle
Not really. if your application has a root controller that the others are nested inside you could set $scope.data there, but that probably doesn't do what you want - all of your controllers would use the same data object. If one controller changed it, it would change in every other controller as well.
Because (I presume) you want a separate $scope.data in each controller, you should continue to initialise each one separately.
I am new to angularJS. I have been reading many code examples and I often see controllers defined as:
function MyController($scope) {
//code here
};
I however am using the method below to define my controller, as I wasn't aware there was any other way to do it.
angular.module("csApp.controllers", [])
.controller("main", function ($scope) {
//code here
};
How does the first method work? Is there some sort of naming convention I am missing here?
Are people using the first method simply adding these functions as global variables by placing them in in script files after angular loads?
How would you connect a global variable to a route if the controller is not registered with angularJS?
Thanks!
The AngularJS Dependency Injection framework can always find controller constructor function in global scope as they are global by nature. Even the ng-controller directive has this in its documentation
Name of a globally accessible constructor function or an expression
that on the current scope evaluates to a constructor function.
When using $routeProvider you can provide the route definition a Controller class or a quoted controller name which has been registered using the module api. These two are valid
route :{controller:MainCtrl,...}
route :{controller:'main',...}
The module based approach is preferable because it stops one from polluting the JS global namespace.
You just need to initialize your module, then you can declare your controllers with the two methods.
The first method make it easier and more readable when you have for instance 5 controllers, or if you want to split them in differents files. But they do the same job. All you need to do is keeping track your controller name.
function MainCtrl($scope) {
// do your stuff
}
<!-- Using the function name here -->
<ANY ng-controller="MainCtrl">
<!-- your HTML data -->
</ANY>
More info in the API Doc.