Angular2 is the latest buzz word in web programming and frankly speaking, I am in love with it. It seems to be the “Docker” for web! Well I am also in love with “Docker” and the good part is that both Angular2 and Docker do not mind me loving them at the same time ;). Jokes apart, I particularly like Angular2 because of the component concept and its inherent support for TypeScript (TS). Components truly allow for creation of re-usable web components since they also encapsulate the “view” aspect. Hence no more grappling / switching between a model/view/controller. Everything is inside a component. You use the component and you get an automatic binding with the needed controller and view. This takes re-usability to the next level. Also for someone like me whose background is systems programming, components can be seen as class object exposing certain methods/properties (i.e. basic encapsulation). Components also allows for extension (i.e. inheritance) and can be tested individually, so once confirmed working, they are always working without any external dependency. That said, there are quite a few tutorials out there which creates a basic ToDo app with Angular2 and yes, it is pretty cool. But when you try to make something useful out of what has been learned from the ToDo App, the details bog us down. In any case, #FreeCodeCamp (#FCC) project on Pomodoro Clock was my trigger to use Angular2. I have the project hosted on Plunker (Pomodoro Clock) which uses Angular2, TS and Semantic-UI. I am also a big fan of Jade so have used it a little bit in the index.html but using it inside a component template seems to be a bit awkward. Though we can do so, I have used normal HTML since the components are broken down and are quite simple. Pomodoro clock is basically a countdown timer which alternates between a session time and break time and increases productivity (Google it if you want to know more).
Enough talk, lets start with the code explanation. The first file in the plnrk is a config.js file. This file basically allows for using the typescript transpiler and tells our web application to use angular2 and rxjs. This file will be automatically generated with the right parameters if you select a new AngularJS->2.0.x(TS) project in Plnkr menu. So nothing interesting really. We skip it and go to the next index.jade file. This is the jade file that I am using i.e. it is the one which is compiled into html and rendered in the browser window and which also creates and loads the Angular2 application. The structure is pretty easy to know if you have done any jade programming. There is a title and then a bunch of scripts which are brought in for including jade, jade runtime, zone, reflect, transcript, semantic-ui, jquery (needed by semantic-ui) and rxjs. We also see our config.js being referenced and our ‘app’ imported. There is also a custom font that I generated from enjoycss.com which I am using across my #FCC projects with some very basic beautification css. Rest of the the file is self-explanatory, but look particularly at line 33.
app
That is exactly where our src/app.ts is getting called. But you say that app is in src directory, how does angular find it. Look into config.js which has a map which tells the system loader as to where to look for the ‘app’. Before I forget, we see div.ui.grid.container.centered on line 31 which is using the UI class from semantic-ui. I like that one too since it provides a host of components out of the box for use. But before we go to app.ts, lets look at the main.ts. This file is the one which bootstraps our App class i.e. its loads/initializes/starts our angular app. There is generally only one class that is bootstrapped (though I have played with multiples and it all seems to work. It can look as a bad design though so avoid it). Main.ts imports the bootstrap class from angualr2 and the app class from app.ts and bootstraps it. If there is an error, it is directly printed in the HTML.
Now we go to src/app.ts which imports Component class from Angular2 with break and session (which I have written) and observable from rxjs. The part to know about is @Component({…}). The selector in here defines the selector we should use inside our HTML to load the particular class. In our case, I have named it app but you can name it whatever you like and call it in the index.jade on line 33. We are not using any providers in this app. Then we have a template which shows our top level UI again using components from semantic-ui. Line 25-26 are the important ones which invokes our session and break components using the specified selector.
< session-length >
[sessionTime]="sessionTime" (changedSessionTime)="sessionTimeChanged($event)" [sessionDisabled]="inputDisabled"
< /session-length >
< break-length >
[breakTime]="breakTime" (changedBreakTime)="breakTimeChanged($event)" [breakDisabled]="inputDisabled"
< /break-length >
We are passing some input parameters and also waiting for an event which we expect to be generated from the component. Between, this code can be optimized to just use only one component instead of break & session but that we can do in the next post. For the template to work properly, we need to use Session and Break as directives to App component. Then we have the App class exported which has logic to update the progressbar as well as manipulate the parameters which are passed to the break & session classes. Before going into details here, lets look at the break.ts file. Basically, it is a simple component wrapping a number input defining the minimum and maximum values. The class Break expects breakTime and breakDisabled as input values. The field is disabled when the timer is ongoing. And then we have a valueChanged function which emits the value of the component as an output to whoever would like to know the value of the field. Since the initial value is given as an input, we do not need to emit the value in constructor. Note that we are using property binding in the template using [<propertyName>]=”<variableName>”. More details on bindings are in the Angular2 documentation. This is a one-way binding. We also have a property(breakTime) and event(change) two-way binding. The session.ts is similar. So if we take the min and max as input values as well, and modify the emit output to include some kind of indication on the output object, we can just have one component instead of 2.
Now back to app.ts, we can see that we are using the semantic-ui progress bar. The weird part with this one is that one needs to call the progress() function to get the progress bar to move. Just passing a value will not work. Do note that I can access my UI components in the class by using $(“#<UI_ID>”) and call the resulting methods/properties. This took quite a lot of time for me to figure out. Rest of the code is pure logic which I will not explain. Give your comments and see if you can progress from here. This sample code paves way for more complex applications by breaking it down into components as well as using classes, components, inputs, outputs and eventemitter.
HAPPY CODING!
Twitter