# Kickstarting Angular With Gulp and Browserify, Part 2 - Browserify

Hello. Welcome to the second half. Last time, we built a nice Angular starter project, utilizing Gulp and Bower. Let’s take this a step further and add the power of Browserify into the mix. Before you read any further, check out the Introduction to the Browserify Handbook to learn about the problems that Browserify solves.

Just want the code? Get it here.

## Install Dependencies

Let’s get Browserify installed…

### Then install the Gulp dependencies locally

The former dependency allows you to run Browserify from Gulp, while the latter concatenates all the Bowerserify dependencies into a single JS file.

## Update the HTML

Change the included JS file in index.html.

From:

To:

### Test

To recap:

2. Updated the build process so that a single JS file named bundled.js is created
3. Updated index.html to include that new JS file

Navigate to http://localhost:8888/ and you should still see:

Notice the bundled.js file. Again, this is generated by concat('bundled.js'). If you kill the server, then try to run it again, you’ll get an error. Essentially, the bundled.js file needs to be removed before each run. So update the clean task:

## Browserify

Remember all those Bower components in the index.js file? Let’s clean up that mess by requiring our app’s dependencies with Browserify.

### Update the HTML (again)

Now, we need to use Browserify to require the following depencies in our app:

1. angular.js
2. angular-route.js
3. angular-animate.js

Why don’t we replace all of our Bower components? It’s good to use both Bower and Browserify in case NPM does not have a certain dependency that Bower may have. The point of this example is to show you how to use both.

### Install Requirements

Go ahead and install the requirements we need via NPM:

### Update JS

Now we can include various modules the “Node-way” using require() calls, giving you access to nearly 90,000 modules.

### Controller

Let’s abstract out the controller to a file of its own.

First, update main.js again:

Now create a new folder called “controllers” within “app/js”. In the new folder add a new file called mainctrl.js:

This syntax should look familiar if you’ve worked with Node before. We use exports to expose the function, which we then have access to in main.js since it’s part of the requirements.

### Test Again

Navigate to http://localhost:8888/ to make sure everything still works.

## Update the Build

Now that we have the default task working, let’s update the build process so we can create a deployable build.

### Update the Gulpfile

Finally, update the build task itself adding in the above task:

### Create a Build

Check out the live app at http://localhost:9999/. Deploy your app, if you’d like.

### Conclusion

Let’s recap. Over the past two posts, we’ve created a sample app that can be used as a seed for all of your Angular projects. Want to use this in your own projects?

1. Clone the repo
2. Install the global requirements: npm install -g gulp bower browserify
3. Install the local requirements: npm install
4. Install the Bower components: bower install
5. Run locally: gulp
6. Create a build: gulp build

I encourage you to add your favorite libraries and modules, which is easy to do. Looking for a client side dependency? Be sure to check NPM first before relying on Bower so you can take advantage of the simple require calls, via Browserify, which reduces code clutter and enables you to write modular, re-usable code.

As always, I’d love to hear your feedback. How are you using Browserify in your projects? Comment below.