Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

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.

image

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.

image

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.

image

Enjoy!

January 26, 2016

Creating a Filter Pipe in Angular 2

Filed under: AngularJS,Angular 2 @ 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>

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

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>
</div>

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

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’;

@Pipe({
    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’

@Component({
    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.

Enjoy!

January 25, 2016

Angular 1.x to Angular 2 Quick Reference

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

There are many differences between Angular 1.x and Angular 2. This post provides a quick reference to some common Angular 1.x syntax and its equivalent in Angular 2.

NOTE: This post is a work in progress and likely to change.

Template Basics

Templates are the user-facing part of an Angular application written in HTML The following are some of the key Angular 1.x template features with the equivalent template syntax in Angular 2.

Angular 1.x Angular 2
bindings: {{}}

<h2 class=”title”>{{vm.title}}</h2>

In Angular 1.x, the binding is prefixed with the ng-controller directive alias, vm, because we had to be specific about the source of the binding.

bindings: {{}}

<h2 class=”title”>{{title}}</h2>

In Angular 2, the context of the binding is implied and is always the associated component. So it needs no reference variable.

filters: |

<td>{{ movie.releaseDate | date }}</td>

pipes: |

<td>{{ movie.releaseDate | date }}</td>

To format output in our templates, we use filters in Angular 1.x. Those filters are called pipes in Angular 2. Many of them work the same as the Angular 1.x filters, but some are missing, some work slightly different, and we have some new ones. See the heading “Pipes” below for more information.

local variable: ng-model

<input type=”text” ng-model=”listFilter” />
<h3>Movies filtered by: {{listFilter}}</h3>

In Angular 1.x, we could define variables “on the fly” in the HTML. Angular would then add these to the scope.

local variable: #

<input type=”text” #listFilter (keyup)=”0″ />
<h3>Movies filtered by: {{listFilter.value}}</h3>

In Angular 2, we have true local variables that are explicitly defined using the hash (#) symbol.
NOTE: The local variable, listFilter, in this example is a reference to the input element as is of type HTMLInputElement. To display its value, use listFilter.value.

 

Template Directives

Angular 1.x provided many built-in directives. Many of these are replaced or are no longer needed in Angular 2. The following are some of the key Angular 1.x directives and the equivalent feature in Angular 2.

Angular 1.x Angular 2
ng-app

<body ng-app=”movieHunter”>

None

The template no long defines the Angular application. Rather, you instantiate an Angular application by explicitly specifying a component to use as the root component for your application using the bootstrap() method.

By convention, this code is in a bootstrap.ts file:

import {bootstrap} from ‘angular2/platform/browser’
import {AppComponent} from ‘./app.component’

bootstrap(AppComponent);

ng-click

<button type=”button” class=”btn btn-info”
                     ng-click=”vm.toggleImage()”>
  Show Poster
</button>

Notice that the function name is prefixed with the ng-controller directive alias, vm.

Event binding: ()

<button type=”button” class=”btn btn-info”
                      (click)=”toggleImage()”>
  Show Poster
</button>

The Angular 1.x ng-click and other event-based directives do not exist in Angular 2. Rather, you use event bindings by defining the name of the event within parenthesis. The function name is basically the same, it just does not have the controller alias prefix.
NOTE: To follow current Angular practices, you may want to prefix the method with “on”. So in this case: onToggleImage().

ng-controller

<div class=”panel panel-primary”
     ng-controller=”MovieListCtrl as vm”>

None

The template no longer specified its associated controller. Rather, the component specifies its associated template.

In the component’s TypeScript code:

@Component({
    selector: ‘mh-movie-list’,
    templateUrl: ‘app/movies/movieListView.html’
})

ng-hide

See ng-show.

hidden property binding

See ng-show.

ng-if

<div class=”row” ng-if=”listFilter”>
    <h3>
        Movies filtered by: {{listFilter}}
    </h3>
</div>

*ngIf

<div class=”row” *ngIf=”listFilter”>
    <h3>
    Movies filtered by: {{listFilter.value}}
    </h3>
</div>

The if statement works the same in Angular 2, only its syntax is slightly different. The (*) makes it clear that the ngIf is a structural directive and that it modifies the HTML layout.

ng-repeat

<tr ng-repeat=”movie in vm.movies”>
  <td>{{ movie.title}}</td>
  <td>{{ movie.director }}</td>
</tr>

Notice that the controller property name is prefixed with the ng-controller directive alias, vm.

*ngFor

<tr *ngFor=”#movie of movies”>
  <td>{{ movie.title }}</td>
  <td>{{ movie.director }}</td>
</tr>

The ngFor is a repeater directive that repeats the associated HTML element. In this example, it repeats the table row (or tr) element. This works similar to the ng-repeat directive from Angular 1. The (*) makes it clear that the ngFor is a structural directive and that it modifies the HTML layout.

Notice that this syntax uses the # symbol to clearly define the local variable. And uses “of” instead of “in”.

ng-show

<div class=”row” ng-show=”listFilter”>
    <h3>Movies filtered by: {{listFilter}}</h3>
</div>

hidden property binding

<div class=”row” [hidden]=”!listFilter.value”>
    <h3>Movies filtered by: {{listFilter.value}}</h3>
</div>

Instead of the Angular 1.x directives ng-hide and ng-show, we can use property binding directly to the element’s hidden property by placing the name of the property in square brackets.

NOTE: The local variable, listFilter, in this example is of type HTMLInputElement. To display its value, use listFilter.value.

ng-src

<img ng-show=”vm.showImage”
     ng-src=”{{movie.imageurl}}”
     title=”{{movie.title}}”>

src property binding

<img [hidden]=”!showImage 
       [src]=”movie.imageurl”
       [title]=”movie.title”>

Instead of the specialized Angular 1.x ng-src property, we can now bind directly to the src property using property binding. Place the property name in square brackets to bind to a property.

 

Pipes

Pipes provide formatting for data in our template, similar to the Angular 1.x filters. Below is a list of the Angular 1.x filters and their associated Angular 2 pipes. In addition, we can build custom pipes in Angular 2.

Angular 1.x Angular 2
currency

<td>{{ movie.price | currency }}</td>
currency

<td>{{ movie.price | currency:’USD’:true }}</td>

Formats a number as local currency.
– The first parameter is an optional currencyCode. This is the ISO 4217 currency code.
– The second parameter is an optional Boolean value indicating whether the currency symbol should be displayed. If true, it displays the currency symbol. If false, it displays the currency code. The default is false.

date

<td>{{ movie.releaseDate | date}}</td>

date

<td>{{ movie.releaseDate | date}}</td>

Formats a date value to a string based on the requested format. As with Angular 1.x, you can optionally specify a date format, such as:

<td>{{ movie.releaseDate | date: ‘yyyyMMdd’}}</td>

Note: String dates in a JSON file of the form: “2001-12-19T00:00:00” throw an exception. This worked fine in Angular 1.x and does not work in Angular 2. As a work around:

<td>{{ convertToDate(movie.releaseDate) | date}}</td>

And in the associated component:

convertToDate(dateString): Date {
    return new Date(dateString);
}

filter None

Filtering should now be done with code in the component. If the filtering is reusable, consider building a pipe. See the post: Creating a Filter Pipe in Angular 2 for more information.

json

<pre>{{movie | json}}</pre>

json

<pre>{{movie | json}}</pre>

Transforms an input using JSON.stringify. Useful for debugging.

limitTo None
lowercase

<td>{{ movie.mpaa | lowercase}}</td>

lowercase

<td>{{ movie.mpaa | lowercase}}</td>

Transforms the text to lowercase.

number

<td>{{ movie.starRating | number}}</td>

number

<td>{{ movie.starRating | number:’1.1-2′}}</td>

Formats a number using the locale.
– The first number represents the minimum number of integer digits (before the decimal in the USA). Defaults to 1.
– The second number is the minimum number of fractional digits (after the decimal in the USA). Defaults to 0.
– The third number is the maximum number of fractional digits (after the decimal in the USA). Defaults to 3.

orderBy None
uppercase

<td>{{ movie.mpaa | uppercase}}</td>

uppercase

<td>{{ movie.mpaa | uppercase}}</td>

Transforms the text to uppercase.

async

percent

<td>{{ movie.approvalRating | percent: ‘1.0-2’}}</td>

Formats a number as a local percentage.
– The first number represents the minimum number of integer digits (before the decimal in the USA). Defaults to 1.
– The second number is the minimum number of fractional digits (after the decimal in the USA). Defaults to 0.
– The third number is the maximum number of fractional digits (after the decimal in the USA). Defaults to 3.

  slice

<tr *ngFor=” #movie of movies | slice:1:2“>

Creates a new list or string containing only a subset (or slice) of the elements.
– The first number is the start parameter and defines the starting index (0-based).
– The second number is the end parameter and defines the ending index (0-based).

NOTE: This does not currently work. It throws an exception.

 

Style Sheets

Style sheets give our application a nice look. In Angular 1, we often used the Twitter Bootstrap library to style our application. In Angular 2, we can do the same. However, we now have alternatives.

Angular 1.x Angular 2
Link element

<link href=”node_modules/bootstrap/dist/css/bootstrap.css” rel=”stylesheet” />

This line of code is normally defined in the <head> portion of index.html and it defines the style sheet for use in any view of the application.

Link element

<link href=”node_modules/bootstrap/dist/css/bootstrap.css” rel=”stylesheet” />

This line of code is normally defined in the <head> portion of index.html and it defines the style sheet for use in any view of the application.

  styleUrls

@Component({
    selector: ‘mh-movie-list’,
    templateUrl: ‘app/movies/movieListView.html’,
    styleUrls: [‘node_modules/bootstrap/dist/css/bootstrap.css’]
})

The styleUrls property of the component metadata allows us to define a style sheet for a particular component. This allows us to define appropriate styles for individual components that won’t “leak” into other parts of the application.

 

Enjoy!

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.

image

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.

image

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.

 

Conclusion

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.

Enjoy!

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?

image

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.

AngularWTypeScript_Code

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

AngularWTypeScript

Enjoy!

August 12, 2015

"Angular Front to Back with Web API" Problem Solver

Angular and ASP.NET Web API are like chocolate and peanut butter, they are GREAT together! But there are lots of intricacies and many, many things that can go wrong when putting these two technologies together. This problem solver covers some of the most common things that can go wrong and how to fix them.

The_Creation_Michelangelo

Using Angular as the client technology in the front-end and an ASP.NET Web API service in the back-end is a common requirement. So much so, that I developed a Pluralsight course to help developers tackle all of the touch points between an Angular client application and a back-end ASP.NET Web API service: Angular Front to Back with Web API.

As of this writing, there have been over 400 posts associated with that course, many of which identify problems that developers have had in merging these two technologies. This post summarizes the most common issues and identifies locations in the course where solutions to these issues can be found

 

No Access-Control-Allow-Origin Header is Present

This issue first appears in module 3 (Retrieving Data) clip 6 (Calling the Web API from Angular). We created the ASP.NET Web API code in a project separate from the Angular code. So when the solution is executed:

When the Angular code calls the ASP.NET Web API, it will work in Internet Explorer but *not* in Chrome. In Chrome, pressing the F12 tools will show the error: No “Access-Control-Allow-Origin” header is present, Status Code: 500 Internal Server Error.

This is a problem with cross-origin requests. Since the origin of the call is from http://localhost:52436 and the endpoint is at http://localhost:52293, the request is considered to be a cross-origin request. In other words, the request is originating at a different URL than the service. By default, cross-origin requests are denied. (This works in debug mode with IE because IE does not consider the difference in port numbers to be a cross-origin request.)

The solution to this problem is CORS, or cross-origin resource sharing. Wikipedia states that CORS “allows many resources … on a web page to be requested from another domain outside the domain from which the resource originated.” In other words, CORS defines a way that a service can interact safely with a browser application that originates on a different domain or different server.

To enable CORS in the ASP.NET Web API, start by downloading the CORS package using NuGet Package Manager.

image

Once CORS is installed, there are two additional steps:

1) Call the EnableCors method.

Open the WebApiConfig.cs file in the App_Start folder. Add this line to the Register method:

config.EnableCors();

2) Set the EnableCorsAttribute.

Set this attribute on any controller class that wants to allow cross origin requests. For example, on the ProductsController, it might look like this:

[EnableCorsAttribute(“http://localhost:52436″, “*”, “*”)]
public class ProductsController : ApiController
{}

Note that the port shown in red is the port for the Angular application. This code tells the PrioductsController class that it should allow cross-origin requests only from the defined location, which is from our Angular client application. Alternatively, use “*” to allow access from any cross-origin request.

These steps are covered in detail in module 4 (CORS and Formatters) clip 3 (Enabling CORS in a Web API service).

OData Does Not Work

This issue appears in Module 6 (Using OData Queries) and often takes the form of a problem with the contains method of the OData $filter. This problem is due to confusion on the multiple OData packages that are available in Visual Studio.

The course requires version 4 of OData, so be sure to select the NuGet package that says “OData v4.0” in the description.

NOTE: There are many similarly named NuGet packages, such as “Microsoft.Data.OData” and “Microsoft.AspNet.WebApi.OData”. Be sure to select the one shown below.

image

User Login Generates a CORS Error

This issue appears in module 10 (User Registration and Login). It often only occurs in Chrome (not IE).

There are two possible issues here:

1) There is one line of code that is missing from the demo in the course.

[EnableCorsAttribute(“http://localhost:52436″, “*”, “*”)]
public class AccountController : ApiController
{ }

This line of code enables CORS for the AccountController just as we did for the ProductsController earlier in the course (module 3)

2) There is one line of code added during the demo, but is sometimes missed when coding along.

In the Providers folder, ApplicationOAuthProvider.cs file, GrantResourceOwnerCredentials method, add the following line:

context.OwinContext.Response.Headers.Add(“Access-Control-Allow-Origin”,
    new[] { “
http://localhost:52436″ });

Where the defined URL shown in red is the location of the Angular application that this code is granting access to.

This code is explained and demoed in module 10 (User Registration and Login) clip 4 (Logging the User In) starting around 9:32 with showing the error and the line of code is added at 10:13.

Please let me know if you have run into anything else that should be added to this list.

Enjoy!

Automatic Compilation in VS Code for TypeScript

Filed under: TypeScript,VS Code @ 2:19 pm
Tags: ,

By default, when you use VS Code with a TypeScript project, you need to use Ctrl+Shift+B (or Cmd+Shift+B on a mac) to build the application and transpile the TypeScript to JavaScript. But there is a way to make this process more seamless.

To set up VS Code to watch for changes and transpile automatically requires two steps:

1) Modify the tsconfig.json file for the project.

2) Run the TypeScript compiler on the folder for the project.

Let’s look at both of these steps in detail.

Modify the tsconfig.json File

The tsconfig.json file configures TypeScript for your project. In the tsconfig.json file you can define compiler options, such as the version of JavaScript you’d like the transpiler to use. The TypeScript code is then transpiled to the selected version of TypeScript.

To configure VS Code for automatic compilation, you need to add a watch property here:

{
    “compilerOptions”: {
        “target”: “ES5”,
       “watch”: true
    }
}

NOTE: The intellisense does not seem to know about the “watch” option. So you won’t see it in the list of available compiler options. But it does work.

Run the TypeScript Compiler

You can manually run the TypeScript compiler from within VS Code by using Ctrl+Shift+B (or Cmd+Shift+B). Alternatively, you can manually run the TypeScript compiler from the command window (also called a terminal).

1) Right-click on the index.html file in the VS Code Explore pane and select Open in Console.

This opens a command window defaulted to the current project directory.

2) Type tsc.

Typing tsc (for TypeScript compiler) immediately transpiles all of the TypeScript code in the directory (and subdirectories) to JavaScript. Without the “watch” setting, if you later make changes to the TypeScript code, you have to re-run the tsc command to transpile the changes.

image

HOWEVER, if you have the watch compiler option set to true as shown in the code example above, running tsc here produces a different result. In this case, the TypeScript compiler will immediately transpile all of the TypeScript code in the directory (and subdirectories). But then, it will start watching for changes. Any change it sees to the files in the directory will automatically be transpiled. Notice in the screen shot below that it watched me make 3 changes and compiled after each of them.

image

If you leverage VS Code’s AutoSave feature, and turn on the watch following the two steps detailed above, then the TypeScript compiler will transpile your TypeScript files every time you make a change.

Enjoy!

For more information on other techniques when building an Angular application with TypeScript, check out my Pluralsight course: “Angular with TypeScript”

Thanks to Greg who posted this suggestion to the Discussion forum for my Pluralsight course.

Angular Custom Services in TypeScript: Factory vs Service

Filed under: AngularJS,TypeScript @ 1:14 pm
Tags: , , ,

In my prior post (http://bit.ly/DeborahK_AngularServices) I outlined the difference between the factory pattern and service pattern when building a custom Angular service with JavaScript. In this post we’ll look at the differences when the Angular custom service is written in TypeScript.

Angular Custom Service

The basic code to create an Angular custom service in TypeScript is the same for both the factor pattern and the service pattern.

Here is an example of a simple custom service written in TypeScript, missing only the Angular module registration:

module app.common {
    export interface IHelloService {
        sayHello(text: string): string;
        sayGoodbye(text: string): string
    }

    export class HelloService implements IHelloService {
        sayHello(text: string): string {
            return “Hello ” + text;
        };
        sayGoodbye(text: string): string {
            return “Goodbye ” + text;
        };
    }
    <Module Registration Here>
}

This code begins with a TypeScript module. The TypeScript module encapsulates the code within an Immediately Invoked Function Expression (IIFE) and provides a clean namespace for the service.

The interface defines the intent of the service. The service intends to provide a sayHello method and a sayGoodbye method. Both take in a string parameter and return a string.

The service class is exported so that it can be used from any other Angular code, such as an Angular controller. The class implements the defined interface, thereby committing to implement every property and method defined in that interface. In our case, it is committing to implement the two methods.

The primary difference between the factory pattern and service pattern when building an Angular service with TypeScript is the module registration. Let’s take a look at how that registration is different.

Service Pattern

When using the service pattern, the TypeScript code to register the service with an Angular module is straightforward.

Simply call the service method:

angular
        .module(“helloWorld”)
        .service(“helloService”,
                         HelloService);

Insert the above code into the service example in place of <Module Registration Here> and you have a working service using the service pattern.

Factory Pattern

Using the factory pattern, the registration code is a little more complex.

As shown in the prior post (http://bit.ly/DeborahK_AngularServices), an Angular factory returns an object. When building the service with a TypeScript class, a class itself cannot return an object. Properties and methods of the class can return an object, but the class itself cannot.

So when using the factory pattern with TypeScript, the trick is to define a function that creates an instance of the service and returns an object. The code for that looks like this:

function factory(): HelloService {
    return new HelloService();
}

angular
    .module(“helloWorld”)
    .factory(“helloService”,
                     factory);

Insert the above code into the service example in place of <Module Registration Here> and you have a working service using the factory pattern.

Enjoy!

For more information on this and many other techniques when building an Angular application with TypeScript, check out my Pluralsight course: “Angular with TypeScript”

AngularWTypeScript2

August 7, 2015

Angular Custom Services: Factory vs Service

Filed under: AngularJS @ 1:11 pm
Tags: , ,

When we want reusable code in our Angular application we build a custom Angular service. We can then use that service in any Angular code that needs it. There are several types of services available in Angular, but there are two types that are used most often: Factory and Service

image

Factory

We can create a service as an Angular factory, also known as a “factory service”.

Here is an example of a simple factory written in JavaScript:

app.factory(‘helloService’, function(){

   return {

      sayHello: function(text){

         return “Hello ” + text;

      },

      sayGoodbye: function(text){

         return “Goodbye ” + text;

      }

   }

});

With a factory-style service we return an object with properties and methods. In this example, the object has two methods: sayHello and sayGoodbye.

This is the recommended and most commonly used type of custom service when coding in JavaScript.

Service

Alternatively, we can create a service as an Angular service, also known as a “service service”.

Here is an example of a simple service written in JavaScript:

app.service(‘helloService’, function(){

   this.sayHello= function(text){

        return “Hello ” + text;

   };

   this.sayGoodbye = function(text){

        return “Goodbye ” + text;

   };

});

With a service-style service, we don’t return anything directly. Rather, we define the service properties and methods on “this”. Those methods may return something, but the service function itself does not.

In many scenarios, it is easier to use a service-style service when coding in TypeScript. In looking at the two different sets of code here, the body of the service code looks more similar to code we would expect to see within a class.

Enjoy!

May 15, 2015

Clearing the Internet Explorer Browser Cache

Filed under: AngularJS @ 10:49 am

When working on an Angular application, it is important to ensure that the browser does not keep prior versions of your JavaScript or other files cached. Otherwise, when you make a change to a JavaScript or HTML file and re-run the application, you may not see your changes.

Here are the steps to ensure that Internet Explorer does not cache your files:

1) Select the Tools icon and select Internet options:

image

2) Click the Settings button (on the General tab)

image

3) Select the desired option. I often pick “Every time I start Internet Explorer”

image

Enjoy!

Next Page »

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

Featuring WPMU Bloglist Widget by YD WordPress Developer