I have multiple projects that I’ll develop using AngularJS, but targeting to web and phonegap at a time. The problem is that I have shared/common UI components (services, controllers, filters …) between these projects for reducing maintenance effort. All the projects will have their own modules with specific functionality. But technically we have to bring the common modules into each project (without copy-pasting them, obviously).
This scenario is to assume that your project could be large, and many small teams could work together at a time. Sharing common things that could prevent the code missing from updates, but it produces less DRY code and does not violate KISS principle. As I do mention about sharing common codes that this part should be far away from recent requirement changes … If the changes alway happen among the teams, sharing common things could be a nightmare.
My inspiration comes from developing application with Sencha ExtJS. This framework is awesome in separating the application into multiple targeting such as web, phone, tablet. It’s about the structure source code, and build process that collects appropriate codes that matching target devices. With AngularJS projects, we can share the common libraries with bower, using module to split application into several profiles (phone, web …) or you know that you can have multiple ng-app in one prject. Grunt is the best tool for developing your own build process.
From beginning, I cloned the angular-seed project, start to modify it with multiple profile. It’s easy that you just create new folder ‘profiles/phone’ and ‘profile/web’ and copy the ‘view1’, ‘views2’ modules for both. Don’t forget app.js, app.css … At this point, you have 2 application that share bower_components, components as well. You can start the server and see them working separate parts of a single large web application. It should be worry that we could public all the things to user, but we don’t do that because the source should be minified and deployed for separated target.
I posted my solution to github, with detail instruction in readme file. All they’re kept to be update, since I am getting several feedback by my technical team. This simple solution have challenged many developers for a while, because of not deeply understanding on Front-end architecture. So, just a K.I.S.S 🙂