• November 23rd, 2015

TypeScript + ASP.NET Web API + AngularJS Bootcamp – Week 2

We finished week 2 of the 9-week boot camp. This week was AngularJS week. We covered building the front-end of a Single Page App with the AngularJS framework. In particular, we covered topics such as client-side routing, making Ajax calls using the $http service and the $route factory, building custom AngularJS services, working with Google Maps, using Angular UI Bootstrap, and uploading files to services such as FilePicker.io.

Building an AngularJS app with ECMAScript 2015 (the latest version of JavaScript) is a very different experience than building AngularJS apps with the old version of JavaScript. For example, you use JavaScript classes to implement controllers and services. And, you perform dependency injection by taking advantage of class constructors.

For example, here’s how you can create an AngularJS controller that retrieves a list of movies from the server and exposes the movies with a public field named movies:

namespace MyApp.Controllers {

    class MoviesController {
        public movies;

        constructor(private $http: ng.IHttpService) {
            this.$http.get('/api/movies')
                .then((response) => {
                    this.movies = response.data;
                })
                .catch((response) => {
                    console.error('Could not retrieve movies.');
                });
        }
    }
    angular.module("MyApp").controller('MoviesController', MoviesController);
}

Notice that the list of movies is retrieved in the JavaScript class constructor. You have access to the $http service through constructor dependency injection.

Notice, furthermore, that the code above uses fat arrows (lambdas) instead of anonymous functions.

And, here is how you would display the list of movies in an AngularJS view by taking advantage of Controller As syntax:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyApp">
<head>
    <title>My App</title>
</head>
<body ng-controller="MoviesController as controller">
    <ul>
        <li ng-repeat="movie in controller.movies">
            {{movie.title}}
        </li>
    </ul>

    <script src="/Scripts/angular.min.js"></script>
    <script src="/ngApp/app.js"></script>
    <script src="/ngApp/controllers.js"></script>

</body>
</html>

In the view above, the ng-repeat directive is used to iterate through each of the movies exposed by the MoviesController and display each movie in a bulleted list.

I find the ECMAScript 2015 way of working with AngularJS much more natural than the older JavaScript way.

Student Progress

At the end of the week, students tackled a large JavaScript+AngularJS project. They worked together to build an interactive Car Dealership application. In order to build the application, they needed to use client-side routing, interact with a REST service using a $route factory, and perform filtering and sorting.

Students took turns building the application in the front of the room. I was super proud of the fact that they managed to build the entire app on their own (okay, maybe they had one or two hints from the instructors).

I keep forgetting that the students have only two weeks of experience using JavaScript (ECMAScript 2015) and AngularJS. These guys have been working hard on their labs each night and it definitely shows in their progress.

Next Week

Next week we shift from the client-side to the server-side. Students have a single week to learn C#. We focus all week on building console apps. We want the students to get fluent with C# before they start building ASP.NET applications.

I have confidence in these guys. Now that they are comfortable writing code with ECMAScript 2015 – and they have already become familiar with classes, interfaces, arrow functions, and dependency injection – they should find C# very familiar.

Learn More

If you want to sign up for our next Seattle boot camp then register here.

Discussion

Comments are closed.