re-use angularjs code between multiple applications - angularjs

Question

i have some angularjs file that has RESTAPI access to a third party service.
say, i have multiple java applications that need to use the same angularjs file.
what is the best way to share the file.
basically, in the olden days (i am talking about back end code), we would write an application that is deployed as a service and all other applications use this service. how do i achieve this with angular.. please keep in mind, i was mostly a back end developer and entering the new front end world
thanks

Answer 1

I would recommend to use Bower for maintaining your reusable components. Develop standalone functionality in their own modules, doesn't matter whether they're directives, services or whatever Angular components, and then install them as Bower dependencies into any of your separate Angular applications.
Bower has documentation on creating packages, and Brian Ford has written a nice (albeit a bit outdated at places) tutorial on writing reusable Angular components using Bower.
So, basically your workflow would go like this:
Start developing your module. If it is something already existing, you can just pull it out of the current place.
mkdir your-component-name
cd your-component-name
$editor your-module.js
Once you have your-module.js started (no need to finish development first, it's actually even better not to, if you're developing a completely new component), it's time to initialize your Bower component.
bower init
You will be asked for some initial settings, like component name (defaults to the directory name, e.g. your-component-name), initial version number, main file (should most likely be your-module.js) etc. For most of the cases the default value is just fine. After bower init has been successfully run, you will have bower.json that might look somewhat like this:
{
"name": "your-component-name",
"version": "0.0.0",
"main": 'your-module.js',
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
And of course you could do all this manually, but it's nice to use the bower init helper tool.
Continue development. If you have any external dependencies, you can add them also with Bower:
bower install external-dependency --save
Finished with development? It's time to publish your component so that it can be used in your applications. If you haven't already initialized your Git repository, start with it:
git init .
Add your work, commit and tag it:
git add <your-component-contents>
git commit -m "v0.0.0"
git tag v0.0.0
This is the part, in addition to the value of version property in your bower.json (note: Brian Ford's tutorial is talking about component.json - that is unfortunately outdated stuff), where you will be able to maintain your component pretty easily within all your applications. Need a change? Just do it, bump up the version number, commit, tag and run bower update where needed.
Next step is to publish your code into a Git repository, for example GitHub
git remote add origin git#github.com:your-github-user-name/angular-your-component-name.git
git push -u origin master
Then the component can be installed:
bower install your-github-user-name/angular-your-component-name
The component can even be installed from a private repo, for example if you do not want to publish the component outside your company (see under heading "Bower Package Stewardship" in Brian Ford's tutorial for more details):
bower install git#github.com:your-github-user-name/angular-your-component-name.git
# or from any other arbitrary git repo
On the other hand, if you do wish to publish your newly created component, you should think about registering it:
bower register angular-your-component-name git#github.com:your-github-user-name/angular-your-component-name.git
So it could be searched for, and would be easier to install:
bower install angular-your-component-name
Start using your component(s) in your Angular applications. And whenever you notice a bug/missing feature with one of your apps, you can fix your component, do a new version release, and then update your applications one by one.
And then there also is npm that you could use instead of Bower. The workflow is again pretty much the same, of course differing from the tool specific parts, but otherwise no big differences. I won't go into npm packaging details now, though, just thought to mention also that as an alternative tool.

Answer 2

SOLUTION 1 :
This can be acheive exactly the way you described.
Deploy a Service AngularJS app (that has all your services)
for example : tomcat7/www/myServiceApp
All your needed shared will be therefore into myServiceApp/js/myShareService.js
On your apps that need to access to it, your can reference all JS files (and others) like that <script src="../myServiceApp/js/myShareService.js"></script>
Of course with that solution, both services shall be deployed on same WebServer
Solution 2:
I personnaly prefer this solution with involves Continuous integration.
I copy all shared resources on the first step of the continuous integration to my app dir so every app is independent.

Answer 3

In Angular we separate our app by modules which is equivalent to a package in Java. Let's say you wanted to create a package which you can re-use for other Angular JS apps.
Sample
External Package
angular.module('my-awesome-app', [])
.service('FooService', function () {
// Awesome code(s) here
});
App Package
angular.module('another-app', ['my-awesome-app'])
.controller('AppController', function (FooService) {
// Awesome code(s) here
});
instead of using import we set my-awesome-app as a dependency for another-app (which why we put it on the array) so you can call its service.

Answer 4

Create JS file containing Angular Module which in turn contains Factory to expose API. Minify your file and use it either thru URL or direct inclusion into your project.