Developers Corner

Client-Side Frameworks and AngularJS 2

Posted by Mike Draganza on May 31, 2016 3:33:46 PM

Recently I’ve been working with AngularJS 2, the latest edition of that widely used JavaScript framework. I enjoy working with it so much that I thought I’d dedicate a blog post to it. This post is a little more technical, but I want to give some insight into how this powerful framework allows developers to deliver a very responsive Single Page Application.

Client-side frameworks have been around for years and there are many of them, but Angular is the most popular. It is open source, but much of the work is done by a dedicated team at Google. Frameworks are different from JavaScript libraries. A library is meant to complement and enhance whatever environment you are working with. An example is how the popular JQuery library used within HTML greatly simplifies manipulating the DOM with plain JavaScript. Frameworks contain and direct the work done by the developer. Think of working within Microsoft Word vs. working within Microsoft Excel. You have to abide by a certain set of rules.

In any discussion about how Angular works the term data binding normally comes up. Data binding is the ability to replace tokens within an Angular template with data values, which are normally fetched from a web service. A template is simply HTML5 markup sprinkled with Angular tokens. Here is a simple example.

<h3>Hi, my name is {{employee.name}}!<h3>

The template is attached to an Angular component, which is similar to a class in C# or Java. The component declares the properties that hold the data values. In this case we have defined a component that might be called EmployeeComponent. Defined within that component is an employee data structure that has a property called name. When the user clicks on a link that routes them to EmployeeComponent, the Angular framework core loads the template attached to it and looks for tokens that it recognizes. There are several such tokens and one of them is denoted by curly braces as in the example. Angular replaces the token with the value in the employee.name field. After all tokens on the page are processed, Angular hands the HTML to the browser to display on the screen. The process of interpreting and replacing tokens within the template is called interpolation. The result is:

Hi, my name is Mike!

Besides data binding, the template can also process events.

<button (click)=”OnSave()”>Save</button>

When the user clicks on the button, Angular calls the OnSave() function of the component.

Previously, I glossed over how to obtain the data that is bound to the template. Typically, it is through a call to a web service and the mechanism for that call is the $http service provided by the Angular framework. The syntax can be rather daunting, but basically you pass the URL of the web service and receive back what is referred to as a promise, which is not the actual data. A promise is Angular’s way of saying that it promises to give you the data when the asynchronous processing is complete. In the meantime, other processing can continue.

Another key concept is two-way data binding. We’ve already seen one-way data binding with the dual curly braces. Two-way data binding means that the string value will appear on the screen and it will also change the property on the component as the user is typing.

<input [(ngModel)]=”employee.name”>

Angular has the ability to not only enhance HTML via the use of tags, it also allows you to create your own tags, which are called directives. The EmployeeComponent might appear in the template of it’s parent just as if it were native HTML

<MyEmployee>[name]=’Mike’ [manager]=’Paul’</MyEmployee>

 This also shows another form of data binding called attribute binding. The properties name and manager of the EmployeeDetail component are initialized to Mike and Paul.

Finally, it’s worth mentioning that Angular has some built-in directives that add and remove sections of HTML (typically div statements) to and from the DOM. They are ngFor, which loops though an array and displays its containing element for every item in the array and ngIf, which displays its containing element if a boolean condition is true.

There you have it; a basic introduction to AngularJS 2. If you would like to actually dip your toe in the water and work with it a little, I suggest going to the official Angular site angular.io, click on the DOCS link at the top and then the QUICKSTART link on the left. Go through the 5 MIN QUICKSTART. It may take a little longer than 5 minutes, but not much. The documentation on the site is excellent and there is plenty of it. I’ve just scratched the surface of this powerful framework.

 

Topics: client-side frameworks, enhancing HTML, data binding, AngularJS, JavaScript framework

Gain visibility into your Office 365 Deployment

See why monitoring makes sense in a cloudy world.