How to migrate the Silverlight application into AngularJS application?

3 mins read

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,

View
View Model
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:

https://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:

https://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:

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

Please refer the below code sample:

<table>

<tr>

<td>

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

</td>

<td>

</td>

</tr>

</table>

</div>

<table>

<tr>

Select : CustomerID

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

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

</tr>

</table>

</div>

</div>

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

Output: grid

Did you find this information helpful?

Yes

Comments (0)

How to migrate the Silverlight application into AngularJS application?

Migrate Silverlight Application to Angular JS

Comparison between the Angular JS and Silverlight:

Silverlight View Model vs Angular JS controller

Silverlight View vs Angular JS View

Access denied