Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

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!

September 19, 2014

Object-Oriented Programming (OOP) Terms

Filed under: C#,OOP @ 10:22 am

I recently completed a course for Pluralsight entitled “Object-Oriented Programming Fundamentals in C#.” In that course, I cover OOP concepts and definitions of common OOP terms. In the discussion board for that course, someone suggested a “cheat sheet” that summarized the definitions. So here it is:

Basics

Object-Oriented Programming (OOP): An approach to designing and building applications that are flexible, natural, well-crafted, and testable by focusing on objects that interact cleanly with one another.

Class: The code describing a particular entity in the application, such as Customer, Order, or Address. The class contains the code defining the properties and methods (see below).

Property: The code defining the data managed by the class, such as CustomerName, OrderNumber, or EmailAddress.

Method: The code defining the actions or behaviors of the class, such as Validate or CalculateTotal. Methods are defined in the code with C# functions.

Members: Refers to the properties and methods for a class.

Object: An instance of a class that is created at runtime. In C#, an instance is created with the new keyword.

Object Variable: The variable used when creating an object. For example, var myCustomer = new Customer(); In this example, myCustomer is the object variable. Use the object variable to set the properties and call the methods. The object variable retains the state of the object.

Method signature: The code defining the method function including the function name and the set of parameters. The signature does not include the return type. Every function signature within a class must be unique. The signature is used to “match up” calls to the function.

Overloading: Methods that have the same name but different parameters. Example: public bool Retrieve() and public bool Retrieve(int id). The Retrieve method in this example is said to have “two overloads”.

Contract: The set of public properties and methods in a class define the classes contract. The class makes a promise that it will provide the defined properties and methods to any other code that needs them. This is also known as the “class interface“.

Constructor: Code that is executed each time an instance of the class is created.

Default Constructor: A constructor with no parameters.

Overriding: When using inheritance (see below), a child class can override a member of the parent class to provide its own implementation.

Interface: An explicit interface is a separate type (INotifyPropertyChanged for example) that defines a set of properties and methods with no implementation. Any class can then implement an interface to use the set of properties and methods provided in the interface. Think of an interface as a role that an object can play. For example, an ILoggable interface defines a logging role. An IEmail interface defines an emailing role. An Order class may implement both the ILoggable and IEmail interface to take on both roles. An Address class may implement only the ILoggable interface.

Four Pillars of Object-Oriented Programming

The pillars of OOP define the key characteristics of object-oriented programming and are:

Abstraction: The process of defining classes by simplifying reality, ignoring extraneous details, and focusing on what is important for a purpose. For example, a customer may have a name, title, address, marital status, pets, children, credit card information, vehicles, etc. But if the purpose of the application is to process orders, the application may only care about the customer’s name, address, and credit card information.

Encapsulation: A way to hide (or encapsulate) the data and implementation details within a class, thus hiding complexity. In C#, data elements are defined with private backing fields and exposed through property getters and setters. So the data is encapsulated.

Inheritance: A relationship between classes whereby child (or derived) classes inherit all of the members of the parent (or base) class. For example, an application may define a “business object base” class that all business objects inherit from. This base class can contain members common to all child classes, such as entity state information.

Polymorphism: Basically “many forms”. The concept that a single method can behave differently depending on the type of object that calls it. For example, the Validate method in Customer class performs differently from the Validate method in the Order class.

Inheritance-Based Polymorphism: Polymorphism in the case where the method is defined in a base class and behaves differently for each child class.

Interface-Based Polymorphism: Polymorphism in the case where the method is defined in an interface and behaves differently in each class that implements the interface.

Class Relationships

Collaboration: “Uses a” relationship. Objects can collaborate with other objects. For example: Customer Repository “uses a” Customer object to populate on a retrieve and serialize on a save.

Composition: “Has a” relationship. Objects can be composed of other objects. For example, Order “has a” Customer and Order “has a” shipping address.

Inheritance: “Is a” relationship. Objects can be subtyped. For example, a Business Type Customer “is a” Customer and a Residential Type Customer “is a” Customer.

C# OOP Terms

Auto-implemented properties: Properties that create and manage the encapsulated backing field automatically.

Static method: Adding the static modifier on a member of the class (property or method) defines that the member belongs to the class itself, not an instance of the class.

Sealed class: Class that cannot be used as a base class for an inheritance relationship.

Abstract class: Class that cannot be instantiated, so no objects can be created from the class. Nor can it be accessed by its class name. The class can only be used as a base class for other classes.

Concrete class: Class that can be instantiated. Basically, the opposite of an abstract class.

Static class: Class that cannot be instantiated, so no objects can be created from the class. The class members are instead accessed using the class name. A static class provides a shortcut to the members of the class when instancing is unwarranted. For example, the .NET Framework Console class is a static class. To call the WriteLine method you use Console.WriteLine. You don’t have to create a new instance of Console.

Abstract method: Method with no implementation (basically no code). The method must be overridden by a child class.

Virtual method: Method with an implementation that can be overridden by a child class.

For More Information

For more information and detailed coding examples for these concepts/terms, check out the course.

Enjoy!

September 5, 2014

Abstract Class vs Interface

Filed under: C#,OOP @ 5:10 pm

Since publishing my course on Object-Oriented Programming Fundamentals in C# for Pluralsight, I often receive questions from viewers. One of the common questions is on the difference between an Abstract Class and an Interface.

Abstract Class

An abstract class is a class that cannot be instantiated, meaning you can’t use the new keyword to create one. Some key qualities of an abstract class:

  • It is intended to be used as a base class for other classes that inherit from it.
  • It can provide implementation, meaning that it can contain the code for an operation.

For example, you could define an abstract product base class:

public abstract class ProductBase

{

   public bool Save {

       // Code here to save the product

   }

}

The Save method here would contain the code to save a product.

You could then create specialized product classes: BookProduct, GroceryProduct, and OfficeProduct. Each of these specialized classes inherit from the ProductBase class. The specialized product classes then don’t need to contain the logic for the save, because it is provided in the base class.

Say you then define another abstract class for logging.

public abstract class Logging

{

   public void Log{

       // Code here to log information

   }

}

You need the logging functionality in the BookProduct class. Since C# does not allow multiple inheritance, the BookProduct class cannot inherit from *both* the ProductBase class and the Logging class. You instead have to create a hierarchy:

BookProduct class inherits from ProductBase class which inherits from the Logging class.

GroceryProduct class also inherits from ProductBase class which now inherits from the Logging class. So even if the GroceryProduct class does not want or need logging, it still has all of the logging features because Logging is part of its class hierarchy.

This can lead to deep inheritance chains that make the code more complex and difficult to maintain/extend.

Interface

An interface is a set of properties and methods. You can think of an interface as a contract whereby if a class implements the interface, it promises to implement *all* of the properties and methods in the interface. Some key qualities of an interface:

  • It is intended to be implemented by other classes. Each class that implements the interface promises to provide code for each property and method in the interface.
  • An interface cannot contain any implementation, meaning that it does not contain any code, just declarations.

Using the same example as above, you could define IProduct:

   public interface IProduct{

       bool Save();

   }

This interface cannot contain any code for the save. So each product class (BookProduct, GroceryProduct, and OfficeProduct) would need to implement this interface and provide its own code for the save feature.

Say you then define an interface for logging.

   public interface ILoggable{

       void Log();

   }

Any of the product classes that need logging can implement this interface. You can think of an interface as defining a role that a class can take on. For example, the BookProduct class could take on a logging role, email role, and printing role by implementing a logging interface, email interface, and printing interface.

By using an interface:

  • Only the specialized product classes that need logging can implement the ILoggable interface.
  • Each product class that does implement the ILoggable interface needs to provide its own implementation.
  • Other classes (completely unrelated to products) can use the ILoggable interface. The class does not need to be defined within the same hierarchy.

Summary

You can think of an abstract class as a bucket of functionality shared by all of your relatives. And an interface as a role that anyone in the community can take on.

Use an abstract class if:

  • You are building a base class.
  • You want to provide code that the specialized child classes could use (or override)
  • You don’t need the functionality in the abstract class for any classes other than those within the class hierarchy.

Use an interface if:

  • You are defining a “role” that a class could take on.
  • You may want to use the interface on unrelated classes.
  • Each class implementing the interface will provide an implementation.

Thoughts? Questions? Please use the space below to submit your comments.

Enjoy!

PS circle

Check out my Pluralsight courses!

August 1, 2014

Boldly Code With Us: Preview of Visual Studio Live! Washington, D.C.

Filed under: AngularJS,General,Visual Studio @ 4:09 pm

Earlier this week I presented a preview of my two sessions for the Visual Studio Live! conference coming up in Washington DC on October 6-9, 2014. My two sessions at the conference are:

  • New IDE and Editor Features in Visual Studio 2013
  • Build an Angular and Bootstrap Web Application in Visual Studio from the Ground Up

In the preview, I outlined some of the new IDE and Editor features and then selected one to demonstrate.

I then provided an introduction to AngularJS, specifically what it is and why you may want to use it for development of client-side Web applications.

If you are interested, the recording of this preview presentation is posted here.

Enjoy!

PS circleCheck out my Pluralsight courses!
July 30, 2014

Learn AngularJS at VSLive in Washington DC

Filed under: AngularJS,General @ 5:24 pm

If you’ve ever been to Washington DC you know that it is filled with pomp and circumstance. It seems every activity is wrapped in ceremony.

That may be fun when touring history … but no so much when you are writing a Web application. When building an application you want to get work done, not spend lots of time on ritual and setup and ceremony.

AngularJS is all about simplification … getting rid of ritual and ceremony. With AngularJS …

  • You don’t have to write code to navigate the document object model (DOM) as you do with JQuery. No need to id everything and find the Ids on the page.
  • You don’t have to write any code that maps properties from your model to the UI and back again … AngularJS provides automatic two-way data binding.
  • You can easily call a Web service such as Web API.
  • You can write clean Web code!

Join me in Washington DC October 6-9 and learn how to use Angular to build your next Web application.

Use this promo code: DCSPK13 or click on the image below for more information or to register. You’ll save $400!

DCSPK13

Enjoy!

July 23, 2014

AngularJS: 101* Ways to Create a Controller (* actually 8)

Filed under: AngularJS @ 6:53 pm

OK, there aren’t really 101 ways to create an AngularJS controller. But when you are first learning and looking at examples, it may seem that there are 101 ways!

This post walks through the most common ways to create an Angular controller. The goal here is to put the different techniques in one place for you to compare and contrast.

NOTE: In all of these examples, the JavaScript code for the controller is added directly to the HTML file so it is easy for you to try it out. In a “real” application, you would add the code for the controller to a separate .js file (as covered in a future post). You can use the techniques presented below regardless of where the controller code resides.

The UI used in all of these examples is a movie hunter application that displays a list of movies. In all cases, the result appears like this:

image

The html is:

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>InStep Movie Hunter</title>

<!– Use the Content Delivery Network (CDN) –>
<script
 
src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js”>
</script>
<link
href=
http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
rel=”stylesheet” />
</head>

<body ng-app>

    <div class=”row  bg-primary”>
        <div class=”col-md-6″>Title</div>
        <div class=”col-md-2″>Director</div>
        <div class=”col-md-2″>Release Date</div>
        <div class=”col-md-2″>Rating</div>
    </div>

    <div class=”row” ng-controller=”SearchByMovieCtrl>
        <div class=”col-md-6″>{{movie.title}}</div>
        <div class=”col-md-2″>{{movie.director}}</div>
        <div class=”col-md-2″>{{movie.date}}</div>
        <div class=”col-md-2″>{{movie.mpaa}}</div>

    </div>

    <script>
        <!—The controller code goes here –>
    </script>

</body>
</html>

Notice two things:

  1. The ng-app attribute on the body tag in the HTML.
    • This attribute is required to identify the page as an Angular application.
    • This attribute currently has no value assigned to it.
    • This attribute is normally defined on the html or body tag.
  2. The ng-controller attribute on the div tag in the HTML.
    • This attribute defines the name of the controller function associated with a piece of the html.
    • This attribute is set to “SearchByMovieCtrl”, which is the name of the controller function.
    • The html tags that are child tags of this div tag (highlighted in green) have access to any of the controller function’s objects and methods. In this example, the controller provides a movie object.

NOTE: The elements and attributes in the html that begin with “ng-” are called Angular directives.

The code for any of the following controllers can be inserted within the script tag as per the highlighted comment above.

#1: Controller with a Function Declaration

A controller is simply a function. In this example, a function is declared within the script tags shown in the html above:

function SearchByMovieCtrl($scope) {
        $scope.movie = {
            title: ‘The Fellowship of the Ring’,
            director: ‘Jackson’,
            date: ‘2001-12-19′,
            mpaa: ‘PG-13′
        }
    }

The browser determines which controller function to call based on the ng-controller attribute defined within the html. So the name defined in the ng-controller attribute must match the name of the function. The name is “SearchByMovieCtrl” in this case.

When this function is called, Angular passes in a parameter called $scope. Anything that the controller function adds to the $scope is accessible to all of the html elements that are within the element containing the ng-controller attribute. (These are highlighted in green above.)

This controller function simply adds a movie object to the $scope. That movie object is then available to the html elements within the div tag containing the ng-controller attribute. The movie object properties can be displayed in the html using the Angular expression syntax {{}} as shown in the html.

To see the effect of the ng-controller attribute, try moving the {{movie.mpaa}} line outside of the outer div element and see what happens.

(The html will then display {{movie.mpaa}} instead of PG-13.)

This style of controller is quick to create, but is problematic in that it adds the function to the global namespace. This means it is available to any other code executing within the browser window. As the page becomes more complex, you could have problems with name collisions. (One function x overrides another function x because they have the same name.)

#2: Controller with a Function Expression

This technique is similar to the prior example, but defines the controller in a function expression instead of a function declaration. (If you are not sure of the difference between a function declaration and function expression, check out this post.)

    var SearchByMovieCtrl = function ($scope) {
        $scope.movie = {
            title: ‘The Fellowship of the Ring’,
            director: ‘Jackson’,
            date: ‘2001-12-19′,
            mpaa: ‘PG-13′
        }
    }

Notice that this code assigns the function to a variable called “SearchByMovieCtrl”. In this case, the function itself has no name, so it’s referred to as an anonymous function. But it could have a name without impacting how this controller works.

This technique has the same pros and cons as the prior technique. But now instead of putting a function on the global namespace, it is defining a variable on the global namespace.

#3: Controller with a Module

If you have been learning Angular, you know that Angular prefers that you define a module for your Angular application. The module is the component that ties all of the other Angular application components together.

After defining a module, you define a controller and register it with the module. That way the html can find the controller without needing to put the controller function in the global namespace of the application.

    var app = angular.module(“movieHunter”, []);

    app.controller(“SearchByMovieCtrl”,
            function ($scope) {
                $scope.movie = {
                    title: ‘The Fellowship of the Ring’,
                    director: ‘Jackson’,
                    date: ‘2001-12-19′,
                    mpaa: ‘PG-13′
                }
            });

The first line of this example defines an Angular module named “movieHunter”. The module setter has two parameters:

  • The first parameter is the name of the module.
  • The second parameter is an array of dependencies to other modules/components. For a demo application as simple as this one, there are not dependencies so the array is empty.

The second line then registers the controller with that module. The registration method takes two parameters:

  • The string name of the controller (SearchByMoveCtrl)
  • The function that is the controller. In this case, it is an anonymous function.

This example (and all of the examples that follow) requires one additional change to the original HTML. The body tag needs to be changed as follows:

<body ng-app=”movieHunter>

When the ng-app directive is not associated with a module, Angular looks for the controller in the global namespace for the page.

When the ng-app directive is assigned to a module name, Angular will then look for the controller registered with the module when it sees the ng-controller tag.

This technique is a much better than the prior two in that it uses the module. Angular much prefers to use a module to manage the components of the application. Plus it keeps the function out of the global namespace.

#4 Controller with a Module and Function Declaration

Some developers don’t like to put an entire function inside of a parameter of a method call. So you can instead define a function and pass a reference to it to the registration function as shown below.

var app = angular.module(“movieHunter”, []);

function SearchByMovieCtrl($scope) {
    $scope.movie = {
        title: ‘The Fellowship of the Ring’,
        director: ‘Jackson’,
        date: ‘2001-12-19′,
        mpaa: ‘PG-13′
    }
};

app.controller(“SearchByMovieCtrl”,
        SearchByMovieCtrl);

The first line of this example defines the Angular module called “movieHunter” as in the prior example. The second line defines the controller function. The last line registers the controller with the module by referencing the function in the second parameter.

The problem with this approach is that we again have the SearchByMovieCtrl in the global namespace.

#5 Controller with a Module and Function Expression

This technique is similar to #4 above, but with a function expression. (If you are not sure of the difference between a function declaration and function expression, check out this post.)

var app = angular.module(“movieHunter”, []);

var SearchByMovieCtrl = function ($scope) {
    $scope.movie = {
        title: ‘The Fellowship of the Ring’,
        director: ‘Jackson’,
        date: ‘2001-12-19′,
        mpaa: ‘PG-13′
    }
};

app.controller(“SearchByMovieCtrl”,
        SearchByMovieCtrl);

The first line of this example defines the Angular module called “movieHunter” as in the prior two examples. The second line defines the controller function and assigns it to a variable. The last line registers the controller with the module by referencing the function in the second parameter.

This approach puts the SearchByMovieCtrl variable in the global namespace.

#6 Controller with a Module and Minification-Safe Array

To improve performance when an application first starts up, many developers minify their files. This minification process removes excess spaces and changes function parameter names to a single character. This makes the files smaller so they download more quickly from the Web server to the client browser.

The problem with minifying an Angular application is that Angular expects the parameter names to be a specific name, not a minified name. For example, if you replaced the $scope variable in any of these examples with another variable name the code would not work.

To prevent the minification process from shortening the parameter names, you can provide the list of parameter names as strings as the second parameter to the controller registration function as shown below.

When you change the second parameter to a list (or technically speaking an array), you still need to pass the name of the controller (or the entire controller  function) as the last entry in the array. This is shown below.

var app = angular.module(“movieHunter”, []);

function SearchByMovieCtrl($scope) {
    $scope.movie = {
        title: ‘The Fellowship of the Ring’,
        director: ‘Jackson’,
        date: ‘2001-12-19′,
        mpaa: ‘PG-13′
    }
};

app.controller(“SearchByMovieCtrl”,
        [“$scope”,SearchByMovieCtrl]);

The second parameter of the controller registration is now an array containing:

  • The string name of each controller function parameter.
  • The reference to the function (or the function itself) as the last entry in the array.

This approach works the same as the prior approaches. The only difference is that the code will continue to work correctly after it has been minified. If you never plan to minify the files (and expect no one else on the team or in operations to minify the files) then this array is not needed.

#7 “Controller as” Syntax

This option is new in version 1.2 of Angular, so you won’t see it in any older posts.

The “Controller as” syntax requires several changes both to the original html and to the controller function itself:

  • First, the ng-controller attribute value in the html is changed to include the “as” keyword:

<div class=”row” ng-controller=”SearchByMovieCtrl as vm>

  • Second, the references to the controller objects in the html need to be changed to use the “controller as” alias.

    <div class=”row” ng-controller=”SearchByMovieCtrl as vm“>
        <div class=”col-md-6″>{{vm.movie.title}}</div>
        <div class=”col-md-2″>{{vm.movie.director}}</div>
        <div class=”col-md-2″>{{vm.movie.date}}</div>
        <div class=”col-md-2″>{{vm.movie.mpaa}}</div>
    </div>

NOTE: vm in this example stands for “view/model”. This is commonly what is used here because the controller is thought of as the connection between the view and the model or “view/model”.

  • Lastly, the $scope is no longer required as a parameter to the controller function. It is still available to the function, but implied. Instead of using “$scope”, the code instead adds objects and methods to “this”.

var app = angular.module(“movieHunter”, []);

var SearchByMovieCtrl = function () {
    this.movie = {
        title: ‘The Fellowship of the Ring’,
        director: ‘Jackson’,
        date: ‘2001-12-19′,
        mpaa: ‘PG-13′
    }
};

app.controller(“SearchByMovieCtrl”,
        SearchByMovieCtrl);

The “controller as” syntax is clean and easy. But the explicit $scope syntax may be easier to understand when first learning.

#8 Controller with IIFE

A key issue with several of the above techniques was concern about the global namespace. Any variable or function declared external to a function becomes part of the global namespace of the application. This can be a problem, especially as the application gets larger.

One way to mitigate this problem is to use an Immediately Invoked Function Expression or IIFE (pronounced “iffy”). The idea of an IIFE is that if variables and functions are declared within a function, then the variables and functions are local to that function and not part of the global namespace.

You can wrap *any* of the above examples in an IIFE. Below is the code for example #7 wrapped in an IIFE:

(function () {
    var app = angular.module(“movieHunter”, []);

    var SearchByMovieCtrl = function () {
        this.movie = {
            title: ‘The Fellowship of the Ring’,
            director: ‘Jackson’,
            date: ‘2001-12-19′,
            mpaa: ‘PG-13′
        }
    };

    app.controller(“SearchByMovieCtrl”,
            SearchByMovieCtrl);
})();

For more information on IIFE by the person that coined the term, see this post.

You can use an IIFE with any of the above techniques to minimize pollution of your global namespace.

There you have it … 101 …  ok … 8 … ways to create a controller.

Enjoy!

PS circleCheck out my Pluralsight courses!

P.S. I am currently working on an Angular course for Pluralsight entitled “AngularJS Line of Business Applications”. Please comment below if you have suggestions for content that is not covered well elsewhere. Thanks!

New Blog Host

Filed under: General @ 6:35 pm

My blog has just been migrated from Community Server to WordPress.

That means:

  • It has a nice new look!
  • As of right now, the image files are not linked.
  • Many of the links to my other blog posts are broken.

Let me know what you think of the new layout!

July 10, 2014

Angular ng-grid Quick Tip

Filed under: AngularJS @ 12:47 pm

I added a grid page to one of my applications using ng-grid (http://angular-ui.github.io/ng-grid/) to provide a quick way to update sets of prices.

But it wasn’t working correctly. If I edited one price and clicked to the next row, the edit box on the prior row did not close. After editing three prices the grid looked like this:

image

And looking at the output, I found this:

Exception was thrown at line 3494, column 17 in http://localhost:3950/js/ng-grid-2.0.11.debug.js
0x800a01b6 – JavaScript runtime error: Object doesn’t support property or method ‘focus’

After spending the better part of yesterday afternoon trying to figure out what was wrong, I gave up and decided to start fresh again this morning. (Always a good option when you are stuck.)

As part of my debugging, I had found a working example here: http://plnkr.co/edit/hy6Evh?p=preview

So I downloaded that example and started to modify it to match my existing code. Was it the routing? No. Was it the other loaded controls like the date picker or masked edit? No.

It turned out to be the ORDER of the script files in my index.html.

To see the problem in action, try this: http://plnkr.co/edit/p4iLdfoYydZ9LKU312zK?p=preview

This is the *same* as the prior Plunk except for the order of the script files.

For the ng-grid to work correctly, the jquery library must be listed BEFORE Angular.

<script src=”js/jquery.js”></script>
<script src=”js/angular.js”></script>

Now it looks much better:

image

Hope this tip helps others!

Enjoy!

PS circleCheck out my Pluralsight courses!
Next Page »

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