The next version of ECMAScript is on the way, and I’m  genuinely excited about the changes to the JavaScript language. Thus, a series of posts with code and commentary will commence.

let: The Story

Variable scope in JavaScript has been a source of surprises and bugs over the years. The surprise is because JavaScript only offers function scope and global scope to control the lifetime of a variable. There is no block scope.

var doWork = function(flag){
    if(flag){
        var x = 3;
    }
    return x;
};

var result = doWork(true);
expect(result).toBe(3); // PASS!!!!!

The new let keyword of ES6 will replace var for variable declarations and provide true block scoping.  

var doWork = function(flag){
    if(flag){
        let x = 3;
    }
    return x; // ReferenceError: x is not defined
};

// Prepare for runtime error ...
var result = doWork(true);
expect(result).toBe(3);  

Iteration statements also benefit from let.

var doWork = function(){
    for(let x = 0; x < 3; x++) {
        // ...
    }
    return x; // ReferenceError: x is not defined
};

let: The Significance

The var keyword is still supported in ES6, but should be thought of as an obsolete keyword when writing ES6 code.

let is the new var!

Will let make JavaScript code better?

I doubt if let will prevent a significant number of bugs, but I do think JavaScript code will improve.

• We can declare variables close to where they are needed instead of declaring all local variables at the top of a function, which is a defensive practice followed today to avoid var related bugs.
• We don’t need to introduce a second nested function or IFFE only to control the scope of a variable (another defensive practice you’ll see in JS libraries).

The end result is code using let should be easier to read, and perhaps just a tiny bit safer, too. Next up we’ll look at const, and eventually move on to some of the prime movers for a paradigm shift in JavaScript programming.

Want more? Watch JavaScript Fundamentals for ES6 on Pluralsight!

It was over a decade ago when I was first asked to generate Microsoft Office files from a web application. In those days there weren’t many options available to create Office files, but for small applications it was possible to automate Office programs on the server with COM. Since Office wasn’t designed to run on a server, the automation approach always felt like climbing a frozen waterfall. From a support page:

Microsoft does not currently recommend, and does not support, automation of Microsoft Office applications from any unattended, non-interactive client application or component … because Office may exhibit unstable behavior and/or deadlock when Office is run in this environment.

These days, Office files are no longer in a proprietary binary format, and are we can create the files directly without using COM automation. A .docx Word file, for example, is a collection of XML documents zipped into a single file. The official name of the format is Open XML.

There is an SDK to help with reading and writing OpenXML, and a Productivity Tool that can generate C# code for a given file. All you need to do is load a document, presentation, or workbook into the tool and press the “Reflect Code” button.

The downside to this tool is that even a simple document will generate 4,000 lines of code. Another downside is that the generated code assumes it will write directly to the file system, however it is easy to pass in an abstract Stream object instead.

So while this code isn’t perfect, the code does produce valid document and  is useful for figuring out how the SDK classes work together. It’s also not difficult to rework the logic so the class functions as a “view”. You can pass in a model object and have the code dynamically generate a document by replacing hard coded content inside with data from the model.

Although Batarang gets a lot of attention, there may come a time when you need to dig a bit deeper into an Angular application, particularly if you are debugging or spelunking someone else’s application and you aren’t familiar with the entire code base.

Here are some tricks I’ve learned.   

Find The Scope For An Element

Update: note  David Boike's comment- "When you have Batarang installed in Chrome, no need to type out angular.element($0).scope() - Batarang makes the scope of the last clicked element available in the console as '$scope'"

A non-trivial page built with Angular will have dozens of scopes containing model information for controllers, directives, transclusions, and repeaters. Although Batarang provides a clickable hierarchy of scopes on the Models tab, it’s sometimes difficult to find the exact scope you need.

In these scenarios I’ve found it faster to use Chrome’s $0 symbol in the developer tools console window.

You’ve never used $0? Here is an excerpt from the Chrome console documentation:

Often when testing you'll select DOM elements—either directly in the Elements panel or using the Selection tool (magnifying glass)—so that you can further inspect the element.

The Console remembers the last five elements (or heap objects) you've selected and makes them available as properties named $0, $1, $2, $3 and $4. The most recently selected element or object is available as $0, the second most as $1, and so forth.

Once you have an element reference, you can wrap the element with angular.element and use the scope method to retrieve the associated scope.

Once you have the scope, you can drill in to see details, or take the $id property to find the scope in Batarang’s display.

Evaluate Binding Expressions

If an element has an ng-binding attribute present, you’ll find the function used to execute the binding in the data property of the element. Combine the function with a scope object or a custom object (if you want to tinker with the binding), to see what the binding function produces.

The data of an element can also hold other interesting pieces of information, like a reference to a controller.

Interact With Services

The injector method gives you access to the single injector for an application, and the injector can give you access to any service from the application. Using a service interactively allows you to play with the service, debug it, pass it strange parameters, and watch to see how it behaves.

One last tip: you can always check the version of Angular a page is using by typing angular.version in the console.

NDC Oslo featured some fantastic content, and most of the talks are uploaded to the NDC vimeo channel.

In addition to a 2 day AngularJS workshop, I presented one session on building directives for AngularJS.

Also a session on using NodeJS tools for front end development (npm, Bower, Grunt, Gulp, Treceur, and more).

I hope you like them!

Here is a plunk that demonstrates how to reset an Angular form. The form itself will display any element with a dirty flag using a thick red border. The ngModel and ngForm directives automatically add the ng-dirty class to elements with a dirty flag, and the CSS rule applied is like so:

.ng-dirty {
    border: red 5px solid;
}

Notice how typing into an input not only makes the input dirty, but also makes the form itself dirty (a double border).

You might also notice when typing into the first input how the dirty flag takes a couple seconds to appear. The delay is because of the new ngModelOptions directive in 1.3. With ngModelOptions you can specify the events required to push values into the model (perhaps using the blur event instead of the keypress event), and also debounce the data binding by specifying a number of quiet milliseconds to elapse before pushing data. The example plunk is waiting for 2,000 milliseconds.

<form name="editUserForm">

    <input type="text" ng-model="user.firstName" ng-model-options="{debounce:1000}"/>
    <input type="text" ng-model="user.lastName"/>
    <input type="submit" value="Submit"/>
    <input type="button" value="Reset" ng-click="reset()"/>

</form>

The reset button will set the form back into a pristine state using $setPristine. $setPristine recursively sets all the controls inside the form to a pristine state, too. It’s up to the application logic to replace the data, perhaps by making a copy of the original form data, as shown below.

$scope.user = {
    firstName: "Scott",
    lastName: "Allen"
};

$scope.originalUser = angular.copy($scope.user);

$scope.reset = function(){
    $scope.user = angular.copy($scope.originalUser);
    $scope.editUserForm.$setPristine();
};

Quite a bit of power from a minimum amount of code.

AnguarJS: Get Started is now available to Pluralsight subscribers.

This video course is a small but focused subset of my full Angular class. The course assumes you know a bit about HTML, CSS, and JavaScript, but want to start from the beginning and learn about the core pieces of Angular, like how to work with controllers, services, and directives.

In the video we’ll build a “GitHub Viewer” application to search GitHub users and repositories.

I hope you like it!

You can try the code in this post yourself.

Imagine we have the following movie data returned by an API call from the server.

var movies = [
    { title: "Godzilla", genre:"Action", released: 2014},
    { title: "Neighbors", genre: "Comedy", released: 2014},
    { title: "Into The Woods", genre: "Musical", released: 2014},
    . . .
];

Now, we need to display the data and allow the user to filter on genre, release year, or both. First, we’ll use lodash to build a unique list of available options for these attributes, and then store the options in scope.

app.controller("mainController", function($scope, movieData) {

    $scope.movies = movieData.getAll();

    $scope.genres = _.chain($scope.movies).pluck("genre").uniq().sortBy().value();
    $scope.years = _.chain($scope.movies).pluck("released").uniq().sortBy().value();

    $scope.clearFilters = function(){
        $scope.selectedGenre =  undefined;
        $scope.selectedYear = undefined;
    };

});

In the view we can build the filtering selects and a table using ngOptions and ngRepeat.

<div ng-controller="mainController">

  <select ng-model="selectedGenre" ng-options="genre for genre in genres"></select>
  <select ng-model="selectedYear" ng-options="year for year in years"></select>
  <button ng-click="clearFilters()">Clear</button>

  <table class="table">
    <thead>. . . </thead>
    <tbody>
      <tr ng-repeat="movie in movies |
            filter:{ genre: selectedGenre, released:selectedYear }">
        <td>{{movie.title}}</td>
        <td>{{movie.genre}}</td>
        <td>{{movie.released}}</td>
      </tr>
    </tbody>
  </table>

</div>

Notice how the filter filter in Angular understands how to take an object expression and apply predicates to the specified attributes.