Additional information - JavaScript in Plain Language (2015)

JavaScript in Plain Language (2015)

Additional information

For updates and further exploration of controllers (aside from what is covered in this eBook) please visit the following post at JSplain.com: Notes on controllers.

The ng-model

AngularJS can sometimes be really simple.

Please take a look at the following script based on the JavaScript exercise we did on Part C:

Fahrenheit to Celsius / to Fahrenheit conversion | bit.ly/ZQgTRW

Do you still remember how we did the JavaScript raw version of this algorithm?

To refresh your mind see the third example shown in the forum:
Lab 6 | bit.ly/1Dp2SKk

Now, back to the first link on the top, it looks pretty cool and it is being displayed on a web page. When we change the value inside of the text box, it converts the value to Celsius or Fahrenheit automatically.

Let’s take a look at the script to see what it was done to it. It is much simpler than our original JavaScript version from lab 6.

In the forum you will find a live demo and the script right below it. Please read the explanation for each line of code:

forum board | bit.ly/ZQieYU.

After reading the description in the forum and play with the demo a bit, please return back here for some lab work. We are going to do this project in less than 10 minutes, promise!

Lab work, creating the conversion script

Did you notice there is no controller or module declared for the temperature conversion program?

AngularJS can many times save us hours of work and it is getting better as they improve their game. For the job at hand all we need are a few tools (and an introduction to the ng-model directive):

a) A link to the library

b) An ng-app directive

c) An ng-model directive.

d) A few double curly braces

e) And two HTML input boxes.

Ready to begin?

1- Let’s get our basic HTML script:
raw file |

2- Save it as conversions.html

3- In the BODY, replace hello with one DIV containing two other DIVs inside it:
<div>
<div> </div>
<div> </div>
</div>

4- If you are not using my given starter file, make sure to include an ng-app directive on your opening HTML tag (or on a DIV that wraps the view).

5- On the top most opening DIV tag from step 3, declare an ng-init to initialize two variable as shown below (the init is because we are not going to use a controller in this project):
<div ng-init="f=32;c=0">

At this point we should have the following on the HTML page:

a) The link to AngularJS’ library ( it came with the skeleton script),

b) The ng-app directive somewhere on the page,

c) And the ng-init to introduce variables f and c to AngularJS.

6- Just for testing purposes let’s write some curly braces inside of the DIV container like this (any of the DIV containers):
{{f -c + f}}
Then save it and open it on your browser.

· If you see this: {{f -c + f}} on display, you have a problem. Inspect your code to see what is missing or misspelled.

· If you see the number 64 displayed, then your script is working so far.

Once your script is working properly, remove the curly braces and continue the project. Early testing is always a good idea in order to save loads of time and headaches later. We should test in gradual stages before we move on to the next implementation phase. This way we always know where the problem might reside.

7- The next step is to design the first input box.
Inside of the container created by the second pair of DIVs,
write an input box of type number.
(About input boxes: HTML input | bit.ly/1qy2lvA )
Also include a description on the left side. Here’s my example:

Fahrenheit to Celsius: <input type="number">

NOTE: You may be accustomed to use self-closing tags like this />. It works either way. With the advent of HTML5 I prefer to write without self-closing.

8- Great, now let’s add an ng-model to the input box and assign it to variable f:
Fahrenheit to Celsius: <input type="number" ng-model="f">

If you have read my explanation about ng-model on the forum demo you will know that the directive ng-model is an object that saves the data inputted by the user, and links it (or binds it) to the variable assigned to this ng-model, the =”someName” part of this declaration (sort of what prompt() does in JavaScript when is assigned to a variable). In this case it is variable f which although it defaults to 32, it can be changed by the input data the user enters on this text box and thanks to the binding provided by ng-model.

· Do not confuse these terms: model versus module.

Module is the complete application. Model is a little object that saves data and binds it to some variable. There could be hundreds of little models in one Module.

9- Let’s finish this line by adding the curly double braces to the right of the HTML input box.

Inside of the braces include the formula to convert from Fahrenheit to Celsius:

{{(f-32) * 5 / 9}}c

NOTE: The little c on the right is just a character to tell the user that this result is in Celsius. It has nothing to do with the variable c previously declared.

The whole line should look like this:
Fahrenheit to Celsius: <input type="number" ng-model="f"> {{(f-32) * 5 / 9}}c

10- Save it and test it.
At this time all your DIVs should look like the following:

<div ng-app ng-init="f=32;c=0">
<div>
Fahrenheit to Celsius: <input type="number" ng-model="f"> {{(f-32) * 5 / 9}}c
</div>
<div></div>
</div>

11- Now, let’s write the input box for the conversion of Celsius to Fahrenheit.

On the next DIV container write the following code:

<div>
Celsius to Fahrenheit: <input type="number" ng-model="c"> {{c * 9 / 5 + 32}}f
</div>

12- Test it, test both conversions.

The final result can be seen on the
Forum board | bit.ly/ZQieYU.

Would you like extra practice?

You can add an extra box and initialize another variable like for example k:

Here are some possible conversion formulas:

a) Kelvin to Fahrenheit: (K - 273.15) * 9/5 + 32

b) Kelvin to Celsius: K - 273.15