As we prepare to accept package contributions from the community we need to discuss and document what is the best way to build a package. I am building a google maps package and will log my steps and discussions along the way.
1. Look for an existing implementation
In my case because we use angular I looked for the existing big and stable integration between angular and google maps. Googling for “angular google maps” brought me to angular-google-maps which is the “official” implementation adopted by angular-ui.
2. Work with the dependency manager
angular-google-maps provides a set of directives to work with google maps in angular applications. I read the “quickstart” which is basically what we need to address within our package so users can setup this integration effortlessly. The first command in the quickstart is the directives installation through bower.
2.1. Execute bower install through your package
With packages that are installable by bower (there are tons! 🙂 ) we want to install through bower. To do so we need to create a bower.json with the dependencies.
2.2. Add a bower.json
So in the dependencies I state the exact package that the quickstart noted to install.
2.3. run it through the package installation as a postinstall script.
to run bower install using the bower.json above we need to trigger the bower install upon the npm install which is run when we install a package. This is executed just like bower gets invoked when you run mean init (and thus first npm dependencies and then bower dependencies are satisfied in mean.io.
To check this and to actually run the bower install –
2.4 Change bower’s default installation location
When running bower install the default location bower installs to is bower_components. In mean we have the public/server convention and all client side code needs to go to public. This means we need to “tell” bower to install in a different location. This can be achieved by creating a .bowerrc file in the root directory which looks like this.
2.5 Check that everything works (npm install)
To do so run an npm install… 1. that is supposed to trigger the bower install 1. That is supposed to install the dependencies to public/assets/lib
The way we require missing dependencies, add aggregated resources, add routes,settings and menus is all through the packages main digest file – the app.js
3.1. Add the angular dependencies.
We need to expose to angular the dependent directives and services coming from the bower package. This is done by adding an “angularDependencies” function in the app.js
In our case it’s the line
3.2. Aggregate the files.
It’s common practice to compress them to one file (this is done by the grunt uglify and the grunt cssmin tasks)
There are 2 ways to aggregate the js/css files either with a relative reference – like:
or using an absolute path like –