Step Three (Building a SPA): Bower & Client Packages

Normally, I would install client packages by downloading the files and moving them into their respective folders.  That is the reason that we created directories of css, img, and js (previous post).  Yet major package creators like Bootstrap and AngularJS are starting to leverage Bower.  Bower is a version package manager is the same way that nmp manages node packages.

Bower

Why do you use bower? Bower addresses version control. By using bower you are able to maintain the version of the packages being used by the application. It also provides a common structure from project to project.  Lastly, it manages the dependents of these packages.

Bower Icon

When we want to update a package Bower knows about, we pass an update command instead of an install command, and the package will be updated.  We haven’t used this feature in npm yet because we have been installing things.  But this simplifies version management.

Furthermore, it separates the directory structure so that we are not mixing bootstrap JavaScript with Angular JavaScript and JQuery.  This seems unlikely, that there is a name conflict, though this does happen with an index.html file in the packages.   It really simplifies cleaning up when things are updated.

We install Bower just like we install a global node package:

sudo npm install -g bower

Like running node to install a local package, running Bower creates a json file (bower.json) and a directory (bower_components) that bower will place the downloaded packages in.

bowerStruct

Installing the Basic Three

The three common packages for an Angular SPA are: Bootstrap, JQuery and Angular.  Now that we have Bower installed, installing these packages becomes easy.  First we need to change our directory into the public directory.  This is because these files are for the user, not NodeJS.  Then we run the bower install command.  It will create the json package, directory and load the files.

$ cd public
$ bower install bootstrap
$ bower install angular-bootstrap

This will load the packages we need.  Now we need to update our index.html page.

Referring to Bower on the Page

In the index page we now want to add these packages.  The href  and src attributes will refer to the bower_component directory.  In this example, I am using the Angular “Hello” example, which is the first example of the Angular page.  We place the example inside a bootstrap well.  This makes its appearance nicer than shoving it into the top left corner.

<!doctype html>
<html ng-app>
<head>
 <meta charset="utf-8" />
 <title ng-bind="windowTitle">Our First Angular Program</title>
 <!--
 Add our style sheets here.
 -->
 <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>

<body> 
 <!-- Load Browser-Side JavaScript. -->
 <script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
 <script type="text/javascript" src="bower_components/angular/angular.js"></script>

 <div style="padding-top:30px;">
 <div class="row">
  <div class="col-md-3">
   <div class="well">
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
   </div>
  </div>
 </div>
 </div>
</body>
</html>

Now we can bring the page up, and we have the Angular “Hello” running.

HelloLuke

Summary

This post we learned how to install and leverage bower for client package management.  We updated the index page to include the packages and added the Angular “Hello” example.  Next we are going to show client-side routing.  This will allow our page to act like an application, where it appears to have pages.

Trackbacks

  1. […] What we have in place is a NodeJS server running on our machine with nodemon also installed.  Next, we are going to start to populate the /js directory with Angular and the /css directory with b….  We are also going to increase the complexity of our index […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: