A few things are happening here. We first require the captain-list module – webpack will bundle those files into the namespace, which will allow us to specify it as a dependency for our startrekApp. Next, we use ui-router to create a ‘page’ for showing our captains. Note we don’t need the full path url.

In captain-list/, we have the typical suspects: our controller, our view, our css (or scss, in this case).

At this point, this still doesn’t quite work yet. Why? Because webpack was expecting javscript when we told it to load our view and style files – it doesn’t know how to load anything else! So we need to teach it how to load html and scss files.

Back to our gulpfile.js. We’ll add the following loaders to our webpack config:

We’ve added four loaders: ng-cache, scss, url-loader and file-loader. Ng-cache will inject your template into Angular’s $templateCache in the app’s run block. If you’re thinking about lazy loading modules later on, this will become slightly problematic. But we’ll worry about that in Part 3.

So there we go. We’ve created a module, require’d it into our entry file, and injected it as a dependency into our Angular app declaration. Stay tuned for Part III!