Get Angular, Durandal, and JavaScript Templates with SideWaffle | John Papa

John Papa

Evangelist on the loose

Get Angular, Durandal, and JavaScript Templates with SideWaffle

...

Hungry for some file templates to get you started in the morning? Well now you can fill up on a set of web template packs for Visual Studio 2012 and 2013. SideWaffle is an open source project that creates a Visual Studio extension containing a set of file templates you can use for web projects.

SideWaffle currently has several templates including 10 I contributed for Angular, Durandal, and creating a JavaScript IIFE. One of the best parts is that SideWaffle will be frequently updated with new and useful templates (they do check for high quality templates). I expect that in the near term we’ll see a lot of additions.

  • Angular Controller (using Controller As syntax)
  • Angular Controller (using $scope)
  • Angular Directive (creates a skeleton for a directive)
  • Angular Factory (great for data, logging, and other services)
  • Angular Module (sets up a module)
  • Durandal ViewModel
  • Durandal Service
  • Durandal main.js (common creation syntax for kicking off Durandal)
  • JavaScript IIFE (Basic IIFE using vanilla.js)

I use the Angular templates in my upcoming course at Pluralsight on using Angular and Breeze to build a powerful SPA.

What’s in it for You?

Imagine you are in a web project writing Angular code. You want to create a new Angular controller. What do you do today? You might create a new JavaScript file and use a code snippet like my ngctrl snippet, or you could write it from scratch. But now with SideWaffle you can click CTRL+SHIFT+A to add a new file and choose the Angular Controller file template from SideWaffle.
SideWaffle

So when you open the Add New Item dialog, choose the SideWaffle sub-folder (just to narrow the scope) and/or search for the template name in the search box. Then select the template and enter the name for the file. Some of the templates will use the file and/or project name where appropriate in generating the file. Below is an example of what the Angular Controller template generates when you name the file sessions.js. The whole idea is to get you started.

(function () {
    'use strict';

    // Controller name is handy for logging
    var controllerId = 'sessions';

    // Define the controller on the module.
    // Inject the dependencies. 
    // Point to the controller definition function.
    angular.module('app').controller(controllerId,
        ['$scope', sessions]);

    function sessions($scope) {
        // Using 'Controller As' syntax, so we 
        // assign this to the vm variable (for viewmodel).
        var vm = this;

        // Bindable properties & functions are placed on vm
        vm.activate = activate;
        vm.title = 'sessions';

        function activate() {
        }

        //#region Internal Methods        

        //#endregion
    }
})();

Or imagine you are creating a module for your Angular app and you forgot the exact syntax to use. You can use the Angular Module template from SideWaffle and name the file app.js and it would generate the following code.

(function () {
    'use strict';

    // Module name is handy for logging
    var id = 'app';

    // Create the module and define its dependencies.
    var app = angular.module('app', [
        // Angular modules 
        'ngAnimate',        // animations
        'ngRoute'           // routing

        // Custom modules 

        // 3rd Party Modules
        
    ]);

    // Execute bootstrapping code and any dependencies.
    app.run(['$q', '$rootScope',
        function ($q, $rootScope) {

        }]);
})();

Notice the template puts a few dependencies in for some common modules such as ngRoute and ngAnimate. it also reminds you to add any other custom or 3rd party modules in the dependency list. Then it creates the kickoff code in app.run, injecting $q and $rootscope, two common dependencies. As a template, you can then modify whatever you need, of course.

The Durandal and JavaScript IIFE templates work in a similar fashion. Grab the SideWaffle VSIX, install it and give it a shot!

Contribute

Because it is open source, you can fork the repository, add your own templates, and make a pull request. The repository is managed by Mads Kristensen and Sayed Hashimi.

So if you are interested in creating a new template, dig in. Quoting Mads …

We’ve made sure to modify the project’s build system, so it automatically creates the VSIX based on the items in the project. Writing item templates have never been this easy. See the video below, it explains everything. The project is a VSIX containing item templates for all kinds of web related scenarios. For instance robots.txt, requireJS scaffolds etc.

Here is a quick video from Mads that tells you pretty much all you need to know on what they are and how to create one.

tags: angular durandal javascript visual studio 2012
  • Pingback: Get Angular, Durandal, and JavaScript Templates...

  • Rob Venables

    How did you come up with the name for this project?

    Rob

    • John

      Rob – I didn’t, it is not my project

      • Sayed Hashimi

        I can tell the backstory for the name.

        I went on a backpacking trip to the Enchantment Lakes in Washington state in August. The morning of the start we went to Sandy’s Waffle House in Leavenworth,WA. One of the guys with us, who is a big eater, ordered his meal and after ordering he asks the waitress “can I have a side waffle”. She let us know there was no such thing, so he just ended up ordering a full waffle on the side of his meal.

        We all started making fun of him for requesting a “side waffle”, then I tweeted this image https://twitter.com/sayedihashimi/status/365841153179926530. I also tweeted a service announcement that the domain was available https://twitter.com/sayedihashimi/status/368778809446637568

        After that I thought it would be a good name for a project, because; it was easy to remember, easy to search and the domain was available. I thought it fit well with the template pack project I was working on with Mads so we took the name and ran with it.

        If you look at what my friend did, he ordered his normal meal but the “side waffle” he ordered really enhanced his experience. The template pack is just like that, it enhances your VS experience. :)

        • http://sampathloku.blogspot.com/ Sampath Lokuge

          Nice :)

  • Simon

    Nice job John, when is your Angular Breeze SPA course video going to be released on pluralsight? I’ll be the first one to watch.

    • John

      Simon – Thanks! Hoping for end of September

  • Mathew

    This is amazing! One question though, when you ask for a file, are you pulling that from some ‘waffles’ server feed like NuGet or does it download it to your local instance? If it works like NuGet, then this is the next best thing since NuGet, if it downloads it to your machine, then it gets old quickly.. which gets annoying if someone changes something etc. Any insight?

    • John

      Matthew – The VSIX downloads all the file templates to your machine, just like Web Essentials or any other VSIX. When there is an update Visual Studio will alert you.

  • Pingback: Get Angular, Durandal, and JavaScript Templates...

  • James

    Is there a plan to add scaffolding templates for this project? ie. Scaffold parts of an SPA by pointing at C# data models or viewmodels…

    • John

      James – This is all open source so you can make a pull request and see if the owners will accept it. Or you could open an issue with them on github and ask for it.

  • Pingback: Stuff worth reading September 16th 2013 » I am Levi

  • Luciano

    When that new upcoming course will be live?

    • John

      Luciano – The new course will be live in October

  • Pingback: Get Angular, Durandal, and JavaScript Templates...

  • Pingback: Nova Tech Consulting Blog | Get Angular, Durandal, and JavaScript Templates with SideWaffle

  • mg1075

    Probably worth noting that SideWaffle will not install in VS 2013 Express, as noted elsewhere.

    https://github.com/ligershark/side-waffle/issues/49

%d bloggers like this: