Angular, TypeScript, RequireJS, and More, Pt. 2

Now that we have our project set up, we can start building our application.

This post contains a number of templates you can use to start hacking away.

Module

/* To ensure other modules your app depends on loads before your app,
* ensure you have these amd-dependecy special comments at the top.
* This loads them without actually importing them.
*
* Be sure to export your module, so you can register components on it
* later.
*//// <amd-dependency path="ui-router" />/// <amd-dependency path="ui-bootstrap" />import{module}from"angular";exportvarapp:angular.IModule=module("app",["ui-router","ui-bootstrap"]);

Controller

/* We can use classes as controllers. These classes can also work as
* controllers for directives.
*/import{controller,IHttpService,IScope}from"angular";import{app}from"../app.module";// If we want things on the $scope, we need to make a custom scope interface// that extends the default.IAppScopeextendsIScope{disabled:boolean}// export the class so we can import it into our unit testsexportclassAppController{// To inject dependencies, use the $inject syntaxpublicstatic$inject:Array<string>["$scope","$http"];// Put whatever you're binding on your views in the public spacepublicuser:string;// Be sure to save references to injected services if you need access to them// outside the constructorprivate$http:IHttpService;private$scope;IAppScope;constructor($scope:IAppScope,$http:IHttpService){$scope.disabled=true;this.$scope=$scope;this.$http=$http;$http.get("http://example.com/myresource").then((data:string)=>{this.user=data;$scope.disabled=true;});}}app.controller("AppController",AppController);

Directive

import{IDirective}from"angular";import{app}from"../app.module";app.directive("myDirective",MyDirective.Factory);// Now we can even extend our directive if we want to inherit from it.classMyDirective{publicrestrict:string="E";publiccontroller:MyDirectiveController=MyDirectiveController;publiccontrollerAs:string="vm";publicstaticFactory():IDirective{returnnewthis();}}exportclassMyDirectiveController{// ...}

Service

import{IHttpService}from"angular";import{app}from"../app.module";// Make sure to make interfaces of any models you're getting.exportinterfaceIJsonPlaceHolderPost{userId:number;title:string;body:string;}// Much like classes, services are new'd up, so we can use regular classes// Export the service so we can import it into our unit tests later.exportclassMyService{publicstatic$inject=["$http"];private$http:angular.IHttpServiceconstructor($http:angular.IHttpService){this.$http=$http;}publicgetPost(id:number):angular.IHttpPromise<IJsonPlaceholderPost>{returnthis.$http.get(`http://jsonplaceholder.typicode.com/posts/${id}`);}}app.service("myService",MyService);

Factory

import{IWindowService}from"angular";import{app}from"../app.module";exportinterfaceIUserInfo{username:string;token:string;fullName:string;}// This time we use a factory pattern to create the service.exportclassMyService{publicuserInfo:IUserInfo;constructor(userInfo:IUserInfo){this.userInfo=userInfo;}publicstaticfactory($window:IWindowService){varuserInfo:IUserInfo=JSON.parse<IUserInfo>($window.localStorage.userInfo);returnnewthis(userInfo);}}MyService.factory.$inject=["$window"];app.factory("myService",MyService.factory);

Provider

The biggest difference here is that we can configure a provider during any
angular config calls, such as injecting an API endpoint.