Angular 1 common service/module/library for multiple "apps" - angularjs

Question

I can't describe it very well but:
I have one angular app for "one" functionality.
E.q. I have "campaigns" functionality. Add, Edit, Display all, display in another way.
For add and edit I have that same app and controller and context etc.
For rest I have different folders with app, controller, context, config, eventHanlder etc.
But all of them have simillar code in ~70%.
It is context with download and upload data via $http to ASP.NET WebAPI project.
And few methods in controller.
I want "merge" it into one but I cant don't want merge these functions into one app because they have different "view".
So I was thinking about:
Make "routing" app for these simillar apps.
one context, config, and controller same in more than half
some different options so it won't be "SoC"?
Move common from "context, config, controller" to another files/apps and inject them to concrete controller.
But I don't know how to do it.
I know I can "factory" method to app inside it config but I want these "services" be indepentent to controllers and apps. As different app in different catalog. So I can inject them via controller.
How it is possible?
Yeah I really new in Angular ;)

Answer 1

Question 1:
I would advise to look at the ui-router module. This module allows you to define url routes to states with views and nested states/views. Very useful for anything more than a single page app.
Question 2:
Sounds like you're talking about setting up a few angular.modules that depend on one another.
In general you would group related services, controllers, configs into a module. If another module needs to use one of those, you make that module depend on the other.
Example:
// myApp.foo module
angular.module('myApp.foo', [])
.factory('Foo', function(){
return {
data: {
foo: 'angularjs is cool!';
},
doStuff: function(){
}
};
})
.controller('FooController', function($scope, Foo){
$scope.foo = Foo.data.foo;
Foo.doStuff();
});
// myApp.bar module
angular.module('myApp.bar', ['myApp.foo']) // notice dependency on myApp.foo
.factory('Bar', function(Foo){ // you can inject Foo because of dependency
return {
data: {
bar: 'using angular modules helps us organize'
},
doStuff: {
},
doOtherStuff: {
Foo.doStuff();
}
};
})
.controller('BarController', function($scope, Bar, Foo){ // you can inject Foo into controllers too
$scope.foo = Foo.data.foo;
$scope.bar = Bar.data.bar;
$scope.doFoo = Foo.doStuff;
$scope.doBar = Bar.doStuff;
$scope.doOtherBar = Bar.doOtherStuff;
});
It is always good practice to think about and develop your modules in a way that they can be reused in different projects.
Update: (RE: question about /AppCommon, /App1, /App2, /App3)
Just make your service in: /AppCommon/my-service.srv.js*
It would look something like:
angular.module('MyCompany.Common', [])
.factory('CommonService', function($http){
return {
doStuff: function(){
$http.get('/some-url').then(function(res){
});
}
};
});
And in your /App1, /App2, /App3 projects:
Include that js file into your HTML:
<script src="/AppCommon/my-service.srv.js></script>
Inject the MyCompany.Common module into the areas of the apps where you need it.
angular.module('App1', ['MyCompany.Common']);
Inject the CommonService into the app's controllers/services where you need it.
angular.module('App1', ['MyCompany.Common'])
.controller('App1Controller', function($scope, CommonService){
});
*Note: You can name your javascript file however you want. I have found it very helpful to include .srv in files containing services, .ctrl in files containing controllers, .drv in files containing directives, .tpl in template files, etc... This goes along with the best practice of having one thing per file.