We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to migrate the Silverlight application into AngularJS application?

Migrate Silverlight Application to Angular JS

Silverlight Application mostly used by developers to write maintainable web application, since this supports MVVM, a pattern that separates logic from presentation. Where the MVVM pattern will provide the clean separation between application logic and the UI will make an application easier to test, maintain, and evolve. But now Microsoft Silverlight is a deprecated application framework.

To achieve the same functionalities as it is in Silverlight, we can use Angular JS as best alternative. In Angular JS, we have two way binding support and this two way binding support enables the MVVM design pattern.

Basically, MVVM pattern include the 3 portion,

  1. View
  2. View Model
  3. Model

In Angular JS, Controller section will react as the view model portion in MVVM pattern. This controller section is nothing but the JavaScript function. This controller is responsible for maintain the relationship between view and model. To know more about this angular JS controller, please refer the below angular JS online documentation.

https://docs.angularjs.org/guide/controller

Also our Syncfusion components supports the one way and two way biding and it can be created using Angular directive. All the properties and event’s actions of our components can be bound with HTML elements using this EJ angular in angular view. Since creating EJ components using angular JS directive and data-binding are simple, it make us to develop application easily. We can get the EJ Angular JS directive related information from below link:

http://help.syncfusion.com/js/angularjs

Sample

We have prepared the sample using Syncfusion components with angular data biding concept, please check the sample from below location:

http://jsplayground.syncfusion.com/wm5d2c5b

 

Comparison between the Angular JS and Silverlight:

 

Silverlight View Model vs Angular JS controller

In Silverlight, we have view model portion which is written in c# or VB and it contains the all the logic. In Angular JS, view model of Silverlight will replaced by controller section.

Please refer the below code to know about controller section’s process

[controller]

angular.module('DropCtrl', ['ejangular'])

           .controller('DropDownCtrl', function ($scope) {

               $scope.dataList = [];

               $scope.staticCountry = window.gridData;

               $scope.selectedRow = 2;

               $scope.order = [];

               $scope.order.Freight = "";

               $scope.order.OrderDate = "";

               $scope.dataChange = function (args) {

                   // to change the fields value

                   $scope.order = $scope.dataList;

                   $scope.order.Freight = $scope.order[args.itemId].Freight;

                   $scope.selectedRow = args.itemId;

                   $scope.order.OrderDate = $scope.order[args.itemId].OrderDate;

                   $scope.$apply();// to apply the bindings

               };

               $scope.countryChange = function (args) {

                   //to change the grid data

                   $scope.dataList = ej.DataManager(window.gridData).executeLocal(ej.Query().where(args.model.fields.text, ej.FilterOperators.equal, args.text));

                   $scope.$apply();// to apply the bindings

               };

           });

 

In controller, we can define the scope variable and wrote the logic regarding data binding and other functionalities. Scope in controller should be used for binding model. In given snippet, When we change the country name in a country list (dropdown box), corresponding country related shipping data will get updated in all other components. This is achieved using our data biding support and Syncfusion control’s inbuilt event actions.

Silverlight View vs Angular JS View

In Silverlight, the view portion of the app is written in XAML, using a rich library of supporting classes and controls. This view portion is replaced by HTML5 page in Angular JS. In view section, we can create the Syncfusion components using ej- angular directive and bound the scope variable. Some of the required properties are having two way binding support. We can get the list of the properties that have two way binding support, from below link:

http://help.syncfusion.com/js/angularjs#data-binding

Please refer the below code sample:

<div style="padding:30px">

            <table>

                <tr>

                    <td>

                        <h3> Get Order Details Based on Countries</h3>

                    </td>

                    <td>

                        <input ej-dropdownlist e-datasource="staticCountry" e-value="value" e-fields-text="ShipCountry" e-fields-value="ShipCountry" e-change="countryChange" />

                    </td>

                </tr>

            </table>

        </div>

        <div class="customerselection" style="width: 100%">

            <table>

                <tr>

                    Select : CustomerID

                    <td><input ej-dropdownlist e-datasource="dataList" e-value="Freight" e-fields-text="CustomerID" e-fields-value="CustomerID" e-change="dataChange" /></td>

 

                    <td><span>Freight</span></td>

                    <td><input ej-numerictextbox e-value="order.Freight" e-decimalplaces=2 e-readonly="true" /></td>

 

                    <td><span>OrderDate</span></td>

                    <td><input ej-datepicker e-value="order.OrderDate" e-readonly="true" /></td>

                </tr>

            </table>

        </div>

 

        <div id="Grid" ej-grid e-datasource="dataList" e-selectedrowindex="selectedRow" e-allowgrouping="true" e-pagesettings-pagesize="8" e-allowsorting="false" e-allowpaging="true" e-actionbegin="actionBegin">

            <div e-columns>

                <div e-column e-field="ShipCountry" e-headertext="ShipCountry" e-textalign="left" e-width="90"></div>

                <div e-column e-field="CustomerID" e-headertext="CustomerID" e-textalign="left" e-width="90"></div>

                <div e-column e-field="Freight" e-headertext="Freight" e-textalign="left" e-width="90"></div>

                <div e-column e-field="ShipName" e-headertext="ShipName" e-textalign="left" e-width="90"></div>

                <div e-column e-field="ShipAddress" e-headertext="ShipAddress" e-textalign="left" e-width="90"></div>

 

            </div>

        </div>               

 

In this, we have created the UI components, using EJ angular directive.

Output:

Article ID: Published Date: Last Revised Date: Platform: Control:
6406 02/25/2016 02/25/2016 JavaScript General
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon