Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

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!

April 30, 2015

What Developers are Saying About: "Angular Front to Back With Web API"

It is sometimes difficult to find detailed step-by-step guidance for building an application using Angular and ASP.NET Web API. The Pluralsight course: “Angular Front to Back With Web API” covers the following topics from front to back:

  • Retrieving Data
  • CORS and Formatters
  • Passing Parameters
  • Using OData Queries
  • Saving Data
  • Action Results, Error Handling & Validation
  • User Authentication & Authorization

(If you don’t have a Pluralsight membership, sign up for a free trial here.)

Here are some of the comments about the course from Twitter and the course discussion page:

Awesome WebAPI + Angular course!

Thanks for your great course, it helped me to understand how to establish different CURD action between front end and back end.

oh yea! Your course rocks too! Even a beginner can view this course and your other one and be successful.

Great course, it is really concise and to-the-point.

First of all I would like to congratulate you on publishing a fantastic set of courses on AngularJS Line of Business Apps and more so recently Angular Front to Back with Web API. I think what stands out for me is the way in which you provide holistic approach to delivering excellent technical content.

I Love your angularjs pluralsight courses. Learnt a lot and using at work.

Your classes on AngularJS on pluralsight is my reason am better than my peers, thanks

Thank you for building a .Net course F2B that uses (vm = this) and (controller as) syntax!!! You rock.

ScreenShot

Enjoy!

January 15, 2015

Visual Studio 2015: A First Look at the IDE

Filed under: C#,Visual Studio @ 7:23 am

My course on Visual Studio 2015 just went live today on Pluralsight: “Visual Studio 2015: A First Look at the IDE“.

(If you don’t have a Pluralsight membership, sign up for a free trial here.)

image

This course covers:

  • Coding assistance with the new Light Bulb icon
  • Renaming and refactoring enhancements
  • Debugging improvements
  • Layout customization features
  • Touch gestures
  • XAML Peek Definition
  • Feedback changes
  • CodeLens Enhancements

Enjoy!

January 12, 2015

What Developers are Saying About: AngularJS Line of Business Applications

Filed under: AngularJS @ 8:56 am
Tags: , ,

Developers interested in building great business applications with AngularJS are finding the Pluralsight course: AngularJS Line of Business Applications to be just what they need.

(If you don’t have a Pluralsight membership, sign up for a free trial here.)

Here are some of the comments in the discussion section for the course:

You’ve built a complete application, which is awesome!

Excellent course. One of the best ones I have ever seen.

Deborah, this is by far the best Angular.js course I’ve seen in the last two years. And believe me, I watch them all. But somehow you’ve managed to explain it so well that I really feel like I can finally make my own applications!

Great course, wish I would of started with it :)

Deborah, you speak human language. I loved your style of teaching!

Thanks for the great course! I really appreciated the systematic reinforcement of software engineering best practices that never fell by the wayside, even while building a demo app.

One of the best course on AngularJS at intermediates level. What i liked the most is the pace & clarity on each of the topic covered. I would highly recommend this course.

image

This course covers the following topics:

  • Introduction
  • Building the First Page
  • Accessing Data
  • Routing to Multiple Views
  • Building Data Entry Forms
  • Validating Forms
  • Defining Business Logic in an Angular Service
  • Visualizing Data With Charts
  • Exception Handling
  • Final Words

Enjoy!

January 6, 2015

MSDN Now Includes Pluralsight Courses

Filed under: C#,Visual Studio @ 11:53 am
Tags: ,

In November of 2014, Microsoft announced that subscribers will receive a 12-month Pluralsight training benefit as part of its MSDN subscription. So if your New Year’s resolution was to update/enhance your development skills, this offer can help.

The number of courses included in this benefit depend on the type of MSDN subscription. As an example, my particular subscription includes 30 courses as shown below.

image

This set of course includes three of mine, as indicated above and described below.

Mastering Visual Studio 2013 focuses on the new features added to 2013 including Peek Definition, the enhanced scroll bar, Navigate To improvements, XAML editing enhancements, and CodeLen. This course is great if you are already using Visual Studio and want an update on the latest tools and editing features VS 2013 provides.

Visual Studio Data Tools for Developers is all about using SQL Server Data Tools (SSDT) in Visual Studio. This course is for you if you use SQL Server and Visual Studio and want to learn how to build database projects, check in database scripts, and easily deploy database changes using SSDT.

Defensive Coding in C# is for C# developers that want to write clean, maintainable, and testable code … and keep that code great even in the face of changing requirements, multiple developers, and the passing of time.

To activate your benefit:

  1. Log into your MSDN account.
  2. Select to activate your Pluralsight benefit:

image

Enjoy!

December 17, 2014

Reusing Validation Messages in AngularJS

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

One of the many new features in AngularJS 1.3 is the ability to reuse validation messages.

When displaying validation messages, you may find that you often reuse very similar messages:

“Class name must be entered.”  “Start date must be entered.”  “End date must be entered.”

Wouldn’t it be nice if you could reuse error messages instead of repeating them throughout the application? Angular 1.3 provides an ngMessagesInclude directive as part of the new Angular ngMessages module that allows you to share error messages throughout an application.

This post shows you how to use this new feature.

For more information about the new features in AngularJS 1.3, check out my latest Pluralsight course, authored with Joe Eames:

What’s New in Angular 1.3

screenshot

Reusing validation messages in Angular requires the following steps:

  1. Create an HTML file for the common messages.
  2. Include the HTML file in the same element as ngMessages.
  3. Override any messages as required.

Let’s take it one step at a time.

NOTE: If you are new to using ngMessages, check out the Angular 1.3 course.

Create the Messages File

The first step is to create the HTML template file for the common message text. In this file, add HTML with an ng-message attribute for each message. The value of the ng-message attribute must be a valid $error object key. That key is often the name of the validation type, for example: required, minlength, or maxlength.

The message text itself should be generic, meaning it should not refer to specific field names or field requirements.

The resulting HTML file could look something like this:

<span ng-message=”required”>
This item cannot be blank.</span>
<span ng-message=”minlength”>
You have not met this item’s minimum length.</span>
<span ng-message=”maxlength”>
You have exceeded this item’s maximum length.</span>

Include the HTML File

The next step is to include the messages HTML file for each input element that wants to reuse the messages using ng-messages-include. Insert this directive in the same element containing the ng-messages directive.

The following shows an Email field with a label, textbox, and validation. The entire form-group is shown below to provide context for the validation messages.

<div class=”form-group”
     ng-class=”{‘has-error’:classForm.inputInstructorEmail.$invalid &&
                            classForm.inputInstructorEmail.$touched}”>
    <label class=”col-md-2 control-label”
           for=”inputInstructorEmail”>Instructor’s Email</label>

    <div class=”col-md-4″>
        <input class=”form-control”
               type=”email”
               id=”inputInstructorEmail”
               name=”inputInstructorEmail”
               placeholder=”instructor’s email”
               ng-model=”vm.class.instructorEmail”
               required
               minlength=”6″ />
    </div>
    <span class=”help-block has-error”
          ng-if=”classForm.inputInstructorEmail.$touched”
          ng-messages=”classForm.inputInstructorEmail.$error”
          ng-messages-include=”app/errorMessages.html” >
        <span ng-message=”email”>
            Instructor’s email must be a valid email address.
        </span>
    </span>
</div>

Notice that the only ng-message directive included in the code above is for an invalid email address. This one is required here because it was not included in the messages html file.

Override Messages as Required

There may be times when you want a customized message. In those cases, you can easily override a message by simply adding a child element with an ng-message directive. The child element ng-message will always override any message defined for the same key in the included messages file.

    <span class=”help-block has-error”
          ng-if=”classForm.inputInstructorEmail.$touched”
          ng-messages=”classForm.inputInstructorEmail.$error”
          ng-messages-include=”app/errorMessages.html” >
        <span ng-message=”email”>
            Instructor’s email must be a valid email address.
        </span>
        <span ng-message=”minlength”>
            Instructor’s email must be at least 6 characters in length.
        </span>

    </span>

Use this technique any time you want to reuse messages throughout your application.

Enjoy!

Next Page »

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