AngularJs - Modulate a code to be reusable in multiple projects

Next, I'm developing a webapp where I have a very broad administrative area with several functions. In another project that I closed a few days ago I was also asked for an administrative area with several functions that are similar to the one I'm already developing, such as a ticket system, for example.

I started to develop a new module (the first time I try a module that can be reusable), but I have no experience with it and I know it can be improved.

What do I own?

At the moment I have a code, already functional, but it has some dependencies that I know can be improved. Here's a good example of the code:

angular.module('agChecklist',[])
.run(['$rootScope','$stateParams','factList', function ($rootScope,$stateParams,factList) {
    //... algumas definições iniciais com $rootScope ...\
}])

.factory('factList', ['localStorageService', function (localStorageService) {
    var _getCache = function() {
        return JSON.parse(localStorageService.get("list"));
    };

    return {
        getCache: _getCache
    };

    //... outras factorys ...\
}])

.controller('ListCtrl',
['$rootScope','$scope','$stateParams',...[mais]...,
function($rootScope,$scope,$stateParams,...[mais]...) {
    $scope.addItem = function(event) {
        //adiciona item para a lista
    };

    $scope.removeItem = function(event) {
        //remove item da lista
    };

    //... mais funções que o usuário pode executar ...\
}]);

In this case, it would be a module that adds products to a list to do a service order checklist, etc. .. Simple thing.

The "problem"

It's not really a problem, it's code optimization. Currently when I need to use this checkList I need to set the controller ListCtrl in the or views I need it.

This creates a need for very complex scans, as there are initial definitions that another controller would need to read before it was started. For example, by refreshing, it reloads the cookie and mounts the list where the user stopped. So this definition must happen before another controller. Otherwise the application would not work (it is ok at the moment).

Another reason is that the module is not loaded when starting the app. I'm using the module ocLazyLoad that will load all files from the CheckList module only in the views I need.

What I noticed

By analyzing other modules, I noticed that it is well using .run , .factory , .directive and .service .

• .run: used for initial settings, such as empty initial array, etc;
• .factory: for external api request (usually);
• .directive: for creating ui modules that will create user interaction with the app;
• .service: To manage the functions that the user calls, etc. All behavior of functions and communication between user interaction with the interface and responses of the app;

With this my doubt is the following?

• How do I create a reusable module in other projects from the code I already have?
• What would be best practices for building modules?
• Is this really the best way? Or are there any better / easier / more correct ones, etc.?

Any thoughts and / or opinions you may have, please share! I really want to improve this code development.