Google+

Upgrading to Windows 8.1 from the Windows 8.1 Preview

I recently upgraded a Windows RT device from the Win 8.1 preview to the final version of Win 8.1. Inexplicably, I found the install a bit confusing. There really did not seem to be a lot of information being displayed during the process, which made the install look like it was hung. I thought I would document the steps I took to make things a bit more apparent what is happening during the install.

To upgrade from Windows 8 to Windows 8.1, you are supposed to be able to go to the Windows store and see something like the screen shot below.

I DID NOT see this, most likely a result of running the Win 8.1 preview. So I followed Microsoft's instructions at http://windows.microsoft.com/en-us/windows-8/update-from-preview which has the link to install directly from the Windows store (ms-windows-store:WindowsUpgrade).

This starts the install, which begins by downloading a very large file. Unfortunately, it appears that nothing has been initiated leaving people to think the install has not started. In reality, the download has begun but the status is not being displayed. In order to see the progress of the download, you will want to use a second Windows Store URL, ms-windows-store:installprogress, to display the progress.

Entering this link in a browser will then show you the progress bar for the download

Update: Upgrades to Windows RT 8.1 have been temporarily suspended.

Update: As of October 23, 2013, update to Win 8.1 RT are back from Mary Jo Foley.


 

AngularJS - Introducing AngularJS Controllers

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 second 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.

In general, just binding text boxes on a page may be able to create a simple calculator, but it is not what the web of 2013 and beyond is about. We want our pages to interact with backend data stores, we want to display this information on the page and send it back to the server so it is there the next time we view the page.

Angular is really a Model View Controller (MVC) JavaScript library. The model is our data, the view is the presentation of this data and the controller is responsible for the marshalling between the two. In angular, this is done via the scope, which is a glorified object property bag available within your page. The first responsibility of the Controller is to create this scope object. The scope is then how you communicate with the view. The view is able to bind to properties and functions on the scope. It is also able to call functions on the scope. It is important to realize that the scope exposes the model to the view, however the scope is NOT the model. The model is updated, either via two way data binding on the scope, or functions on the scope that the view calls to update the data. So, if you are going to be doing a lot with Angular, say hello to your little friend, $scope.

Let's take a look at the pieces needed to bring this together. First off, harking back to a time long, long ago, I am going to be working with information from the Periodic Table from Chemistry during these demos, so you will be seeing chemistry naming as we going along, so let us alleviate the confusion up front.

First, we want to take a look at our HTML.

We are going to use Twitter bootstrap for some down the road reasons so we are going to add that CSS reference.

Second, we are adding a reference to chemistryApp.js. This is the starting script that identifies our Angular module. We are going to call our Application chemistryApp.

chemistryApp.js

'use strict';

var chemistryApp = angular.module('chemistryApp', []);

Now that our chemistryApp.js file is identified, we add a ng-app directive to our body tag. That tells Angular that chemistryApp will be responsible for our page.

Next, we want to create the controller. The controller will be responsible for managing data for the HTML view. Usually, controllers are associated with DIVs. First, we will create our controller called chemistryController.js<

We reference our module, chemistryApp, from ourApp.js file. We then identify the name of the controller, chemistryController and then have a second parameter, which is a function, that is our actual controller. We want to be sure to pass in any parameters our controller will need. Almost all controllers will require the $scope variable, since the controller interacts with the view via this, so almost all of our controllers will at a minimum have this.

As of now, our controller skeleton is built and ready to go, it just not doing anything at the moment

chemistryController.js

'use strict';

chemistryApp.controller('chemistryController',
    function chemistryController($scope) {

    }
);

We go and add our controller JavaScript file to our HTML with a script tag, but we have to update our HTML to identify where the controller will function. This is done via the ng-controller directive. The syntax is as so

<div class="container" id="ngChem1" ng-controller="chemistryController">

</div>

And for now, our HTML looks like

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Controller Demo 1</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
</head>
<body ng-app="chemistryApp">
<h1>Chemistry Controller</h1>
<div class="container" id="ngChem1" ng-controller="chemistryController">

</div>

<script src="angular.min.js"></script>
<script src="chemistryApp.js"></script>
<script src="chemistryController.js"></script>
</body>
</html>

This page renders, but does not do anything. Mostly as a result of us telling it to do nothing! In general though, these three steps are the basis of an Angular application.

  1. We identify ng-app, via chemistryApp.js, that is responsible for the page.
  2. We create a controller, chemistryController.js, that takes the $scope variable from our page and then populates it with data and/or functions so our HTML can later render it. We have not seen this in action yet, but soon.
  3. The last part then is identifying, via the ng-controller directive, the area of responsibility for our controller.

As previously mentioned, the $scope variable is the glorified property bag we use to populate data. So within our controller, we can go and set some values for display in our view/web page. In our example, that will be the name of a chemical element and it's atomic number, Hydgroen and 1. Our controller function now looks like

chemistryController.js


'use strict';

chemistryApp.controller('chemistryController',
    function chemistryController($scope) {
        $scope.elementName = 'Hydrogen';
        $scope.atomicNumber = 1;

    }
);

Now, we can have the values from our scope value inject into our HTML markup. This is done via our friend, the magical curly braces. It is as simple as

<b>Name:</b> {{elementName}} <b>Atomic Number:</b> {{atomicNumber}}

The value we set in our controller are automatically displayed.

Chemistry Controller

Name: {{elementName}} Atomic Number: {{atomicNumber}}


You can see these code samples in action at the companion site for this blog series, http://angularPeriodic.azurewebsites.net

Introducing AngularJS Controllers

You can download or view the code on Github, https://github.com/jptacek/AngularPeriodic/


 

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 http://angularjs.org/. 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>
<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app>
<div>
    <input type="text" ng-model="displayText"/>
    <h3>{{displayText}}</h3>
</div>
</body>
</html>

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.

{{displayText0}}

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.

{{displayText2.toUpperCase()}}

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.

Our HTML

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

 

Temperature (&degF)

Celsius:
{{ (((5/9)(tempF0-32))-0.0)|number:2 }}
&degC
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>
    <br/>
    <br/>
    <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/>
</div>
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, http://angularperiodic.azurewebsites.net/. Specifically

Hello World

Temperature Conversion

Sphere Calculation

 


 

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+