TypeScript tutorial with examples of Angular controller, directive and service
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.
Price&Cost is currently looking for a Senior full-stack developer in Finland and Estonia to help deliver new exciting features to our growing customer base!
Please see my previous article on Using TypeScript with Angular 1.x which should give you a good head start.
Angular Controllers
Business logic is a key aspect of any project and it is usually contained inside the Angular controller code. In this TypeScript tutorial we want to demonstrate how to convert your Angular controllers into TypeScript and how to write your controllers in a readable and maintainable form. Angular 1 controllers often manipulate the $scope variable – they add various variables and methods to the $scope thus making these available in the view. Here is a simple example of a controller and its view in Angular in pure HTML and JavaScript:
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!
Angular Services
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:
Angular Directives
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.
Conclusion
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.
Share this post:
