Angular, webpack and gulp for an SPA: Part II

We left off last time in Part I where we set up Gulp to watch changes and feed those changes to webpack.

Let’s add a ‘page’ to our single-page app showing the captains in Star Trek. We’ll add routing to our entry file (index.js):

// we'll first 'require' the module
require('modules/captain-list/');

// add ui-router to help manage our routing
var startrekApp = angular.module("startrekApp", ['ui-router',
     'startrekApp.captainList'      
])
.config( ['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {

    $stateProvider
    .state('captainList', {
          url: '/captains',
          templateUrl: 'captainList.html',
          controller: 'CaptainListController',
    })

    $locationProvider.html5Mode(true);
}]);

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).

captainList.controller.js:

   module.exports = function($scope) {
         // You'll want to refactor this out into a service, btw.
         $scope.captains = [
               {name: 'James T. Kirk'},
               {name: 'Jean L. Picard'},
               {name: 'Benjamin Sisko'},
               {name: 'Katherine Janeway'}
         ];
   }

captainList.html:

   <p> A list of our captains: </p>
   <ul class="captain-list">
       <li class="captain-list__item" ng-repeat="capt in captains" ng-bind="capt.name"></li>
   </ul>

captainList.scss:

.captain-list__item {
    color: blue;
}

In our captain-list/index.js, we have:

    var captainListController = require('./captainList.controller.js');
    // webpack will load the html. Nifty, eh?
    require('./captainList.html');
    // webpack will load this scss too! 
    require('./captainList.scss');

    module.exports = angular.module('startrekApp.captainList', [])
    .controller( 'CaptainListController', ['$scope', captainListController]);

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:

var webpackConfig = {
    debug: true,
    watch: true,
    // this is the "entry" file of your app. Think of it as your Angular "app.js" file.
    entry: "./app/modules/index.js",     
    // this is the will-be-outputted file you'll reference in your index.html file
    output: {
        filename: "bundle.js",          
    },
    module: {
        loaders: [
            { test: /\.html$/, loader: "ng-cache-loader" },
            { test: /\.scss$/, loader: "style-loader!css-loader!autoprefixer-loader!sass-loader"},
            { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" },
            { test: /\.jpg$/, loader: "file-loader" },
        ]
    },
    resolve: {
        // for illustration purposes, let's use lodash. 
        // this tells Webpack where actually to find lodash because you'll need it in the ProvidePlugin
        alias: {
            lodash: path.resolve( __dirname, './node_modules/lodash-node/modern'),   
        }
    },
    plugins: [
        // this tells Webpack to provide the "_" variable globally in all your app files as lodash.
        new webpack.ProvidePlugin({         
            _: "lodash",
        })
    ]
};

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!

Angular, webpack and gulp for an SPA: Part II

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