I had the very cool experience of being invited to be part of the MS Dev Show, a Podcast focused on Microsoft Developer Technologies hosted by Carl Schweitzer and Jason Young. I enjoy the show when I get to a chance listen and, truth be told, Jason was one of the inspirations for me switching my blogging engine to Docpad. That means I was pretty excited to be invited on!

The Podcast mostly focused on AngularJS, but we talked a bit about some of the upcoming Visual Studio changes and ASP.NET vNext, which is going to be really cool for Microsoft Developers. You can get a hint of what is coming on one of my recent blog posts Running ASP.NET vNext on OS X.

You can listen to the show at http://msdevshow.com/2014/12/angularjs-with-john-ptacek/. Wished I would have sounded a bit more eloquent for everyone, but kind of sleep deprived.

Thanks Carl and Jason!

Santa Claus is Coming to Town!! All the geeks get pretty excited for Santa’s arrival to see what will be awaiting us under the tree each year. However, sometimes the things geeks are most excited about aren’t ready for Christmas. We can read about them, maybe see some snippets or even get a preview.

For example, there is a new Star Wars movie coming, but that will not be out until December of 2015, right before Santa’s next visit. There are also a good percentage of geeks getting excited for the release of Apple Watch, which will be out sometime in early 2015, so it won’t be waiting under the Christmas tree this year either.

However, one of the things I am most interested in, workwise, while it is arriving in 2015, is available to kick the tires on now. The early preview present under the tree is running .NET on non-Microsoft platforms like the OS X or Linux. So while Santa will not be putting the final version under my tree this year, we can at least start getting ready.

November and December are always exceedingly busy times, but it is worth taking a moment to realize that something huge happened. Microsoft has opened sourced their .NET framework. I am a big fan of Microsoft’s C# language. I think, for most developers, it is a great and productive way to get work done. Having this option available on Linux and Mac machines is going to be great. Throw in ASP.NET MVC and Web API coming along too, and 2015 will be awesome one for developers.

Scott Hanselman has a blog post where he gets into the details about the open sourcing of .NET and there is a lot to get into. However, but for now, let us just build an ASP.Net vNext app and jump into it like a kid opening presents on Christmas morning!

We are going to create an ASP.NET vNext app to countdown several things… the days until Christmas, the days until the release of the next ASP (assuming Build 2015) and finally, the days until new Star Wars movie.

How do we jump in? These steps are mostly identified on the ASP.NET GitHub page (I know, crazy, right. Microsoft documenting stuff on GitHub!?!?) at https://github.com/aspnet/home. We can still step through.

First, because vocabulary is important…. Since the codename for the next version of ASP.NET vNext is Katana, Microsoft is going all in with the letter K. So many of the tools utilize the letter K. A quick run through of the most important.

• KRE is the K Runtime Environment. This is the code that bootstraps your ASP.NET vNext application; compilers, Common Language Runtime (CLR), etc.

• KVM is the K Version Manager. It will install appropriate version of the KRE. You will be able to have multiple ASP.NET vNext runtimes and applications running on your machine.

• KPM is the K Package Manager. This will download packages needed for your application to run.

First thing to do is ensure you have Homebrew setup on your OS X machine. If you are doing development work, you most likely have this already, so we will assume you are ready to go.

Next, we need to install the ASP.NET vNext runtime environment (KRE). This is done by downloading appropriate git repositories via a bash script.

brew tap aspnet/k

Similar commands are used for other platforms such as Linux and Windows, which uses PowerShell.

The next step is to install KVM (The K Version Manager), which is the runtime manager. It is responsible for getting the runtime and enables multiple different runtimes on the same machine. I have seen some mention of issues using KVM on OS X with different shells, like zsh. I use the Bash shell and have not run into issues. To install KVM type

brew install kvm

Next we run a script to setup our environment variables, etc

source kvm.sh

We have pretty quickly setup and downloaded the environment to run ASP.NET vNext apps on an OS X machine, but, we have no code! Thankfully, someone wrote an ASP.NET MVC Project Generator for Yeoman. Yeoman, for those of you not familiar, is a tool to generate scaffolding for your projects. It utilizes Node.js.

So to get all of this working, you are going to need to have Node.JS and the Node Package Manager (NPM) installed. Again, since we are talking developers, you probably already have all of this. The next step then is to install Yeoman, using NPM. From your Bash shell we will install Yeoman first

npm install –g yo

Next, we install the generator for ASP.Net

npm install -g generator-aspnet

Next step, since we have all of the tools we need installed and downloaded, we can generate our application. This is done by running Yeoman from the bash shell type by typing

yo aspnet

We have the option of choosing a console application, a Web App, MVC app or Nancy ASP.NET app. We choose MVC application and provide a name

And our application gets generated

And we can take a look and see our directory structure, with many of the controllers and views most of us know from our MVC projects.

For those of you well versed in ASP.NET, a couple of pretty interesting things to note. First, no solution file! Second, no Project file! Most of the Visual Studio generate file constructs are gone. Similar to a Node.JS application, there is a json file outlining the dependencies needed for an application, as opposed to the Solution and Project files of Visual Studio. Very cool.

To build and run the application, we use the commands shown in the previous screen shot of the bash shell

kpm restore, which gets the packages for your application

kpm build, builds the application

k kestrel, fires up the web server to serve the pages

By using the kestrel web server we are actually firing up Mono, the open source version of the .NET framework. We access the location locally on port 5004 (http://localhost:5004/)

So that is all kind of Christmas goodies Santa has for us, what is the most impressive programming language for business development being able to run on non-Microsoft platforms. When you start thinking about integrating in with some popular Linux tools like Docker, it doesn’t take a lot to realize things will be a lot different on the .NET stack when Santa is coming back to town in 2015. Plus, new Star Wars!

You can download this code from a GitHub repository I have setup at https://github.com/jptacek/ChristmasCountdown

Note: When running the web site, it will use the same port for the web server. I usually exit the process (k kestrel) by typing Ctrl-Z. However, I need to list the processes using PS and then kill, by typing kill -9 , the process that is mono. That way I can restart.

UPDATE (December 17, 2014) - Links updated to include link to Microsoft post on Yeoman

UPDATE 2 (December 18, 2014) - Thanks to Sayed Hashimi for helping clean up some typos with case issues. https://twitter.com/sayedihashimi/status/545720905171603456

Links

• ASP.NET MVC Project Generator for Yeoman - http://hassakarn.com/2014/02/07/asp-net-mvc-project-generator-for-yeoman/
• Yeoman - http://yeoman.io/
• ASP.NET GitHub repo - https://github.com/aspnet/home
• OmniSharp.NET - http://www.omnisharp.net/
• GitHub for this Code - https://github.com/jptacek/ChristmasCountdown
• Microsoft on Yeoman for ASP.NET - http://blogs.msdn.com/b/webdev/archive/2014/12/17/yeoman-generators-for-asp-net-vnext.aspx

This blog post originally appeared at Skyline Technologies as part of their 12 Blogs of Christmas series

AngularJS is a Javascript MVC framework from the fine folks over at Google. The focus of Angular is building complex HTML based client applications. Its design philosophy is data first, where your data will be updating the DOM. Contrast this to a framework like JQuery where the DOM will update your data.

This is the tenth (I know, right!!?!!?!) in a series of posts on AngularJS where we are using Chemistry data from the periodic table to help us understand the framework. The others posts are

1. AngularJS - Introduction
2. AngularJS - Introducing AngularJS Controllers
3. AngularJS - Introducing NG-Repeat
4. AngularJS - More with NG-Repeat
5. AngularJS - Image Binding
6. AngularJS - Introducing Templates
7. AngularJS - Introducing Routing
8. AngularJS - Introduction to Services
9. AngularJS - Introduction to Directives
10. AngularJS - Further with Directives
11. AngularJS - Best Practices
12. AngularJS - CSS Animations

Note: AngularJS does not allow for more than one ng-app directive. When I have multiple angular posts on the home page of my blog, only one application will work. I need to refactor the entire site to account for this. All of that to say this, you are best clicking on a single article so you can see the pages in action.

Previously, we took an introductory look at directives. This time we will go a bit deeper.

In our previous example, we displayed data from the periodic table, specifically, the atomic weight, atomic number and element name. Our data source, has a lot more information, such as boiling and melting points, density, etc. In this example, we will expand the directive by enabling a click event to display expanded data about the selected element.

The first thing to mention is scope. Scope, as we have already seen, is the magical tool that Angular uses to communicate between your view and services, etc. By default, a directive does not get a new child scope, but uses the parent scope. So, in our case, when the directive is inside a controller, it will use the controller's scope.

To get access to the scope, we can use the link function. The link function gets called every time the element gets bound to the data in the $scope object. In general, link is used to manipulate the Document Object Model (DOM), either by adding event listeners or updating the DOM.

The link function takes three arguments:

• scope - Scope gets passed to the directive. This is generally the scope of the calling controller
• elem - The element on which the directive is derived. In our case, it will be the template markup for the chemical element
• attrs - Attributes associated with our element

It is worth noting that AngularJS ships with jQLite, which is a subset of the full jQuery library. If you are using full jQuery within your web app, then that will be used instead. All of that to say this, you access DOM elements similarly as you do in jQuery, and since jQuery is already wrapped, you don't need to use your old school $ for access.

In our example, we are going to use the link function to manipulate the DOM. First, let us take a look at the JavaScript

chemistryApp.directive('periodicChartElement', function (chemistryService) {;
    return {
        restrict: 'E',
        templateUrl: './template/periodic-template.html',
        link: function (scope, elem, attrs) {
            elem.bind('click', function() {
                // Change state
                scope.$apply(function(){
                    scope.fullElement = !(scope.fullElement);
                });

            });
            elem.bind('mouseover', function() {
                elem.css('cursor', 'pointer');
            });

        },
        scope:{
            element:'='
        }

    }

});

With the exception of adding the link function, things are pretty similar to before. The link function does several pieces of functionality that are worth nothing though.

First, we bind a click event to our chemical element. When that click event is called, we update a boolean variable on our scope, which is our parent scope from the calling controller and set it to the opposite. Second, we also bind a mouseover event to manipulate our CSS to change the cursor to a pointer. As you can see, this is an elegant way to add event behavior to our directive.

Our template has now also been updated. The boolean scope variable that we update on the click event, fullElement is used to show one of two different HTML "paths" in our template, one shows a small subset of data, the other a larger subset of data from the periodic table.

<div class='periodicCell {{element.cssForDisplay}}' data-ng-hide="fullElement">
    <div class="atomicNumber">{{element.atomicNumber}}</div><div class="atomicWeight">{{element.atomicWeight}}</div>
    <div class="atomicSymbol">{{element.symbol}}</div>
    <div class="centerElementDisplay">{{element.name }}</div>
</div>
<div class='periodicPop {{element.cssForDisplay}}'  data-ng-show="fullElement">
    <div class="atomicNumberPop">{{element.atomicNumber}}</div>
    <div class="atomicWeightPop">{{element.atomicWeight}}</div>
    <div class="atomicSymbolPop">{{element.symbol}}</div>
    <div class="density">{{element.density || '-'}}</div>
    <div class="meltingPoint">{{element.melting + 273.15|number:2}}</div>
    <div class="boilingPoint">{{element.boiling + 273.15|number:2}}</div>
    <div class="elecConfig">{{element.elecconfig }}</div>
    <div class="elctroNeg">{{element.electronegativity}}</div>
    <div class="centerElementDisplayPop">{{element.name }}</div>

</div>

It is also worth talking a bit about scope in directives. As we mentioned earlier, by default, you are binding to the parent scope of the controller. In many instances this will work well, but if you want to display your directive more than once on a page, you would need a controller for each directive. That is no good.

AngularJS introduces the ability to create an isolated scope, which is what we are doing in our example. This allows us to use our directive multiple times on the same page. There are binding options in setting up the directive variables that we should briefly touch on.

The various options for setting up variables in the directive scope are:

• = - Set up two way binding between the parent scope and our isolated scope
• @ - Set up one way binding between the parent scope adn the isolate scope
• & - Allows to bind to parent scope functions

Dan Wahlin has done an outstanding job on his blog of digging in deeper into directives and scope. His articles are at

1. Creating Custom AngularJS Directives Part I – The Fundamentals
2. Creating Custom AngularJS Directives Part 2 – Isolate Scope
3. Creating Custom AngularJS Directives Part 3 - Isolate Scope and Function Parameters
4. Creating Custom AngularJS Directives Part 4 - Transclusion and Restriction
5. Creating Custom AngularJS Directives Part 7 – Creating a Unique Value Directive using $asyncValidators

Parts 5 and 6 should be coming too.

We also have updated our page to show multiple elements to demonstrate a single directive interacting with unique scope. It is not very robust, so picking items at the end, aka Curium, will cause some issues.

So to recap, with directives we have created our HTML markup element periodic-chart-element where we can put multiple elements onto a single page by updating our directive to use its own version of scope.

It has been several months since my last Angular blog post. More are coming. I have a plan for all of this, ultimately we will create an application that is the periodic table, done AngularJS style.

You can either visit http://angularperiodic.azurewebsites.net/ to see the code in action and as always find the code out on GitHub.

Thanks for reading!