AngularJS - Introduction

AngularJS is a Javascript MVC framework from the fine folks over at Google. The focus of Angular is building complex HTML based client applications. Its design philosophy is data first, where your data will be updating the DOM. Contrast this to a framework like JQuery where the DOM will update your data.

AngularJS Logo

This is the first in a series of posts on AngularJS where we are using Chemistry data from the periodic table to help us understand the framework. The others posts are

  1. AngularJS - Introduction
  2. AngularJS - Introducing AngularJS Controllers
  3. AngularJS - Introducing NG-Repeat
  4. AngularJS - More with NG-Repeat
  5. AngularJS - Image Binding
  6. AngularJS - Introducing Templates
  7. AngularJS - Introducing Routing
  8. AngularJS - Introduction to Services
  9. AngularJS - Introduction to Directives
  10. AngularJS - Further with Directives
  11. AngularJS - Best Practices
  12. AngularJS - CSS Animations

Note: AngularJS does not allow for more than one ng-app directive. When I have multiple angular posts on the home page of my blog, only one application will work. I need to refactor the entire site to account for this. All of that to say this, you are best clicking on a single article so you can see the pages in action.

I am going to be dipping my fingers into Angular a bit over my next few blog posts, so I thought it would be worth starting with a very simple Hello World app, and then moving on to a temperature converter and finally a sphere calculator.

First, like all good Javascript programs, you will need to download the Angular library or link to a CDN version. You can always download the latest version from the Angular site at They will also show a link when you request a download of the latest Angular version via CDN, at the time of this writing the link is angular.min.js.

Here is our HTML based page that uses Angular.

<!DOCTYPE html>
    <title>Hello World</title>
    <script type="text/javascript" src="angular.min.js"></script>
<body ng-app>
    <input type="text" ng-model="displayText"/>

You can seed there are really four things we have done here.

  1. Link out to the CDN version of the Angular library by putting a script tag in our HTML
  2. The second is the inclusion of ng-app in our markup for the body tag. All Angular applications need to be wrapped in this directive. It indicates that everything within the tab can be part of an Angular application. For example, if we put the ng-app directive within a DIV tag, only content within that DIV would be within scope. It is probably uber-best practice to prepend angular tags (which are always ng-something, with a data attribute to ensure maximum HTML compliance, obviously, I am not doing that :)
  3. The ng-model="displayText" within the input type. This is the first part of our data-binding where we have angular setup the variables to the name of our control
  4. Last is the magical curly braces {{ }}. This is the Angular markup for databinding. It essentially says display our model variable displayText The cool thing is we are automatically displaying data from a HTML input control on our page and we have not written any Javascript. The framework is handling.


The databinding in Angular goes a little deeper than just displaying text. We would update our binding syntax to tie into Javascript functions. For example, changing displayText to displayText.toUpperCase() and our input will then be uppercased.


You can also have expressions, such as 'You typed: '+ displayText.toUpperCase().

This will then prepend the string 'You typed: ' to what is displayed in our browser.


You typed: {{ displayText3.toUpperCase()}}

The magic of curly braces continues though. Angular also has the concept of filters for our binding element that we can then apply to the code. We can have Angular upper case our code instead of doing it ourselves by having our binding be {{displayText | uppercase}}. You can also filter to things such as numbers, limit the inputs being displayed etc.

Next up, let's just combine a couple of things to make an HTML application to convert the temperature from Degrees Fahrenheit to degrees Celsius and Kelvin.


<div >
    <b>Temperature </b>
    <input type="number" ng-model="tempF" value=0>
    <b>Celcius:</b> {{ ((5/9)*(tempF-32)) |number:2 }} &degC<br/>
    <b>Kelvin:</b> {{ (((5/9)*(tempF-32))-273.0) |number:2 }} K


Temperature (&degF)

{{ (((5/9)(tempF0-32))-0.0)|number:2 }}
Kelvin: {{ (((5/9)(tempF0-32))-273.0) |number:2 }} K

And just since we are having so much fun, we can use angular to calculate the volume and surface area of a cube


<div >
    <b>Radius of Sphere</b>
    <input type="number" ng-model="radius" value=0>
    <b>Volume:</b>{{(4*3.141*radius*radius*radius)/3 | number:3}}<br/>
    <b>Surface area:</b>{{(4*3.141*radius*radius) | number:3}} <br/>
Radius of Sphere

Volume: {{ radiusZradiusZ | number:3}}
Surface area: {{ (4
3.141radiusZradiusZ) | number:3}}

It is pretty cool that we are able to write these quick little applications without any Javascript. Just by using Angular and it's built in databinding functionality!

I am still working on a good way to get some Javascript demos into my Wordpress blog. In the interim, you can check them out at an Azure website I created to host these demos, Specifically

Hello World

Temperature Conversion

Sphere Calculation



What Lyndon Johnson Taught Me About Programming


I can often be found reading a book and sometimes those books are history books. By far and away, the greatest biography I have run across is Robert Caro's multi-volume (and still ongoing) series on America's 36th President, Lyndon Johnson. Entitled "The Years of Lyndon Johnson", the series is currently four books long, with a fifth coming on Johnson's Presidency, and currently is over 3000 pages. If that sounds like a big time investment, realize the author published his first book in the series in 1982. He has been writing the series longer than some of our Skyline associates have been alive! It is a truly impressive piece of work, winning numerous awards including Pulitzers, National Book awards, etc.

So, what does a man who left the office of Presidency at the end of the 60s have to teach us about being programmers when we are all running around with mobile devices in our pockets that have more power than the U.S. Navy had when he retired? Obviously it is a bit of a stretch to say LBJ was teaching lessons to coders in 2013, but we can all learn from people who were the top of their field. And while you can make a case that LBJ was not a great President or Senator, he WAS one of the great politicians of the 20th century. Taking lessons from greatness in any field and applying them to your own field can be interesting, so let's learn what LBJ has to teach coders.

Have a Mentor - LBJ owes much of his political career to two men whom he adopted as mentors; Sam Rayburn and Richard Russell. Sam Rayburn, like LBJ, was from Texas and served with LBJ's father in the Texas House. Upon winning election to the U.S. House, LBJ developed a close relationship with Rayburn, who was in the U.S. House for almost 49 years. By the time LBJ arrived, Rayburn was one of the House leaders and would become the Speaker several years after his arrival. Rayburn provided not only advice to LBJ, but also assistance. He helped him get committee assignment he would not have been able to get otherwise.

After his election to the U.S. Senate, which people are appointed to based on time in office, Johnson quickly became the Senate Whip and then the Minority leader after only 4 years. This is almost unheard of in the staid senate. This is a result of LBJ's promotion by Sam Rayburn, but also his courting of Richard Russell as soon as he was elected. Russell was a very well respected senator, especially among the southern voting block which was trying to stop civil rights legislation from being passed. Russell was often the mediator between these southern senators and the rest of the senate body that was focusing on civil rights change. His courtship of Russell was what enabled him to become Senate Minority leader after only a few years as a senator

In my life, I have had several mentors that I could always turn to for advice and council on tricky programming things, which is great. However, and more importantly for me, they have provided me with great career advice and guidance. Now that I have been programming for a while, I am trying to repay the favor by always having an open door and talking with younger developers about their careers and ways that they can grow their career.

Moral of the story, find a mentor, be a mentor!

Listen - LBJ was a great listener. He would intensely listen to what people were telling him. As a consultant, this is probably one of the most important things you can do. And it is not passively listening, but listening to what your clients are not saying. The difference between how a coder listens and LBJ would, is that coders are listening to what their customers need. LBJ would be listening for weakness so he could end up getting his way, but I digress!

Be Pragmatic - LBJ could be pragmatic when needed. The inauguration of President Eisenhower in 1953 also saw LBJ elected by the Democratic Party as the minority leader in the Senate.

Upon the election of President Eisenhower, Republican leaders in the Senate wanted to repeal the Yalta accords, the agreement between Great Britain, Russia and the United States that followed World War II. Eisenhower was not willing to repeal the accords, causing much friction with his Republican colleagues in the Senate. LBJ, who realized the large margin of victory Eisenhower had during the election made him very popular, crossed party lines and supported the Republican President by saying they would not allow Republicans to modify the accords. The rift between Eisenhower and the Republican Senate leaders put Johnson in the spotlight since he supported the President and allowed him and his Democratic colleagues to side with a popular President.

The best developers are pragmatic. They look for and use the best tools to solve problems and jump at opportunities.

Follow the Leader - One of the differences between working at a consulting company, as opposed to a contracting company, is that you are consciously focusing on challenging the organization you are working with to be better. People hire consultants to help improve their business, they hire contractors to do what they are told. However, sometimes you need to speak your mind, advocate for what you believe in, but ultimately know when to say when and follow the leader. Early in his career, especially when working with Sam Rayburn, LBJ was always sure to follow the lead from his party leaders in Congress.

Count - As leader of the Senate, LBJ never let a bill go to vote unless he explicitly knew what the vote count was going to be. He was a master of scheduling bills for vote when he knew certain Senators would not be there ensuring the laws he wanted were passed.

As developers, we should practice similar behaviors. Unit tests and testing in general should be used so we are sure code is not released to production before it is ready.

So, while we started out this post about what LBJ taught me as a programmer, it is really programming agnostic. Great politicians bring people together, which is what leaders do. LBJ can teach us how to be better leaders, be they from teams you are on to being the CEO of a company. Find mentors, listen to those around you, be pragmatic, help the leader and don't rush things out until they are ready.

This blog post originally appeared at Skyline Technologies


2013 That Conference Presentation

Thanks to everyone who came to my 2013 That Conference talk

My slides can be downloaded at

Links that may be of interest


John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinionss, which are not those of my employer.

Currently, I am reading Norse Mythology by Neil Gaiman

@jptacekGitHubLinkedInStack OverflowGoogle+