TypeScript tutorial with examples of Angular controller, directive and service
1st February 2017
We’ve showed you already how to create a small Angular application with a TypeScript controller from scratch. Here is another TypeScript tutorial in which we demonstrate how to write an Angular controller, a directive and a service.
Please see my previous article on Using TypeScript with Angular 1.x which should give you a good head start.
As we can see the $scope variable acts as “glue” between the Angular controller and view. It is now, however a very good practice to put all of these variables and methods straight into the $scope as advised in the AngularJS Google Style Guide. Instead we should expose our controller to the scope as a variable using the “controller as” syntax in the view. In the following code chunk we move all variables and methods from the $scope to the controller and update the view to be able to bind to them:
This controller is now looking good, but we still lack the goodness that TypeScript brings to the table – autocomplete, refactoring, “traditional” classes and many more. So let us convert this into TypeScript to get all those perks:
NB! For instructions on how to get the angular.d.ts file check out my previous article on using TypeScript with AngularJS.
Voilà! We now have an Angular controller written as a native TypeScript class that can be easily used in your HTML template!
Services are even easier than controllers as they represent a simple class that is not directly connected to the user interface. Here is a simple service that keeps the number of button clicks:
Directives are very similar to controllers in many ways. Here is a simple example of a directive that follows the same logic as the Angular controller that we discussed before. We have a controller here for the directive that handles the business logic, thus eliminating the need to add garbage to the $scope variable. In addition we add the SimpleClickCoundService as a dependency and use it in our directive code. The directive’s template and TypeScript code is as follows:
As you can see this directive is intentionally very simplistic in order to keep this TypeScript tutorial focused on the important stuff. The code above demonstrates that it is very easy to encapsulate the directive logic in a single TypeScript class.
In this TypeScript tutorial we’ve demonstrated that there is nothing difficult in writing Angular 1 code with TypeScript. In fact, it’s much easier and definitely more enjoyable, as with TypeScript you get compile-time type checking, better tool support (provided that you are using Visual Studio, Visual Studio Code, JetBrains WebStorm or any other IDE with rich TypeScript support) and all the other perks that TypeScript provides. Happy coding!
You can find the complete source code for this article here. Just follow the instructions in the README file to create an app that uses all of the code presented above.
Filed under Development