Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

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!

November 25, 2014

Exception Handling in an AngularJS Application

Filed under: AngularJS @ 9:25 am

Wouldn’t it be great if everything always just worked? That we never had a runtime error… That the server-side Web services were always available and worked? But we know that is not the case. Things go wrong.

The most common ways to handle exceptions in an Angular application are:

  • With a JavaScript try/catch block
    • You can add a try/catch block around code that could fail
    • That allows you to catch specific errors and handle them appropriately.
  • You can use the Angular global exception handler
    • Angular has a built-in service, called $exceptionHandler, that catches exceptions
    • By decorating this service, you can tailor it to the needs of your application.
  • When working with promises, you can also add failure or catch functions

This post covers the second option, using the Angular global exception handler.

If you are interested in more information, I cover exception handling in detail in my Pluralsight course: “AngularJS Line of Business Applications“.

image

Decorating $exceptionHandler

Angular provides a built-in global exception handling service called $exceptionHandler. Any uncaught exception is delegated to this service. This service only catches exceptions, not communication errors (such as 404 not found) or syntax errors.

The default implementation of $exceptionHandler logs any exceptions to the browser console. You can change this functionality by decorating the $exceptionHandler service.

Say we wanted to change the default global exception handler to display a message to the user. We could accomplish this by decorating the $exceptionHandler service as shown in the code below:

image

  • Line 14:
    • The above code configures the application with a decorator.
    • The code needs the Angular built-in $provide service, so it is passed as a parameter to the configuration function.
  • Line 15:
    • The $provide service is used internally as part of Angular’s component registration process.
    • The decorator method of this service can intercept requests and provide different or additional functionality.
    • The decorator method takes two parameters:
      • The first parameter is the string name of the service being decorated. In this case, it is the $exceptionHandler service.
      • The second parameter is a min-safe array containing the name of each decorator function parameter and then the decorator function itself.
  • Line 16:
    • The decorator function has a dependency on $delegate. So $delegate is listed in the min-safe array.
    • $delegate provides the original service to the method. This allows you to call the base implementation of that service.
  • Line 17:
    • $delegate is passed as a parameter to the decorator function.
  • Line 18:
    • This method returns a decorated $exceptionHandler service object.
    • The returned function has two parameters: the exception and the cause.
  • Line 19+20:
    • In this example, the code in the returned function replaces the exception message with a custom message.
  • Line 21:
    • Then it uses $delegate to call the base implementation of the service.
    • The base implementation simply logs the error to the console.
  • Line 22
    • Lastly, this code adds an alert to notify the user of the issue.

Now, any time that an unhandled exception occurs, the message is logged to the console (the default behavior) *and* the user is notified with an alert.

You can add anything you need to this function. For example, you may want to add more extensive logging or a more detailed message.

Enjoy!

November 24, 2014

Creating Pretty Tabs with HTML and CSS

Filed under: AngularJS @ 4:31 pm
Tags: , ,

If you are building data entry forms with HTML (using AngularJS or ASP.NET or other technologies), you may find that you need more space than can fit onto one page. In that case, you may want to implement tabs.

In my AngularJS course entitled “AngularJS Line of Business Applications“, I demonstrate how to build data entry forms using tabs. The result looked like this:

image

I also showed a version with styled tabs like this:

image

This blog post details how to change the rectangular tabs from the first image to the more stylized tabs in the second image.

To keep the example simple, we’ll work with just the tabs:

image

The code for the page shown above with the rectangular tabs is as follows:

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>Acme Product Management</title>

    <!– Style sheets –>
    <link href=”css/bootstrap.css” rel=”stylesheet”/>
    <link href=”css/app.css” rel=”stylesheet”/>
</head>

<body>
  <div class=”panel panel-primary”>
    <div class=”panel-heading” style=”font-size:large”>
        Acme Product Management
    </div>

    <div class=”panel-body”>
        <div class=”wizard”>
            <a>
                Basic Information
            </a>
            <a>
                Price Details
            </a>
            <a>
                Search Tags
            </a>
        </div>
   </div>

  </div>
</body>

</html>

Notice that the tabs are defined with anchor (<a>) tags. Notice also that this HTML links to two css files:

body {
    background-color: #C6D9F1;
}

.wizard a {
    background: #efefef;
    display: inline-block;
    margin-right: 5px;
    min-width: 150px;
    outline: none;
    padding: 10px 40px 10px;
    position: relative;
    text-decoration: none;
}
.wizard .active {
    background: #007ACC;
    color: #fff;
}

We’ll need to add some additional styles to the app.css file in order to implement the arrow-style tabs as shown below:

image

First, we’ll add a before selector for the anchor tag:

.wizard a:before {
        width: 0;
        height: 0;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #fff;
        position: absolute;
        content: “”;
        top: 0;
        left: 0;
    }

This creates the “cut out” on the left side of the tabs.

Then we’ll add the triangle shaped arrow on the right side of the tabs using an after selector for the anchor tag:

.wizard a:after {
        width: 0;
        height: 0;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 21px solid #efefef;
        position: absolute;
        content: “”;
        top: 0;
        right: -20px;
        z-index: 2;
    }

Lastly, we want to ignore the “cut out” border on the left side of the first tab and the arrow on the right side of the last tab. This gives us a clean look for the far left and far right of the tab bar:

.wizard a:first-child:before,
.wizard a:last-child:after {
        border: none;
    }

And if you want to round the corners at the far left and far right of the tab bar, you can round them with this:

.wizard a:first-child {
        -webkit-border-radius: 8px 0 0 0px;
        -moz-border-radius: 8px 0 0 0px;
        border-radius: 8px 0 0 0px;
    }

.wizard a:last-child {
        -webkit-border-radius: 0 8px 0px 0;
        -moz-border-radius: 0 8px 0px 0;
        border-radius: 0 8px 0px 0;
    }

Try building this simple page and then adding each css class and running the application to see its effect on the tabs before adding the next css class.

Enjoy!

November 7, 2014

"Getting to Great With C#": A Learning Path

Filed under: C# @ 9:31 am
Tags: , , ,

As developers, we are always looking for ways to hone our skills. If you are a C# developer, there are many paths to take. That is where a learning path can help.

A learning path provides a specific set of recommendations for enhancing your C# development skills. The “Getting to Great with C#” learning path shows you how to use the C# language to build well-crafted applications. It focuses less on language features and more on good programming practices and techniques. So if you are already familiar with C# and are looking to elevate your skills, check out this learning path.

image

These map to the following Pluralsight courses:

Course Duration
Object-Oriented Programming Fundamentals in C# 4h 22m
Defensive Coding in C# 4h 32m
Clean Code: Writing Code for Humans 3h 10m
C# Interfaces 2h 52m
Abstract Art: Getting Things “Just Right” 2h 08m
Dependency Injection On-Ramp 2h 38m
SOLID Principles of Object Oriented Design 4h 08m
Design Patterns On-Ramp 3h 31m
Design Patterns Library 15h 01m

See this blog post for more information on this learning path.

Enjoy!

October 2, 2014

AngularJS: Visualizing Data with Charts

Filed under: AngularJS @ 5:20 pm

Data visualization can help users see patterns in an often overwhelming amount of data. One key technique for visualizing data is to display that data in a set of charts.

image

Because charting is a common requirement, there are JavaScript libraries available for building charts. D3.js is one such library. D3.js is a JavaScript library for manipulating documents based on data. It provides powerful data visualization components. With all of its power and flexibility comes a steep learning curve.

Luckily, you won’t have to learn d3 to build charts with Angular. Angular-charts is a wrapper around basic d3 features for use in Angular. You can use Angular-charts to build pie, bar, line, point, and area charts.

If you want to create charts in your Angular application, try out the charting example on the Angular-charts page.

Or check out the “Visualizing Data with Charts” module in my “AngularJS Line of Business Applications” course.

Enjoy!

October 1, 2014

Angular Talk at Visual Studio Live! in Washington DC on October 7th, 2014

Filed under: AngularJS,Visual Studio @ 5:25 pm

I am very excited to talk about AngularJS at the upcoming Visual Studio Live! conference in Washington DC!

The session is entitled “Build an Angular and Bootstrap Web Application in Visual Studio from the Ground Up“. It is aimed at intermediate level developers that are new to or just getting started with AngularJS. Because this *is* a Visual Studio conference, the sample application is built using a Visual Studio Web Site for the Angular application and ASP.NET Web API for the back-end Web service. (Though the talk only walks through the Angular code, not the Web API code … we only have 75 minutes!)

If you are looking for the code for this session, you can find it on github here.

If you are not familiar with github, just click the Download ZIP button in the bottom right to download a zip file containing the code.

image

If you are interested in more information about Angular, check out my latest Pluralsight course: “AngularJS Line of Business Applications”. The sample application for the course is built from scratch using WebStorm, but could be created using Visual Studio.

Enjoy!

Next Page »

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