AngularJS is a front-end framework for developing single page applications. I have been working with AngulaJS for over two years now and I really appreciate the way it reduces the development time.
Recently, I was assigned a task in which I had to refactor and existing's project front-end code and I must say that it was really the most absurdly written code I have seen in my life. One of the controllers in that project had over 3500 lines of codes and the functions and objects were created at random places in the file.
As, a part of refactoring the source code I split the controller among multiple files so that the code can be more modular. This was something I thought of sharing with you guys. So, if you too are looking for a way to divide controller code in multiple JS files then read further.
Divide Controller Code in Multiple JS Files
For this tutorial I am creating a basic angularJS app that allows the user to add a new employee and display the list of users. This app has a controller called mainController which binds with the view and we will move some of its code to a different js file.
What we have done in the example given below is moved some part of controller code to a new function that resides in a new file. This function takes the same number of parameters as our main controller. Since it has access to the $scope variable we can extend the controller's functionality from it.
HTML Code
<body ng-app="ladWhoCodes">
<div ng-controller="mainController">
<form>
<input type="text" ng-model="AddNewEmployee.NewEmployeeDetails.Name">
<input type="text" ng-model="AddNewEmployee.NewEmployeeDetails.TwitterHandle">
<button ng-click="AddNewEmployee.AddNewEmployeeBtnClick()">Add New Employee</button>
</form>
<table>
<thead>
<tr>
<th>Name</th>
<th>Twitter Handle</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employeeDetails in ListOfAllEmployees">
<td>{{employeeDetails.Name}}</td>
<td>{{employeeDetails.TwitterHandle}}</td>
</tr>
</tbody>
</table>
</div>
</body>
Main Controller
var ladWhoCodesApp = angular.module("ladWhoCodes",[]);
ladWhoCodesApp.controller("mainController", ["$scope", function($scope) {
$scope.AddNewEmployee = {
NewEmployeeDetails : {
'Name' : '',
'TwitterHandle' : ''
},
AddNewEmployeeBtnClick : addNewEmployeeBtnClick
};
function addNewEmployeeBtnClick() {
if(areNewEmployeeDetailsValid())
$scope.ListOfAllEmployees.push($scope.AddNewEmployee.NewEmployeeDetails);
}
function areNewEmployeeDetailsValid() {
// Employee details validation code goes here
return true;
}
newSubController($scope);
}]);
Sub Controller
function newSubController($scope) {
$scope.ListOfAllEmployees = [
{
'Name' : 'Dinesh Verma',
'TwitterHandle': '@DineshVerma'
},
{
'Name' : 'MrInvicto',
'TwitterHandle' : '@MrInvicto'
},
{
'Name' : 'Akash Jadhav',
'TwitterHandle' : '@Gotiya'
}
]
}
Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here. we are providing AngularJs training in velachery.
ReplyDeletefor more details: AngularJs training in velachery