Silverlight to Angular – 1

So from my previous blog you all know that I am moving towards Angular for our front end development. I am planning to write series of blogs on how to take Silverlight knowledge to Angular. But if you want to learn Angular without the Silverlight background, please head to this great example. Without further ado, lets look at our hello world program.

Problem: We are asked to create an app, which will display ‘Hello World’.

Silverlight:

As you all know, Silverlight follows MVVM pattern. In this case, all we need to do is to display a static text ‘Hello World’. So there is no need for Model or ViewModel here. All we need is simple XAML with a TextBlock which displays ‘Hello World’ like the following

<Grid x:Name="LayoutRoot" Background="White">
    <TextBlock HorizontalAlignment="Left"  TextWrapping="Wrap" Text="Hello World" VerticalAlignment="Top"
               Height="25" Width="289"/>
</Grid>

So in here XAML is the ‘V’ ( – View) in the ‘MVVM’. Nothing complicated here, very simple. Compile and run the app and you will get a very simple ‘Hello World’.

Angular:

Now switching the focus to Angular world. Before we dig deep into Angular, we need to understand what is Front End Framework (FeF). If you are to develop application using HTML, you would use HTML for rendering page, CSS for styling and Javascript to handling client side processing. To create a dynamic, responsive web page, we will need to lot of work with Javascript and ton of DOM manipulation. So here is where FeF to help. There are ton of FeF is available today. They all abstract the common tasks that we would do and make our development easy to create responsive and cross browser support (with limitation) application. With FeF, we can focus on building our application rather than worry about browsers and ugly DOM manipulation.  Angular is one such framework backed by Google. I do not want to go into details of what it gives out of the box since it is very well documented in angular website.

Before we go into Angular development, have a look at a mapping between Angular and Silverlight.

clip_image001[6]
clip_image002[6]

Angular framework also support and promotes MV* model development. Igor from Angular wrote a short take on whether Angular is a MVC or MVVM and his conclusion is Angular is MVW pattern where ‘W’ stands for whatever you want it to be, Controller or View Model. Sticking with Silverlight model, I will try to related to VM as we go along. Coming back to the problem at hand, what we need to display is a static ‘Hello World’ text and in our Silverlight application, we put the text directly in the view and that is what we are going to do here as well. Going by above picture all we need to do is to put ‘Hello World’ and we are done. So here is the simple HTML which displays ‘Hello World’.

head>
    <title></title>
</head>
    <body>
        <p>Hello World</p>
    </body>
</html>

So your question is, where is Angular? You do not need Angular since all our work is in the View. In FeF, the view is nothing more than HTML (for now).

If I stop the blog right here, then I am really cheating, we did not see any Angular here. So we are going to modify the problem little bit different. So here is the new problem statement.

Problem: We are asked to create program to display a value of string variable ‘DisplayData’, where ‘DisplayData’ contains ‘Hello World’.

Silverlight:

(You can get the full solution of Silverlight and Angular from https://www.dropbox.com/sh/nh7ihjrqlhiax02/RrkmDC-6qL)

As you know from my previous blogs, I am a big fan of Jounce framework for my Silverlight development. If you are not familiar with Jounce framework, don’t worry, the concepts we are going to look at should be easy to follow. If you are a hard core Silverlight developer and not using any MVVM framework, I would strongly recommend you to take a look at this framework. Anyway, Lets look at the code we would write to display ‘Hello World’ from view model.

View: (MainPage.XAML)

<Grid x:Name="LayoutRoot" Background="White">
        <TextBlock HorizontalAlignment="Left"  TextWrapping="Wrap" Text="{Binding DisplayData}" VerticalAlignment="Top"
                   Height="25" Width="289"/>
    </Grid>

 

ViewModel:

public class MainPageViewModel:BaseViewModel
    {
        public string DisplayData
        {
            get { return "Hello World"; }
        }
    }

Jounce has couple of ways to do the view and viewmodel association. I am using traditional explicit Export attribute to mark view and viewmodel and let Jounce do the mapping. As a Silverlight developers we know how this thing work and how data binding happen so I will stop here.

Angular:

One of the main reason I am really attracted to Angular is the out of the box data binding. By the way Knockout framework also support data binding like Silverlight. Lets start our actual Angular code. Even though it is simple Hello World, I would like to follow same MVC pattern. First and fore most, I am doing all the development in Visual Studio 2012. I will do a quick walk through on what do I do for HTML5 development.

  1. For our testing either you can download angular.js locally and use that for our coding or point directly to the minified version in the web.
  2. Create a directory where you want to create the new html page.
  3. Open Visual Studio and create new ‘Blank Project’. (If you do not see it, search for blank template on search it will show up).
  4. Select Solution and Add existing web page and use file system and point to the empty directory you have created.
  5. Create a new folder called ‘Scripts’ where we will keep all the java scripts.

View: (Home.html)

<!DOCTYPE html>
<html ng-app>
<head>
</head>
    <body>
        <div ng-controller="Controller">{{DisplayData}}</div>
        <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
        <script src="Scripts/Controller.js"></script>

    </body>
</html>

 

Controller: (scripts\Controller.js)

function Controller($scope) {
    $scope.DisplayData = "Hello World";
}

So there are two code, one is HTML and another one is pure java script. Lets look at the HTML first and see if we can make any sense of it.  To make it simple, let us focus only on the bolded words, rest of it normal HTML.

  1. ng-app: Every angular application should have one and only ng-app. When HTML is been rendered on the browser, once Angular gets the execution context, it will try to find the application scope. In our case, we have ng-app set at <HTML> tag that means, angular will look for angular directives in all DOM elements. We can even have the ng-app set to a simple and single <DIV>, then the scope is limited to the <DIV>. The bottom line, you need to have one ng-app.
  2. ng-controller: This is one of the important directive you need to know. This is the one which connects, view to the controller like the ‘[Export]’ we did in Silverlight. You can have multiple controller in a single view (HTML) but only one ng-app. In our example, we have one controller called ‘Controller’ assigned to a <DIV> DOM object. So everything under DIV will get evaluated with this associated controller.
  3. {{variable}}: The double curly braces are nothing but data binding or ‘{Binding variable}’ in Silverlight. Same as in Silverlight, when you use a Binding variable, Silverlight will look for it in the associated ViewModel, in this case, Angular will replace the variable with value from associated controller.

If you are interested in how these ng- directives are processed and how you got the hello world, instead of me repeating it as third person, take a look at this awesome information in Angular web site.

Next stop is controller script. This script is very simple. We have a controller object and it gets its scope as a parameter. If you remember, in the view, you can set the ng-controller to any DOM element. The $scope is suppose to cover all the DOM elements with in it. So in our example, the controller is associated with all the elements under the <DIV> element. So when angular process the DOM elements, it will look for DisplayData under Controller object and it find the ‘Hello World’ and populates the  value.

If you have any questions or doubt, please send me a note and I will try to answer. When you are working through the examples, if you run into any problems, I would recommend check out Forum at Stack Overflow.

Advertisements

One thought on “Silverlight to Angular – 1

  1. Pingback: AngularJS 1.x with Typescript – 1 | Unni's space

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s