CODEWITHSUNDEEP
javascriptangularjs
Eric Mitjans
Eric Mitjans

Reputation: 2179

Splitting JS files in AngularJS App

I'm building an AngularJS app, and right now I have only one .js file, which contains controller, service, filter, directives...

Looks something like this:

angular.module('msfLogger', ['offClick', 'ngBootstrap', 'ngSanitize','ngCsv', 'angularFileUpload'])

.controller('LoggerCtrl',['$scope', 'dataService', function($scope, dataService)
     { ... }])

.filter('showhide', function() {
    ...
})

.service('dataService', function() {
    ...
})

.directive('headerLinks', function() {
    ...
});

Right now is working, but I assume that's not good practice.

How should I split the files? Does it make any difference the order in which I call them?

Should I include 

angular.module('msfLogger', ['offClick', 'ngBootstrap', 'ngSanitize','ngCsv', 'angularFileUpload'])

in all of them?

Upvotes: 1

Views: 645

Answers (5)

Steve
Steve

Reputation: 1386

I have been working on the same question for the past couple of weeks, so while not an expert I can point you to the resources I have found helpful.

If you have a pluralsight subscription I'd suggest John Papa's course AngularJS Patterns: Clean Code http://www.johnpapa.net/angularjs-patterns-clean-code-released/

If not, still worth browsing the course materials on git hub: https://github.com/johnpapa/ng-demos/ have a look at the modular app (src/client/app) and how his app.module.js pulls in the rest of his modules, and how they are organized.

Also have a look at his dataservice folder. Any part of his app that wants info from the API gets it through that service.

I just started to get into unit testing (https://docs.angularjs.org/guide/unit-testing) and that has me further reorganizing my code.

Upvotes: 1

Andre Lombaard
Andre Lombaard

Reputation: 7105

Yes it's better to split your files, below is an example of an Angular service and the Angular controller that is making use of that service. As long as you make sure that you include both .js files, you should be ok.

Here is the service (ReadPolicyService.js)

(function () {
    var readPolicy = function ($http) {

    var read = function
        (
          searchTerm
        ) {

        return $http({
            url: localStorage["policyServiceUrl"] + "api/ReadPolicy/Read",
            dataType: 'json',
            method: 'POST',
            headers: {
                "Authorization": "Bearer " + localStorage["yat"]
            },
            data: {
                "SearchTerm": searchTerm
            }
        }).success(function (response) {
            return response.data;
        });
    };

    return {
        read: read
    };
};


var module = angular.module("yugasat");
module.factory("readPolicy", ["$http", readPolicy]);
}());

Here is the Controller (SearchPolicyController.js)

(function () {
var module = angular.module("yugasat");

var searchPolicyController = function ($scope, readPolicy) {
    $scope.policies = [];
    $scope.searchTerm = "";
    $scope.isBusy = false;
    $scope.policyError = false;
    $scope.policySuccess = false;

    $scope.searchPolicy = function () {
        $scope.policyError = false;
        $scope.policySuccess = false;
        $scope.isBusy = true;

        readPolicy.read($scope.searchTerm).then(function (response) {

            if (response.data.Policies.length > 0) {

              angular.copy(response.data.Policies, $scope.policies);

              $scope.isBusy = false;
              $scope.policyError = false;
              $scope.policySuccess = true;

                 } else {

                     $scope.isBusy = false;
                     $scope.policyError = true;
                     $scope.policySuccess = false;
                 }
        }, function() {
            window.location = "/Error/Index";
        });
    }
};

module.controller("searchPolicyController", ["$scope", "readPolicy", searchPolicyController]);
}());

Upvotes: 1

Alejandro Rodríguez
Alejandro Rodríguez

Reputation: 316

I suggest you to follow the angular styleguide from John Papa, it uses a folder per feature.

Upvotes: 4

duncanhall
duncanhall

Reputation: 11431

There are generally 2 schools of thought on how to split files. One is to split by type, eg controller, directive, filter, view etc:

root  
 - controller
     - controller-1.js
     - controller-2.js
 - directive  
     - directive-1.js
     - directive-2.js
 - filter
     - filter-1.js
     - filter-2.js
 - view
     - partial-1.html
     - partial-2.html

The other is group sets of files logically by context or feature:

root  
   - login
     - login-controller.js
     - login-directive.js
     - login-view.html
   - account
     - account-controller.js
     - account-directive.js
     - account-view.html

Which you choose is up to you. I find the first works well for very small projects, but I quickly move to the second for larger projects.

Upvotes: 2

Anton
Anton

Reputation: 2378

Here is a good article about angular application structure: https://scotch.io/tutorials/angularjs-best-practices-directory-structure

Upvotes: 1

Related Questions