re-use angularjs code between multiple applications

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

jmustonen · Accepted Answer · 2015-05-19 21:02:36Z

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 [email protected]: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 [email protected]: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 [email protected]: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.

Worked great !! thanks for your detailed reply. I just used internal git repo instead of github.
Nice to hear this! And yeah, using internal git repo is naturally just fine, especially if it's mostly internal stuff anyway. Happy coding! :)

aorfevre · Accepted Answer · 2015-05-19 15:33:33Z

1

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.

answered May 19, 2015 at 15:33

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

Comments

Rene Padillo · Accepted Answer · 2015-05-19 15:39:19Z

1

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.

answered May 19, 2015 at 15:39

Rene Padillo

2,3684 gold badges28 silver badges41 bronze badges

Comments

Riad Baghbanli · Accepted Answer · 2015-05-19 15:32:27Z

0

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.

answered May 19, 2015 at 15:32

Riad Baghbanli

3,3461 gold badge17 silver badges23 bronze badges

2 Comments

ThePearl Over a year ago

but this will create maintenance issues ?

Riad Baghbanli Over a year ago

If you have that Module independently maintained and hosted with enforced interface version control - no problem what so ever.

Collectives™ on Stack Overflow

re-use angularjs code between multiple applications

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related