JavaScript/AngularJS adventures of a Java guy Part 2 – npm and Bower
Tooling
In Part 1, I talking about project structure and only hinted at development tools. Let’s talk about some dependency tools now. In the next blog post, we’ll cover even more tools.
As a Java developer, I’ve already used Git and Github quite a lot. Not surprisingly, it works well with JavaScript too. If you haven’t used it, now is a good time to start.
Tools for Dependencies
npm and Bower
Do you know how you tell Maven that your project has a dependency, say, spring-core 4.0.3-RELEASE? You put a few lines in your pom.xml, and maven will download the internet for you. Just kidding, it will grab that dependency and all the things that it depends on. So, you don’t have to go to a web site, download a zip/jar, and paste them into your project. Wouldn’t it be nice if JavaScript had that?
It does. But it’s not just one tool like maven. The JavaScript ecosystem is using tools developed for Node.js. Node.js let you write server side JavaScript. I prototyped a few RESTful web services last summer for a client start up last summer using Node.js. It was fun and fast. I just wouldn’t use it in production. Even if your back end is in Java using Spring, you should install it just to get the Node Package Manager, npm (read the FAQ and you’ll see that some snarkasaurus says it doesn’t mean this). Go to the Node.js website, and press the big green install button. On my Macbook, it will live at /usr/local/bin/npm. npm will install binaries along with node modules.
Another package manager is Bower which is installed via npm.
|
1 |
npm install -g bower |
The -g flag means install it globally and not just for your current project.
To use bower, you need to have a bower.json config file in your project. You can create one yourself, or let Bower help you create one interactively.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
bower init [gene@rockhopper:][~/Development/javascript/ngproject]$ bower init [?] name: ngproject [?] version: 0.0.0 [?] description: a test angularjs project [?] main file: app.js [?] what types of modules does this package expose? [?] keywords: angularjs [?] authors: Gene De Lisa <gene@rockhoppertech.com> [?] license: MIT [?] homepage: http://rockhoppertech.com/blog/ [?] set currently installed components as dependencies? Yes [?] add commonly ignored files to ignore list? Yes [?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No { name: 'ngproject', version: '0.0.0', authors: [ 'Gene De Lisa <gene@rockhoppertech.com>' ], description: 'a test angularjs project', main: 'app.js', keywords: [ 'angularjs' ], license: 'MIT', homepage: 'http://rockhoppertech.com/blog/', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } [?] Looks good? Yes |
|
1 |
Now you can have Bower grab angular for you. You can check the name with lookup. Then install it with the install parameter. There are two flags for saving this dependency to your bower.json file. --save will add it to dependencies. --save-dev will add it to devDependencies. Will you need this during development only e.g. a testing library, or will you need it at deployment too? |
|
1 2 3 |
$ bower lookup angularjs $ angularjs git://github.com/angular/angularjs.org.git $ bower install angular --save |
Inspect bower.json and you will see this:
|
1 2 3 |
"dependencies": { "angular": "~1.2.16" } |
Notice that when you did the lookup that bower let you know what repository you will be getting the code from. This is important because anyone can publish code that bower can grab. See that last question from the init action that helped you from accidentally publishing to the bower repository? So OK, lesson learned. We should know where the code is coming from.
You’ve probably noticed that the code is saved in bower_components/ You can change this by creating a .bowerrc file in your home directory or current project. Here is an example that saves it in a maven friendly location:
|
1 2 3 |
{ "directory": "src/main/webapp/app/bower_components" } |
Let’s add some more, this time with a testing library.
|
1 2 |
bower install sass-bootstrap --save bower install angular-mocks --save-dev |
Here is the bower.json excerpt now. (Of course, when you run this, the versions might be newer).
|
1 2 3 4 5 6 7 |
"devDependencies": { "angular-mocks": "~1.2.16" }, "dependencies": { "angular": "~1.2.16", "sass-bootstrap": "~3.0.2" } |
In your HTML, you reference the downloaded files like this.
|
1 2 3 4 5 6 7 8 9 |
<head> ... <link rel="stylesheet" href="bower_components/sass-bootstrap/dist/css/bootstrap.css" /> </head> <body> ... <script src="bower_components/angular/angular.js"> </body> |
Next
You know those maven plugins that will copy files to different locations, or create a buildnumber, or that maven plugin you wrote yourself that did that thing? In the next blog post I’ll talk about a tool that will do this grunt work for you.
Hi,
Thank you for this series of posting around angularJS coming from a java background. It’s also my case.
I am actually going through your blog as we speak and was wondering if you had a date in mind for Part 3 ?
More specifically I was curious to see whether you configured grunt on top an ng-project that you got using angular-seed (as in Part1) or whether you adopted the easy way out, which is to use the yeoman project and their angular generator instead.
Thanks,
Thanks Mehdi,
I just need about 10 minutes to proof read Part 3, but I’ve been buried in a project.
I’ll do it soon.