Deborah's Developer MindScape

         Tips and Techniques for Web and .NET developers.

April 28, 2016

Angular 2: Getting Started With Visual Studio 2015

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options.

  • Do we use TypeScript? If so, do we use a TypeScript project in Visual Studio 2015?
  • Do we use a simple “Web Site”?
  • Do we use ASP.NET? If so, ASP.NET version 4.6 (current version) or ASP.NET Core 1.0 (previously known as ASP.NET version 5.0 and currently in beta)
  • Do we use MVC? If so, MVC 5 (current version) or MVC 6 (currently in beta)?
  • Do we use more JavaScript-ish tools such as npm? Or try to do everything with Visual Studio tools?
  • Do we use the command line? Or try to do everything within the Visual Studio 2015 IDE?
  • And so on …

The plan is to cover several of these options, starting with the most basic steps required to use Visual Studio 2015 with Angular 2.

Here are the links to the options covered so far:


April 4, 2016

“Angular 2: Getting Started” Problem Solver

Filed under: Angular 2,JavaScript @ 12:25 pm
Tags: , ,

This blog post supports the sample code for the “Angular 2: Getting Started” course on Pluralsight, identifying common issues along with their solutions. This course was updated on October 18, 2016 for the final release of Angular 2.

The sample code can be found here: The folders in this repo include:

  • APM – Start: The starter files. Use this as a starting point to code along with the course.
  • APM – Final: The completed files, updated to Angular 2 Beta 15. This code matches with the demos presented in the course.

Please post to the Discussion tab for the course if you experience an issue not found in this post. Thanks!

npm Issues

Problem: Error when using `npm install`.

There are several possible solutions depending on the source of your problem.

Solution 1: Ensure you have a current version of npm installed. The course was tested with node v6.5.0 and npm 3.10.6. If your version is significantly older, it may not work. Use node –v and npm –v to check your versions. To install a newer version of both tools, use this link:

Solution 2: It may be a permissions problem. Try the steps found here:


Setting Up Behind a Corporate Web Proxy

Problem: Error in installing typings when performing `npm install`. Error may be something like “Failed at the product-management@1.0.0 postinstall: ‘typings install’

Solution 1: npm may not be using your globally defined proxy setting. Try adding a .typingsrc file with the value: "proxy="

Solution 2: Try manually installing the typings by running the following command at the command prompt: `npm run typings install`

See these posts for more information:

NOTE: If the proxy requires authentication (which is usually true), please use this format

$ npm config set proxy http://login:pass@host:port
$ npm config set https-proxy http://login:pass@host:port

NOTE: If you do not have access to the proxy URL and port, you can install the missing typing manually following the steps posted by Joe Ballard in the comments for this post below. Note however that with Angular 2 final you need core-js and node NOT es6-shim. See the typings.json file for details.


Twitter Bootstrap Does Not Work Properly

Problem: If you add component features to the sample application using Twitter Bootstrap, they may not work properly. For example, if you add the Twitter Bootstrap styles to display a dropdown menu, the menu does not drop down.

Solution: To keep the sample application focused on the basics of Angular 2, I only added the Twitter Bootstrap styles, not its components. To use any of the Twitter Bootstrap components (such as a dropdown menu), you need jQuery and the Bootstrap JavaScript library

1. Modify the package.json file to include: "jquery": "2.2.3" (or whichever version you require)

2. Use the following command to update the packages: npm update

3. Include the following in index.html:

  <!–  Support Bootstrap Components –>
   <script src="node_modules\jquery\dist\jquery.min.js"></script>
   <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>  

[[As provided by Scott Simpson]]

Why Angular? Why Angular 2?

Filed under: Angular 2,JavaScript @ 10:52 am
Tags: , ,

Why Angular and not some other JavaScript framework? (And there are lots of JavaScript frameworks out there!)


· Angular makes our HTML more expressive. It powers up our HTML with features such as if conditions, for loops and local variables.

· Angular has powerful data binding. We can easily display fields from our data model, track changes, and process updates from the user.

· Angular promotes modularity by design. Our applications become a set of building blocks, making it easier to create and reuse content.

· And Angular has built-in support for communication with a back-end service. This makes it easy for our Web applications to integrate with a backend service to get and post data or execute server-side business logic.

No wonder Angular is so very popular with Web developers!

With so many developers already using Angular 1, why do we need an Angular 2?


· Angular 2 is built for speed. It has faster initial loads, faster change detection and improved rendering times.

· Angular 2 is modern. It takes advantage of features provided in the latest JavaScript standards and beyond such as classes, modules, and decorators. And it leverages Web Component technologies for building reusable user interface widgets. Yet it supports both green field and legacy browsers: Edge, Chrome, Firefox and Internet Explorer back to IE 9!

· Angular 2 has a simplified API. It has fewer built-in directives to learn, simpler binding, and a lower overall concept count.

· And Angular 2 enhances our productivity to improve our day-to-day workflow by providing a consistent pattern for writing our code.

For more information on Angular 2, check out my “Angular 2: Getting Started” course from Pluralsight.

Angular 2: Getting Started

Filed under: Angular 2,JavaScript @ 10:43 am
Tags: , ,

Whether you are new to Angular or new to Angular 2, you’re going to want to come up to speed quickly with Angular 2’s components, templates, and services. My latest Pluralsight course “Angular 2: Getting Started” provides the basics you need to get started building an Angular 2 application.


The course covers the following topics:


o We start with first things first. We’ll select a language and editor to use. Then walk through how to set up an Angular 2 application.

o Next we’ll dive into components. We’ll build the App component using a simple template and minimal component code and metadata. Here the focus is on the code including the what, why, and how.

o We’ll see how to build the user interface for our application using templates, interpolation, and directives.

o We’ll power up that user interface with data binding and nicely format our data with pipes.

o Next we’ll tackle some additional component techniques. We’ll define interfaces, encapsulate styles, and leverage lifecycle hooks to build better components.

o We’ll see how to build a component designed to be nested within other components. And how to communicate between the nested component and its container.

o We often have logic or data that is needed across components. We’ll learn how to build services specifically for this purpose and use dependency injection to inject those services into the components that need them.

o Most Web applications need to communicate with a back-end server to get or post data and to execute back-end business logic. In this module, we’ll leverage http and observables to retrieve the data for our application.

o Our sample application displays multiple views. We’ll see how to set up routing to navigate between those views.

We’re covering a lot of territory. And by the end of our journey, we’ll have a simple, but fully operational Angular 2 application that you can use as a reference for your own development.


February 24, 2016

Understanding C# Delegates

Filed under: C#,LINQ @ 12:10 pm

Delegates are sometimes seen as an ethereal concept, bodiless and hard to grasp. But they don’t have to be that way.

In my latest Pluralsight course: “C# Best Practices: Collections and Generics“, I walk through what a delegate is and how to understand them.


A delegate is simply a type that represents a reference to a method with a specific parameter list and return type. The primary purpose of delegates is to pass methods as arguments to other methods.

Here is an example of a method that needs a delegate:

var filteredList = vendors.Where(???);

In the above line of code, we use the LINQ Where method to filter a list of vendors. The Where method needs a selector defining the logic to be used for the filtering. Do we want to filter the list of vendors by some keyword in their name? Or by how much they currently owe us? Or by the product types that they sell? Somehow we need to specify this logic. We do that with a method.

What does that method need to look like? In Visual Studio, Intellisense shows us the signature of the delegate method that it needs. For the LINQ Where method, it is:

vendors.Where(Func<Vendor, bool> predicate)

Let’s break down what Intellisense is telling us here:

  • The “Func” specifies that the method we create has to return a value. If the method does not require a return value, the Intellisense will instead say “Action”.
  • The first generic parameter (Vendor in this example) is the first parameter to the method we create.
  • If there is a return value, the last generic parameter (bool in this example) defines the return value type.

So looking at the example, we know we need to create a method with a bool return value that takes one parameter of type Vendor.

We can then create a method such as this:

private bool FilterCompanies(Vendor v)
   return v.CompanyName.Contains(“Toy”);

This method takes in a Vendor object and returns a Boolean. Specifically, it returns true if the vendor’s company name contains “Toy”. Otherwise it returns false, thereby specifying how we want the vendor list filtered.

We can then pass this method as a delegate to the Where method:

var filteredList = vendors.Where(FilterCompanies);

The resulting filteredList contains the list of vendors whose company name contains “Toy”.

The problem with this approach is that we end up with little methods all over that simply define these delegates. There is another way. We can use Lambda Expressions. Lambda Expressions are basically a short cut syntax for these little methods.

So instead of this:

var filteredList = vendors.Where(FilterCompanies);

private bool FilterCompanies(Vendor v)
   return v.CompanyName.Contains(“Toy”);

We can simply type this:

var filteredList = vendors.Where(v => v.CompanyName.Contains(“Toy”));

For more information, check out: “C# Best Practices: Collections and Generics” from Pluralsight.


January 28, 2016

C# Best Practices: Collections and Generics

Filed under: C#,Lambda Expressions,LINQ @ 12:27 pm

The next in my series of “Best Practices” courses was published today in the Pluralsight library: “C# Best Practices: Collections and Generics“.

This course starts with the classic collection type: arrays. Then it moves on to generics … that challenging to explain topic that often shows up even in the most basic of beginner courses … because without generics we don’t have a good way to work with collections of things. And most applications require working with collections of things.


We move on to cover generic lists and generic dictionaries. Then we dive deeper into generic collections, looking at the interfaces they implement and how to leverage those interfaces as method parameters and return types.


Lastly, we look at Language Integrated Query (or LINQ) for filtering, shaping, ordering, grouping, aggregating, or locating elements in a collection. Along the way we cover extension methods, delegates, and Lambda expressions.



January 26, 2016

Creating a Filter Pipe in Angular 2

Filed under: Angular 2,AngularJS @ 4:23 pm
Tags: ,

Angular 1.x has filters. Angular 2 has pipes, which fulfill a similar purpose. However, there are some key filters in Angular 1.x, such as the “filter filter”, that don’t have an equivalent Angular 2 feature. This post details how to build a filter pipe in Angular 2.

Angular 1.x

In Angular 1.x, we define an input box for a user to enter filter text. We then filter a list of items by that text with one simple clause as shown below:

<div class=”row”>
    <div class=”col-md-2″>Filter by:</div>
    <div class=”col-md-4″><input type=”text” ng-model=”listFilter” /></div>

<div class=”table-responsive”>
    <table class=”table”>
            <tr ng-repeat=”movie in vm.movies | filter : {title:listFilter}“>
                <td>{{ movie.title}}</td>
                <td>{{ movie.director }}</td>
                <td>{{ movie.mpaa | uppercase}}</td>

Easy breezy.

Angular 2

Angular 2 provides pipes for this same purpose. But with no “filter” pipe in Angular 2, we have to build our own pipe component.

Converting the above code into Angular 2 results in:

<div class=”row”>
    <div class=”col-md-2″>Filter by:</div>
    <div class=”col-md-4″><input type=”text” #listFilter (keyup)=”0″ /></div>

<table class=”table”>
        <tr *ngFor=”#movie of movies | movieFilter:listFilter.value” >
             <td>{{ movie.title}}</td>
            <td>{{ movie.director }}</td>
            <td>{{ movie.mpaa | uppercase}}</td>

Hmmm. That does not look that different!

A few things you’ll notice here:

  • The local variable, listFilter, is now prefixed with a hash symbol (#) to explicitly identify it as a local variable.
    • This variable defines an HTML element, so to obtain the value, we need to access listFilter.value.
  • The (keyup)=”0″ syntax sets up an event listener for the keyup event. There is no event handler needed for this event, so it is just set to “0”.
  • The filter clause is defined here as movieFilter and we are filtering on the value of the listFilter variable. So our custom pipe is used just like the built-in pipes.

The key is creating the movieFilter pipe. In Angular 1.x, the “filter filter” was built in. In Angular 2, there are some built-in filters, but not a general list filter. So we need to build our own.

The purpose of a pipe is to take in a value, filter that value, and return the filtered result. In this example, the value we are taking in is a list of movies. We filter the movies to only those with a title containing the user-entered text. And we return the filtered result.

Here is the code for the movieFilter. The description follows.

import {Pipe, PipeTransform} from ‘angular2/core’;

    name: ‘movieFilter’
export class MovieFilterPipe implements PipeTransform {

    transform(value: any, args: string[]): any {

       let filter = args[0].toLocaleLowerCase();
       return filter ? value.filter(movie=> movie.title.toLocaleLowerCase().indexOf(filter) != -1) : value;

1) First we import the Pipe and PipeTransform. This is required to build any pipe.

2) We define a Pipe decorator. This tells Angular that this code is a pipe component. And we give the pipe a name: movieFilter. This is the name used in the HTML as part of a template expression.

3) We create a class that provides the processing for our pipe. We export the class so it can be imported by our movie component. And we implement the PipeTransform interface for our tooling. Note that implementing this interface is optional. With the @Pipe decorator, Angular already expects to find a transform method.

4) The PipeTransform interface requires implementing a transform method. This method has two parameters:

  • value: The value being filtered. In our example, this is the list of movies.
  • args: An optional array of parameters, one for each parameter passed to the pipe. In our example, we are passing listFilter.value.

5) We then define a result array which will contain the movies that match the filter criteria.

6) We create a variable to hold the passed in parameter. We use toLocaleLowerCase() so that the filtering won’t be case sensitive.

7) We check the filter variable. If there is no filter defined, we simply return the original value. No need to iterate the list. Otherwise we use the JavaScript filter function to filter the list and return it.

NOTE: This code could be simplified using regular expressions.

Lastly, we need the component:

import {Component} from ‘angular2/core’;
import {MovieFilterPipe} from ‘../common/movieFilter.pipe’

    selector: ‘mh-movie-list’,
    templateUrl: ‘app/movies/movieListView.html’,
    styleUrls: [‘node_modules/bootstrap/dist/css/bootstrap.css’],
    pipes: [MovieFilterPipe]
export class MovieListComponent {


This is the component associated with the movie list view. The two critical steps for the pipe are:

1) Import the MovieFilterPipe.

2) Identify the pipe using the @Component decorator’s pipes array. This provides the list of all custom pipes available for the template.

For more information on Angular 1.x vs Angular 2, see “Angular 1.x to Angular 2 Quick Reference“.

For a sample application, see “Angular: 3 Flavors” which has the same application in Angular 1.x, Angular 1.x with TypeScript, and Angular 2.


January 25, 2016

Angular 1 to Angular 2 Quick Reference

Filed under: Angular 2,AngularJS @ 5:04 pm

The post that was here has been edited and re-published here:


January 21, 2016

Dividing a C# Application into Components

Filed under: C# @ 2:52 pm
Tags: , ,

A good architecture divides an application into components:

  • We build UI classes in the UI layer
  • Domain entity classes in the business logic layer
  • Data access classes in the data access layer.
  • And library classes in the common library component.

The content for this blog post was taken from the Pluralsight course entitled “C# Best Practices: Improving on the Basics“. Check out this course for more information.


UI Layer

When we add a form to a UI component, such as a Windows Forms, WPF, or a Web Forms project, Visual Studio automatically creates a form class for us. So our application will have one class for each form. The form class should contain code that:

  • Responds to form events by calling the business logic layer to perform needed processing.
  • Includes error handling for any errors that occur.

There is another type of class that you may find in the UI layer, and that is a V/M or View/Model class. A View/Model manages the data and interaction for a single form or view. A View/Model class is often used in cases where the user interface can bind directly to data defined in the View/Model class, such as with WPF.


Business Logic Layer

When defining classes for the business logic of an application we can start by defining a domain model. A domain model identifies the basic business entities to be managed by the application and how they are related.


For example, if Acme Inc needs a feature to order more product inventory from a vendor, we can define a domain model that includes

  • An order.
  • The product to order. So the order “has a” product.
  • And the vendor from whom the company buys that product. So the product “has a” vendor.

We can use the domain model as a starting point for defining the classes in the business logic component. We’ll need a class to manage each order, a class to manage product information, and a class that manages each approved vendor.

Defining the domain model helps us to consider all of the different bits of logic that the application will require and organize that logic into appropriate classes.

Also in the business logic layer we may want Repository classes. Repository classes are responsible for managing the in memory repository of data for the application. For example, when the user requests display of a specific vendor and the products purchased from that vendor, the Repository classes are responsible for getting that data, tracking the state of that data (for example, whether it has been changed) and saving that data using the data access layer.


Data Access Layer

The classes in the data access layer depend on the data access strategy you are using. If you are using Entity Framework, you may not need any classes in this layer because Entity Framework defines them for you.

Common Library Component

We can determine whether specific functionality goes into a library component by looking at the other components. If the functionality is common across layers (or across applications), then it may be better in a library component. For example, code that provides logging, or sends out email.



When is it appropriate to divide an application into components and define classes such as these? Maybe always? Even if we are developing a prototype, way too often that prototype becomes the basis of our real application.

By breaking the application into a set of components early on in the development cycle we start with a strong foundation that can support the application as it grows and changes over time.


September 4, 2015

Use TypeScript to Prepare for Angular 2

If you are developing now in Angular 1.x with an eye toward Angular 2, the best thing you can do is to write your Angular code with TypeScript. Angular 1.x code you write in TypeScript today will look very similar to code you will write in Angular 2 tomorrow (not literally tomorrow!).

At a recent Angular conference, the members of the Angular team from Google stated that one of the best ways to code now in Angular 1.x in preparation for Angular 2 is to use TypeScript.

What is TypeScript?


TypeScript is an open-source programming language that is:

  • A superset of JavaScript
    • Including all of the current JavaScript syntax, plus much more.
    • Any valid JavaScript code is valid TypeScript code. And as such, TypeScript works with all existing JavaScript frameworks, including Angular.
  • TypeScript transpiles to plain JavaScript
    • So we can deploy the resulting JavaScript files for our Angular application just as we do now.
    • And the resulting files execute in any of today’s browsers on any OS.
    • Plus there is no runtime overhead of using TypeScript because all of the types evaporate and the TypeScript-only syntax is replaced … leaving only pure JavaScript.
  • TypeScript allows us to define strong types
    • Editor tooling, such as the new Visual Studio Code editor, use these types for static type checking of our code during development
    • This makes development, debugging, and refactoring easier.
    • Plus it clarifies the developer’s intent. For example, we can define that a function is meant to take in a string. Not a number, not an object, just a string.
  • And TypeScript provides class-based object-oriented programming techniques.
    • So we can optionally think of our code in terms of objects with properties and methods.
    • And the TypeScript compiler transpiles the classes into JavaScript functions.

Here is the code for an Angular controller, written using the class-based object-oriented programming techniques available in TypeScript.


To learn more about using Angular with TypeScript, check out the Pluralsight course: “Angular with TypeScript



« Previous PageNext Page »

© 2017 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs