do angular
Both Keven and I admit that we are trying to use windows forms, but neither are as familiar with it than we thought.
It’s literally been many years since I did a project in windows forms.
So trying to find the words to express how or why angular is “better” web dev platform than all the rest. (at least right now)
First let me say, I don’t like javascript. I have done it, it is great at making runtime errors. (the best). Not saying that angular/typescript doesn’t have those, but certainly it’s built to guard against them.
Asking me why it’s better is like asking why is visualbasic.net better than visualbasic? Why is c# better than C?
We all know it is, but why?
I don’t like boxes but let’s paint a picture of webforms binding to a backend data objects.
It’s not really binding, it’s http binding structures. And the data objects need to go into an session object for storage because making changes on the server don’t really reflect the changes on the client when I was mucking around with it. And of course you get the whole page load flicker everytime things go back and forth which is a bit more than annoying.
Enter angular.
Everything is local, there is no post back. It’s in typescript not javascript. Types are checked before transpile (type to javascript translation). Kinda like c# to machine code translation. The difference is instead of a .bin file it creates little .js files which I never look at.
Binding takes place like Silverlight binding works with property change notification i.e. https://msdn.microsoft.com/en-us/library/ms743695(v=vs.100).aspx
Angular binding is automatic with CD (change detection) it’s all built in. When a value changes on the component, it’s reflected to the client facing html.
Talking at the server is also a breeze with now HttpClient 2 or 3 lines of code. I.E.
public getErrors(): Observable< Array<IEaError>> {
const uri = this.baseURI + '/api/EaErrors';
return this.httpClient.get<Array<IEaError>>(uri);
}
Relating this to our project (Errors/Exceptions)
Both c# and angular have ts files that contain the object of error or exception. In angular, this type is called export interface EaErrors or EaExceptions.
There is no List or IEnumerable in angular, it’s just Array or [] these are JSON objects. Typescript reads those fluently.
If you know any javascript then you know this already.
So in a nutshell it’s back to a client/server model where in asp.net it’s client/server to api back to server back to client.
Getting started with angular:
Create a new angular project with the angular-cli in one command.
Ng new myproject
Cd myproject
Create a component
Ng g component mycomponent
The trickiest gotcha is if something doesn’t work right either it wasn’t added as a module, or it wasn’t provided in the component. Just like when we forget to provide a using statement in c#.
Angular 91 lines of html for both tables and features.
Asp.net 132 lines for ONE table.
The following will be helpful as well. Here is the markup in asp.net: for 1 table
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="Dashboard.Dashboard" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:TextBox ID="tbErrors" runat="server" Height="95px" Width="389px"></asp:TextBox>
<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr runat="server" style="background-color:#DCDCDC;color: #000000;">
<th runat="server">description</th>
<th runat="server">loanID</th>
<th runat="server">batchID</th>
<th runat="server">errorCode</th>
<th runat="server">analyStatus</th>
<th runat="server">analysisStatus</th>
<th runat="server">Stop</th>
<th runat="server">Trial</th>
<th runat="server">Final</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;"></td>
</tr>
</table>
</LayoutTemplate>
<AlternatingItemTemplate>
<tr style="background-color:#FFF8DC;">
<td>
<asp:Label ID="descriptionLabel" runat="server" Text='<%# Eval("description") %>' />
</td>
<td>
<asp:Label ID="loanIDLabel" runat="server" Text='<%# Eval("loanID") %>' />
</td>
<td>
<asp:Label ID="batchIDLabel" runat="server" Text='<%# Eval("batchID") %>' />
</td>
<td>
<asp:Label ID="errorCodeLabel" runat="server" Text='<%# Eval("errorCode") %>' />
</td>
<td>
<asp:Label ID="analyStatusLabel" runat="server" Text='<%# Eval("analyStatus") %>' />
</td>
<td>
<asp:Label ID="analysisStatusLabel" runat="server" Text='<%# Eval("analysisStatus") %>' />
</td>
<td>
<asp:LinkButton runat="server" Text="Stop" OnCommand="Stopped1_Click" CommandArgument='<%# $"{Eval("loanID")},{Eval("batchID")}"%>'/>
</td>
<td>
<asp:LinkButton runat="server" Text="Trial" OnCommand="Trial1_Click" CommandArgument='<%# $"{Eval("loanID")},{Eval("batchID")}"%>'/>
</td>
<td>
<asp:LinkButton runat="server" Text="Final" OnCommand="Final1_Click" CommandArgument='<%# $"{Eval("loanID")},{Eval("batchID")}" %>'/>
</td>
</tr>
</AlternatingItemTemplate>
<EmptyDataTemplate>
<table runat="server" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr style="background-color:#DCDCDC;color: #000000;">
<td>
<asp:Label ID="descriptionLabel" runat="server" Text='<%# Eval("description") %>' />
</td>
<td>
<asp:Label ID="loanIDLabel" runat="server" Text='<%# Eval("loanID") %>' />
</td>
<td>
<asp:Label ID="batchIDLabel" runat="server" Text='<%# Eval("batchID") %>' />
</td>
<td>
<asp:Label ID="errorCodeLabel" runat="server" Text='<%# Eval("errorCode") %>' />
</td>
<td>
<asp:Label ID="analyStatusLabel" runat="server" Text='<%# Eval("analyStatus") %>' />
</td>
<td>
<asp:Label ID="analysisStatusLabel" runat="server" Text='<%# Eval("analysisStatus") %>' />
</td>
<td>
<asp:LinkButton runat="server" Text="Stop" OnCommand="Stopped1_Click" CommandArgument='<%# $"{Eval("loanID")},{Eval("batchID")}"%>'/>
</td>
<td>
<asp:LinkButton runat="server" Text="Trial" OnCommand="Trial1_Click" CommandArgument='<%# $"{Eval("loanID")},{Eval("batchID")}"%>'/>
</td>
<td>
<asp:LinkButton runat="server" Text="Final" OnCommand="Final1_Click" CommandArgument='<%# $"{Eval("loanID")},{Eval("batchID")}"%>'/>
</td>
</tr>
</ItemTemplate>
<SelectedItemTemplate>
<tr style="background-color:#008A8C;font-weight: bold;color: #FFFFFF;">
<td>
<asp:Label ID="descriptionLabel" runat="server" Text='<%# Eval("description") %>' />
</td>
<td>
<asp:Label ID="loanIDLabel" runat="server" Text='<%# Eval("loanID") %>' />
</td>
<td>
<asp:Label ID="batchIDLabel" runat="server" Text='<%# Eval("batchID") %>' />
</td>
<td>
<asp:Label ID="errorCodeLabel" runat="server" Text='<%# Eval("errorCode") %>' />
</td>
<td>
<asp:Label ID="analyStatusLabel" runat="server" Text='<%# Eval("analyStatus") %>' />
</td>
<td>
<asp:Label ID="analysisStatusLabel" runat="server" Text='<%# Eval("analysisStatus") %>' />
</td>
<td>
<asp:LinkButton runat="server" Text="Trial" OnCommand="Trial1_Click" CommandArgument='<%Eval("loanID")%>'/>
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetObjErrors" TypeName="Dashboard.Dashboard"></asp:ObjectDataSource>
</asp:Content>
Dashboard in angular with both tables:
<div class="gid">
<div class="grid-top">
Errors Count = {{eaErrors.length}} Exceptions Count = {{eaExceptions.length}}
</div>
<table class="table-d table-top">
<thead>
<tr>
<th colspan="5">
Set All in list:
</th>
<th>
<button id="stoppedErAll" class="btn" (click)="setError(1)">Stop All</button>
</th>
<th>
<button id="trialErAll" class="btn" (click)="setError(2)">Trial All</button>
</th>
<th>
<button id="finalErAll" class="btn" (click)="setError(3)">Final All</button>
</th>
</tr>
<tr>
<th>Loan #</th>
<th>batch</th>
<th>Error Code</th>
<th>Error</th>
<th>Status</th>
<th>Stopped</th>
<th>Trial</th>
<th>Final</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let er of eaErrors" (click)="onClickEr(er)">
<td>{{er.loanID}}</td>
<td>{{er.batchID}}</td>
<td>{{er.errorCode}}</td>
<td>{{er.description}}</td>
<td>{{er.analyStatus}}</td>
<td><button id="stoppedEr" class="btn">Stopped</button> </td>
<td><button id="trialEr" class="btn">Trial</button> </td>
<td><button id="finalEr" class="btn">Final</button> </td>
</tr>
</tbody>
</table>
<div class="addH">
</div>
<table class="table-d table-bottom">
<thead>
<tr >
<th colspan="5">
Set All in list:
</th>
<th>
<button class="btn" (click)="setExceception(1)">Stop All</button>
</th>
<th>
<button class="btn" (click)="setExceception(2)">Trial All</button>
</th>
<th>
<button class="btn" (click)="setExceception(3)">Final All</button>
</th>
</tr>
<tr>
<th>Loan #</th>
<th>batch</th>
<th>Exception Code</th>
<th>Exception</th>
<th>Status</th>
<th>Stopped</th>
<th>Trial</th>
<th>Final</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let er of eaExceptions" (click)="onClick(er)">
<td>{{er.loanID}}</td>
<td>{{er.batchID}}</td>
<td>{{er.exceptionCode}}</td>
<td>{{er.description}}</td>
<td>{{er.analyStatus}}</td>
<td><button id="stopped" class="btn">Stopped</button> </td>
<td><button id="trial" class="btn">Trial</button> </td>
<td><button id="final" class="btn">Final</button> </td>
</tr>
</tbody>
</table>
<div class="grid-bottom">
<button class="btn" (click)="updateAll()">{{sendButton}}</button>
</div>
</div>
