tag:blogger.com,1999:blog-88785012985489281272024-03-13T03:03:36.989-07:00Windows8IndexIndex of Windows 8 and Metro App Programming InformationBlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.comBlogger116125tag:blogger.com,1999:blog-8878501298548928127.post-41124263101193538992019-05-21T21:32:00.000-07:002019-05-21T21:32:17.674-07:00Trio Pro-Book 10.1 2-in-1 Tablet<div dir="ltr" style="text-align: left;" trbidi="on">
Trio Pro-Book 10.1 2-in-1 Tablet<br />
<br />
Trio Pro-Books have been featured by Shopko for a awhile so I took a chance on a 40% off $199 or $120<br />
<br />
It looks like a poor man's Surface. Be wary it's actually a terrible tablet running the low power Atom, but I found that for the price it can do a lot if you buy a usb wifi adapter, and battery lasts longer and it is lighter than the original surface pro, though if you have money the Surface Go looks like what this thing tries to do. If you can use a terrible but cheap windows tablet, this might work for you.<br />
<br />
The AC charger was junk, would not make reliable charger connection, I got a replacement for $5 at Five and Under, 2 amp chargers run $5 at Walmart too.<br />
<br />
The wifi is junk too, I have 3 floors but it only works on 1st floor, barely on 2nd floor and not at all on 3rd floor when all my other computers and phones work.<br />
<br />
Fortunately, there is one full-size USB port on the keyboard half, and put an EDUP wifi dongle with an antenna, and it seems to only give usable wifi performance with it stuck in.<br />
<br />
It runs a Atom but the passmark is only about 1/10 a high end i7, and only about double the original Atoms that first showed up in netbooks.<br />
<br />
I found that it is too slow for Chromecasting the Spectrum / Charter TV app, but it is fast enough to run the TV app on its own.<br />
<br />
There is an even cheaper windows tablet without a keyboard.</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com1tag:blogger.com,1999:blog-8878501298548928127.post-80796584408048608632019-05-20T10:44:00.000-07:002019-05-21T13:57:17.198-07:00Firebase Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
Firebase Tutorial<br />
<br />
<a href="https://www.youtube.com/watch?v=Gl-qlxfTJHE">How to install firebase</a> youtube<br />
<br />
How to CRUD in angular firebase<br />
<a href="https://itnext.io/how-to-crud-in-angular-firebase-firestore-456353d7c62">https://itnext.io/how-to-crud-in-angular-firebase-firestore-456353d7c62</a><br />
<br />
<br />
<br /></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-73212984473540767772019-05-10T09:46:00.000-07:002019-05-10T09:46:39.580-07:00Windows Tablet Intel SST No Device Installed Audio After Windows 10 Update<div dir="ltr" style="text-align: left;" trbidi="on">
Windows Tablet Intel SST No Device Installed Audio After Windows 10 Update<br />
<br />
My Trio Tablet lost audio after windows 10 update in may 2019, this driver patch seems to fix it<br />
<br />
see<br />
<a href="https://mspoweruser.com/microsoft-release-official-fix-for-intel-audio-driver-no-sound-issue-due-to-windows-update/">https://mspoweruser.com/microsoft-release-official-fix-for-intel-audio-driver-no-sound-issue-due-to-windows-update/</a><br />
<br /></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-90835914236193143712019-03-27T09:37:00.003-07:002019-03-29T08:23:04.437-07:00Angular CRUD with Firebase Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
Angular CRUD with Firebase<br />
<br />
<a href="https://angular-templates.io/tutorials/about/angular-crud-with-firebase">https://angular-templates.io/tutorials/about/angular-crud-with-firebase</a><br />
<br />
<h2 style="background-color: white; box-sizing: border-box; color: #dd0031; font-family: Lato, sans-serif; font-size: 35px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;">
Introduction to this Angular CRUD example</h2>
<div style="background-color: white; box-sizing: border-box; color: #818181; font-family: Lato, sans-serif; font-size: 16px; line-height: 1.7; margin-bottom: 20px;">
In this angular tutorial, we are going to explain how to perform a CRUD in an Angular 6 application using <a href="https://firebase.google.com/docs/firestore/" style="background-color: transparent; box-sizing: border-box; color: #337ab7; text-decoration-line: none;" target="_blank">cloud firestore</a> as a database.</div>
<div style="background-color: white; box-sizing: border-box; color: #818181; font-family: Lato, sans-serif; font-size: 16px; line-height: 1.7; margin-bottom: 20px;">
We are going to create an angular example website that will have:</div>
<ul style="background-color: white; box-sizing: border-box; color: #818181; font-family: Lato, sans-serif; font-size: 16px; line-height: 1.7; margin-bottom: 10px; margin-top: 0px;">
<li style="box-sizing: border-box;">A list of users which can be filtered by name and by age</li>
<li style="box-sizing: border-box;">A page to add a new user</li>
<li style="box-sizing: border-box;">A page to edit the data of a user</li>
<li style="box-sizing: border-box;">Delete a user</li>
</ul>
<div style="background-color: white; box-sizing: border-box; color: #818181; font-family: Lato, sans-serif; font-size: 16px; line-height: 1.7; margin-bottom: 20px;">
The data of a user will be: Name, Surname, Image, Age.</div>
<div style="box-sizing: border-box; line-height: 1.7; margin-bottom: 20px;">
<div style="background-color: white; color: #818181; font-family: lato, sans-serif; font-size: 16px;">
... see link above to continue </div>
<div style="background-color: white; color: #818181; font-family: lato, sans-serif; font-size: 16px;">
<br /></div>
<div style="background-color: white; color: #818181; font-family: lato, sans-serif; font-size: 16px;">
$30 for angular site template</div>
<div style="background-color: white;">
<span style="color: #818181; font-family: "lato" , sans-serif;"><a href="https://angular-templates.io/product/angular-site-template">https://angular-templates.io/product/angular-site-template</a></span></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
Create angular project from scratch</div>
<div style="background-color: white;">
<a href="https://angular-templates.io/tutorials/about/learn-angular-from-scratch-step-by-step#create-angular-app">https://angular-templates.io/tutorials/about/learn-angular-from-scratch-step-by-step#create-angular-app</a></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<br /></div>
<a href="https://blog.teamtreehouse.com/install-node-js-npm-windows"><br />How to Install Node.js® and NPM on Windows - Treehouse Blog<br />https://blog.teamtreehouse.com › Learn</a><br />
With Node.js and NPM installed you'll soon be able to take advantage of the huge world of NPM modules that can help with a wide variety of tasks both on the ...</div>
<div style="box-sizing: border-box; line-height: 1.7; margin-bottom: 20px;">
<div style="box-sizing: border-box; line-height: 1.7; margin-bottom: 20px;">
JavaScript is quickly becoming the go-to language for web developers. Front-end web developers use JavaScript to add user interface enhancements, add interactivity, and talk to back-end web services using AJAX. Web developers who work on the server-side are also flocking to JavaScript because of the efficiencies and speed offered by JavaScript’s event-driven, non-blocking nature.</div>
<div style="box-sizing: border-box; line-height: 1.7; margin-bottom: 20px;">
fact, concentrating on JavaScript as your language of choice offers the opportunity to master a single language while still being able to develop “full-stack” web applications. The key to this server-side JavaScript revolution is Node.js® — a version of Chrome’s V8 JavaScript runtime engine — which makes it possible to run JavaScript on the server-side.</div>
<div style="box-sizing: border-box; line-height: 1.7; margin-bottom: 20px;">
Node.js is also used for developing desktop applications and for deploying tools that make developing web sites simpler. For example, by installing Node.js® on your desktop machine, you can quickly convert CoffeeScript to JavaScript, SASS to CSS, and shrink the size of your HTML, JavaScript and graphic files. Using NPM — a tool that makes installing and managing Node modules — it’s quite easy to add many useful tools to your web development toolkit.</div>
</div>
<h2 style="background-color: white; box-sizing: border-box; color: #2b2b2b; font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 24px; font-weight: 300 !important; line-height: normal !important; margin: 0px 0px 20px; padding: 15px 0px 0px; transition: all 0.3s ease-in-out 0s;">
Installation Steps</h2>
<ol style="background-color: white; box-sizing: border-box; color: #616161; font-family: "Gotham Rounded A", "Gotham Rounded B", "Gotham Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 15px; margin-bottom: 10px; margin-top: 0px;">
<li style="box-sizing: border-box; padding: 1px 2px;"><span style="box-sizing: border-box; font-weight: 700;">Download the Windows installer from the <a href="http://nodejs.org/" style="background-color: transparent; box-sizing: border-box; color: #387bab; overflow-wrap: break-word; text-decoration-line: none;" target="_blank">Nodes.js® web site</a>.</span></li>
<li style="box-sizing: border-box; padding: 1px 2px;"><span style="box-sizing: border-box; font-weight: 700;">Run the installer</span> (the .msi file you downloaded in the previous step.)</li>
<li style="box-sizing: border-box; padding: 1px 2px;"><span style="box-sizing: border-box; font-weight: 700;">Follow the prompts in the installer</span> (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).<br style="box-sizing: border-box;" /><a href="https://3wga6448744j404mpt11pbx4-wpengine.netdna-ssl.com/wp-content/uploads/2015/01/installer.png" style="background-color: transparent; box-sizing: border-box; color: #387bab; overflow-wrap: break-word; text-decoration-line: none;"><img alt="installer" class="alignnone size-full wp-image-24630" height="398" sizes="(max-width: 509px) 100vw, 509px" src="https://3wga6448744j404mpt11pbx4-wpengine.netdna-ssl.com/wp-content/uploads/2015/01/installer.png" srcset="https://3wga6448744j404mpt11pbx4-wpengine.netdna-ssl.com/wp-content/uploads/2015/01/installer.png 509w, https://3wga6448744j404mpt11pbx4-wpengine.netdna-ssl.com/wp-content/uploads/2015/01/installer-300x234.png 300w, https://3wga6448744j404mpt11pbx4-wpengine.netdna-ssl.com/wp-content/uploads/2015/01/installer-383x300.png 383w" style="backface-visibility: hidden; border-radius: 8px; border: 0px; box-sizing: border-box; height: auto; margin: 0px 15px 15px 0px; max-width: 100%; min-height: 1px; position: relative; vertical-align: middle; z-index: 100;" width="509" /></a></li>
<li style="box-sizing: border-box; padding: 1px 2px;"><span style="box-sizing: border-box; font-weight: 700;">Restart your computer.</span> You won’t be able to run Node.js® until you restart your computer</li>
</ol>
<br /></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-13267377351141859432019-02-13T22:29:00.001-08:002019-02-13T22:29:51.534-08:00Angular 7 with .NET Core 2.2 - Global Weather<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="background-color: white; font-family: "Segoe UI", Arial, Helvetica, sans-serif;">
<a data-saferedirecturl="https://www.google.com/url?q=https://www.codeproject.com/Article.aspx?tag%3D198374996470837029%26_z%3D3846742&source=gmail&ust=1550212121064000&usg=AFQjCNGuvG_ZATQsC4cq9ebEY9QvasX1ag" href="https://www.codeproject.com/Article.aspx?tag=198374996470837029&_z=3846742" style="color: #1155cc; text-decoration-line: none;" target="_blank">Angular 7 with .NET Core 2.2 - Global Weather (Part 2)</a></h3>
<div class="m_2976374621551743811entry-headline" style="background-color: white; color: #ff9900; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 13px; margin: 10px 0px;">
<span class="m_2976374621551743811rating"><img class="CToWUd" height="12" src="https://ci6.googleusercontent.com/proxy/NSFTrjoK3d5r-QknnhuB4RP_NOA8SfbILDNsB39OtCJ2Oj8Cu-PB4cuoVOFyXvkX90KUwoWK8TH8DUGZ6wNH795VgtjJypLzpdUH8wfGpxzaEc7XxhTyzQgO2QN2jkQ=s0-d-e1-ft#https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars_50.gif" width="74" /></span> <span style="color: #aaaaaa;">(11 votes)</span> by <span class="m_2976374621551743811author">Fred Song (Melbourne)</span> <span style="color: #aaaaaa;">(updated <b>21 hours ago)</b></span></div>
<div class="m_2976374621551743811description" style="background-color: white; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 14px;">
Angular 7 with .NET Core 2.2 - Global Weather (Part 2)</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-80335811582015041432019-01-19T20:30:00.003-08:002019-01-19T20:30:42.451-08:00React.js Tutorials<div dir="ltr" style="text-align: left;" trbidi="on">
<b>React.js Tutorials</b><br />
<br />
<br />
Official website tutorial<br />
<br />
<a href="https://reactjs.org/tutorial/tutorial.html">https://reactjs.org/tutorial/tutorial.html</a><br />
<header class="css-hgc6lu" style="-webkit-box-align: baseline; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-box-pack: justify; align-items: baseline; box-sizing: inherit; display: flex; flex-direction: row; flex: 0 1 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; justify-content: space-between; margin: 0px; padding: 0px;"><h1 class="css-1a9m1x6" style="box-sizing: inherit; color: #282c34; font-size: 60px; line-height: 65px; margin: 80px 0px 0px; padding: 0px;">
Tutorial: Intro to React</h1>
</header><div class="css-124oy3v" style="box-sizing: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin: 50px 0px 120px; padding: 0px;">
<div class="css-7u1i3w" style="box-sizing: inherit; line-height: 25px; margin: 0px; padding: 0px;">
<div style="box-sizing: inherit; color: #6d6d6d; font-size: 24px; line-height: 1.7; max-width: 42em; padding: 0px;">
This tutorial doesn’t assume any existing React knowledge.</div>
<h2 id="before-we-start-the-tutorial" style="border-top: 1px solid rgb(236, 236, 236); box-sizing: inherit; font-size: 35px; line-height: 1.2; margin: 44px 0px 0px; padding: 40px 0px 0px;">
<a aria-hidden="true" class="anchor" href="https://reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial" style="box-sizing: inherit; float: left; margin: 0px 0px 0px -20px; padding: 0px 4px 0px 0px; text-decoration-line: none;"><svg aria-hidden="true" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" fill-rule="evenodd"></path></svg></a>Before We Start the Tutorial</h2>
<div style="box-sizing: inherit; font-size: 17px; line-height: 1.7; margin-top: 30px; max-width: 42em; padding: 0px;">
We will build a small game during this tutorial. <span style="box-sizing: inherit; font-weight: bolder; margin: 0px; padding: 0px;">You might be tempted to skip it because you’re not building games — but give it a chance.</span> The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.</div>
</div>
</div>
<br /></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-42336011919865141652018-03-17T06:15:00.001-07:002018-03-17T08:38:15.281-07:00Android REST Sample Programs<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Android REST Sample Programs</h2>
<div>
<a href="http://windows8index.blogspot.com/2018/03/android-rest-sample-programs.html">http://windows8index.blogspot.com/2018/03/android-rest-sample-programs.html</a><br />
<br />
What You Should Know<br />
<br />
Retrofit is a class that provides a Java client interface for REST services that return JSON strings.<br />
<br />
For example, the Openweather API server wants you to do http GET on an endpoint once you get your own appid<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184; width: 100%px;">
<tbody>
<tr>
<td style="padding: 6.75pt 0in 0in 0in;" valign="top"><table align="left" border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; margin-left: -2.25pt; margin-right: -2.25pt; mso-padding-alt: 0in 0in 0in 0in; mso-table-anchor-horizontal: column; mso-table-anchor-vertical: paragraph; mso-table-left: left; mso-yfti-tbllook: 1184; width: 100%px;">
<tbody>
<tr>
<td style="padding: 0in 0in 0in 0in; width: 6.25in;" valign="top" width="600"><table align="left" border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; mso-padding-alt: 0in 0in 0in 0in; mso-table-anchor-horizontal: column; mso-table-anchor-vertical: paragraph; mso-table-left: left; mso-table-lspace: 2.25pt; mso-table-rspace: 2.25pt; mso-yfti-tbllook: 1184; width: 100%px;">
<tbody>
<tr>
<td style="padding: 0in 13.5pt 6.75pt 13.5pt;" valign="top"><div align="center" class="MsoNormal" style="line-height: 150%; text-align: center;">
<strong><span style="color: goldenrod; font-family: "helvetica" , sans-serif; font-size: 18.0pt; line-height: 150%;">Thank you for the subscription to OpenWeatherMap Free
service!</span></strong><span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;"><o:p></o:p></span></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<br />
<table border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; min-width: 100%; mso-padding-alt: 0in 0in 0in 0in; mso-yfti-tbllook: 1184; width: 100%px;">
<tbody>
<tr>
<td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 6.75pt 0in 0in 0in;" valign="top"><table align="left" border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; margin-left: -2.25pt; margin-right: -2.25pt; mso-padding-alt: 0in 0in 0in 0in; mso-table-anchor-horizontal: column; mso-table-anchor-vertical: paragraph; mso-table-left: left; mso-yfti-tbllook: 1184; width: 100%px;">
<tbody>
<tr>
<td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; max-width: 100%; min-width: 100%; padding: 0in 0in 0in 0in; width: 6.25in;" valign="top" width="600"><table align="left" border="0" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse; mso-padding-alt: 0in 0in 0in 0in; mso-table-anchor-horizontal: column; mso-table-anchor-vertical: paragraph; mso-table-left: left; mso-table-lspace: 2.25pt; mso-table-rspace: 2.25pt; mso-yfti-tbllook: 1184; width: 100%px; word-break: break-word;">
<tbody>
<tr>
<td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0in 13.5pt 6.75pt 13.5pt;" valign="top"><div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;">Dear Customer,</span><span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;"><o:p></o:p></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;">Your account and
API key are activated for operating with OpenWeatherMap Free weather
services.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 24px; margin: 7.5pt 0in; text-size-adjust: 100%;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12pt; line-height: 24px;">API documentation<o:p></o:p></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;"></span></div>
<div class="MsoNormal" style="line-height: 24px; margin: 7.5pt 0in; text-size-adjust: 100%;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12pt; line-height: 24px;"><a href="http://openweathermap.org/api?utm_source=xemail&utm_campaign=new.customer&src=e15827def0a25d45d6378717b5dc1cbd" style="text-size-adjust: 100%;" target="_blank"><span style="color: #2baadf;">http://openweathermap.org/api</span></a></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;">Endpoint for any
API calls<o:p></o:p></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;"><a href="http://api.openweathermap.org/" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><span style="color: #2baadf;">api.openweathermap.org</span></a><o:p></o:p></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;">Example of API
call<o:p></o:p></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;"><br /></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif;">GET</span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<span style="color: #202020; font-family: "helvetica" , sans-serif; font-size: 12.0pt; line-height: 150%;"><a href="http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=05dde9f961d5128782ec2eadec422d8d" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><span style="color: #2baadf;">api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=05dde9f961d5128782ec2eadec422d8d</span></a><o:p></o:p></span></div>
<div class="MsoNormal" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; margin-bottom: 7.5pt; margin-left: 0in; margin-right: 0in; margin-top: 7.5pt;">
<br /></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br />
in browser returns json string</div>
<div>
<br /></div>
<div>
<pre style="white-space: pre-wrap; word-wrap: break-word;">{"coord":{"lon":145.77,"lat":-16.92},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"base":"stations","main":{"temp":300.15,"pressure":1007,"humidity":74,"temp_min":300.15,"temp_max":300.15},"visibility":10000,"wind":{"speed":3.6,"deg":160},"clouds":{"all":40},"dt":1485790200,"sys":{"type":1,"id":8166,"message":0.2064,"country":"AU","sunrise":1485720272,"sunset":1485766550},"id":2172797,"name":"Cairns","cod":200}</pre>
<div>
<span style="background-color: whitesmoke; color: #333333; font-family: "consolas"; font-size: 10pt; white-space: pre-wrap;"><br /></span></div>
<br />
Square documentation page<br />
<a href="http://square.github.io/retrofit">http://square.github.io/retrofit </a><br />
<h3 style="background-color: #f6f6f6; color: #888888; font-family: Roboto, sans-serif; font-size: 20px; font-style: italic; font-weight: 300; line-height: 40px; margin: 0px 0px 10px; padding-top: 115px; text-rendering: optimizeLegibility;">
Introduction</h3>
<div style="background-color: #f6f6f6; color: #333333; font-family: Roboto, sans-serif; font-size: 15px; margin-bottom: 10px;">
Retrofit turns your HTTP API into a Java interface.</div>
<pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); color: #666666; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; padding: 9.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><span class="kwd">public</span><span class="pln" style="color: black;"> </span><span class="kwd">interface</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #222222;">GitHubService</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #888888;">{</span><span class="pln" style="color: black;">
</span><span class="lit">@GET</span><span class="pun" style="color: #888888;">(</span><span class="str" style="color: #32835b;">"users/{user}/repos"</span><span class="pun" style="color: #888888;">)</span><span class="pln" style="color: black;">
</span><span class="typ" style="color: #222222;">Call</span><span class="pun" style="color: #888888;"><</span><span class="typ" style="color: #222222;">List</span><span class="pun" style="color: #888888;"><</span><span class="typ" style="color: #222222;">Repo</span><span class="pun" style="color: #888888;">>></span><span class="pln" style="color: black;"> listRepos</span><span class="pun" style="color: #888888;">(</span><span class="lit">@Path</span><span class="pun" style="color: #888888;">(</span><span class="str" style="color: #32835b;">"user"</span><span class="pun" style="color: #888888;">)</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #222222;">String</span><span class="pln" style="color: black;"> user</span><span class="pun" style="color: #888888;">);</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #888888;">}</span></pre>
<div style="background-color: #f6f6f6; color: #333333; font-family: Roboto, sans-serif; font-size: 15px; margin-bottom: 10px;">
The <code style="background-color: transparent; border-radius: 3px; border: 0px; color: #666666; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">Retrofit</code> class generates an implementation of the <code style="background-color: transparent; border-radius: 3px; border: 0px; color: #666666; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">GitHubService</code> interface.</div>
<pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); color: #666666; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; padding: 9.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><span class="typ" style="color: #222222;">Retrofit</span><span class="pln" style="color: black;"> retrofit </span><span class="pun" style="color: #888888;">=</span><span class="pln" style="color: black;"> </span><span class="kwd">new</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #222222;">Retrofit</span><span class="pun" style="color: #888888;">.</span><span class="typ" style="color: #222222;">Builder</span><span class="pun" style="color: #888888;">()</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #888888;">.</span><span class="pln" style="color: black;">baseUrl</span><span class="pun" style="color: #888888;">(</span><span class="str" style="color: #32835b;">"https://api.github.com/"</span><span class="pun" style="color: #888888;">)</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #888888;">.</span><span class="pln" style="color: black;">build</span><span class="pun" style="color: #888888;">();</span><span class="pln" style="color: black;">
</span><span class="typ" style="color: #222222;">GitHubService</span><span class="pln" style="color: black;"> service </span><span class="pun" style="color: #888888;">=</span><span class="pln" style="color: black;"> retrofit</span><span class="pun" style="color: #888888;">.</span><span class="pln" style="color: black;">create</span><span class="pun" style="color: #888888;">(</span><span class="typ" style="color: #222222;">GitHubService</span><span class="pun" style="color: #888888;">.</span><span class="kwd">class</span><span class="pun" style="color: #888888;">);</span></pre>
<div style="background-color: #f6f6f6; color: #333333; font-family: Roboto, sans-serif; font-size: 15px; margin-bottom: 10px;">
Each <code style="background-color: transparent; border-radius: 3px; border: 0px; color: #666666; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">Call</code> from the created <code style="background-color: transparent; border-radius: 3px; border: 0px; color: #666666; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">GitHubService</code> can make a synchronous or asynchronous HTTP request to the remote webserver.</div>
<pre class="prettyprint prettyprinted" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); color: #666666; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; padding: 9.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><span class="typ" style="color: #222222;">Call</span><span class="pun" style="color: #888888;"><</span><span class="typ" style="color: #222222;">List</span><span class="pun" style="color: #888888;"><</span><span class="typ" style="color: #222222;">Repo</span><span class="pun" style="color: #888888;">>></span><span class="pln" style="color: black;"> repos </span><span class="pun" style="color: #888888;">=</span><span class="pln" style="color: black;"> service</span><span class="pun" style="color: #888888;">.</span><span class="pln" style="color: black;">listRepos</span><span class="pun" style="color: #888888;">(</span><span class="str" style="color: #32835b;">"octocat"</span><span class="pun" style="color: #888888;">);</span></pre>
<div style="background-color: #f6f6f6; color: #333333; font-family: Roboto, sans-serif; font-size: 15px; margin-bottom: 10px;">
Use annotations to describe the HTTP request:</div>
<ul style="background-color: #f6f6f6; color: #333333; font-family: Roboto, sans-serif; font-size: 15px; margin: 0px 0px 10px 25px; padding: 0px;">
<li style="line-height: 20px;">URL parameter replacement and query parameter support</li>
<li style="line-height: 20px;">Object conversion to request body (e.g., JSON, protocol buffers)</li>
<li style="line-height: 20px;">Multipart request body and file upload</li>
</ul>
<br />
To work with Retrofit you need basically three classes.<br />
<ul style="text-align: left;">
<li>Model class <span style="background-color: yellow;"> POJO </span>which is used to map the JSON data to Has one field for every item in the data</li>
<li><span style="background-color: yellow;">Interfaces</span> which defines the possible HTTP <span style="background-color: yellow;">Operations</span> and <span style="background-color: yellow;">endpoints</span></li>
<li>Client class which uses Interface and Retrofit.Builder class - Instance which uses the interface and the Builder API which defines URL end point for the HTTP operation.</li>
</ul>
Retrofit makes use of OkHttp (from the same developer) to handle network requests.<br />
<br />
Retrofit does not have a built-in any JSON converter to parse from JSON to Java objects. Instead it ships support for the following JSON converter libraries to handle that and fill in POJO plain old java objects which have fields for each piece of data:<br />
<br />
Gson: com.squareup.retrofit:converter-gson<br />
Jackson: com.squareup.retrofit:converter-jackson<br />
Moshi: com.squareup.retrofit:converter-moshi<br />
<br />
<br />
Videos<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=R4XU8yPzSx0"><img src="https://i.ytimg.com/vi/R4XU8yPzSx0/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDxxL4TkCA8x-5Jdyqz7OCh1vv-wQ" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=R4XU8yPzSx0">11:59</a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=R4XU8yPzSx0">Retrofit Tutorial — Getting Started and Creating an Android Client</a><br />
<br />
<a href="https://www.youtube.com/channel/UCWIA0jryy_aEd9u6JTe1S9Q">Future Studio</a>47K views1 year ago<br />
In this video, you'll learn what Retrofit is and how to request data from the GitHub API. Tip: turn on subtitles to deal with my accent. A<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=3cN6aJmwMAg"><img src="https://i.ytimg.com/vi/3cN6aJmwMAg/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLBe8QTVRpKhKLWXgQ7HEqMro1-M0A" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=3cN6aJmwMAg">8:07</a><a href="https://www.youtube.com/watch?v=3cN6aJmwMAg">Retrofit Tutorial for Android</a><br />
github source code<br />
<a href="https://github.com/opendroid/RetrofitExample">https://github.com/opendroid/RetrofitExample</a><br />
<br />
48K views2 years ago<br />
<br />
Tutorial on Retrofit Library by square. The example code is on github: https://github.com/opendroid/RetrofitExample Open weather<br />
<br />
<br />
<br />
<img src="https://i.ytimg.com/vi/VFby80Flh0U/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA1ldOobPeTuBRsTcqk2EhW7tHJMw" /><br />
<br />
<a href="https://www.youtube.com/watch?v=VFby80Flh0U&list=PLshdtb5UWjSoFPs3AakEpH1pmSrJVxJhs">Android Retrofit Tutorial</a><br />
<br />
<a href="https://www.youtube.com/user/TICOONTECHNOLOGIES">PRABEESH R K</a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=VFby80Flh0U&list=PLshdtb5UWjSoFPs3AakEpH1pmSrJVxJhs">Android Retrofit - 01 - Introduction to Retrofit Library</a>6:26 <br />
<a href="https://www.youtube.com/watch?v=sYWRv7Fasgg&list=PLshdtb5UWjSoFPs3AakEpH1pmSrJVxJhs">Android Retrofit - 02 - Simple Example of Retrofit</a>23:53 <br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=-GV2SWP-49s"><img src="https://i.ytimg.com/vi/-GV2SWP-49s/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLA-i43UAF5fgvtq0P679LV_NeUyng" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=-GV2SWP-49s">28:39</a><br />
<a href="https://www.youtube.com/watch?v=-GV2SWP-49s">Beginner Android REST Tutorial - Implementing Retrofit REST Adapter, OKHttp, JSON, DataModel</a><br />
<a href="https://www.youtube.com/user/gosuddr93">wiseAss</a>1.4K views3 months ago<br />
In this tutorial series, I'll be explaining the fundamentals of RESTful Web Services, and what the hell that actually means. In particular<br />
<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=wq2RQKBK4qw"><img src="https://i.ytimg.com/vi/wq2RQKBK4qw/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCKCpvhr2jUW-Q7ZSH-uCXRA6z_5Q" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=wq2RQKBK4qw">52:25</a><a href="https://www.youtube.com/watch?v=wq2RQKBK4qw">Android REST Tutorial - OKHttp Error Interceptors, RxJava 2, Repository Pattern, Retrofit</a><br />
<br />
<a href="https://www.youtube.com/user/gosuddr93">wis</a>1.2K views2 months agoIn this tutorial series, I'll be explaining the fundamentals of RESTful Web Services, and what the hell that actually means. In particular<br />
<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=j7lRiTJ_-cI"><img src="https://i.ytimg.com/vi/j7lRiTJ_-cI/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDwBa0UTANdJHPX9awCivUop3U1_A" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=j7lRiTJ_-cI">9:13</a><br />
<a href="https://www.youtube.com/watch?v=j7lRiTJ_-cI">Retrofit Tutorial — Send Objects In Request Body</a><br />
<a href="https://www.youtube.com/channel/UCWIA0jryy_aEd9u6JTe1S9Q">Future Studio</a><br />
In this video, you'll learn how to send Java object in the request body to the server with Retrofit. Tip: turn on subtitles to deal with my<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=Vn1vD4oC7sA"><img src="https://i.ytimg.com/vi/Vn1vD4oC7sA/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLA9daFSU3QYRutQqi1SORvNHc1pow" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=Vn1vD4oC7sA">18:17</a><a href="https://www.youtube.com/watch?v=Vn1vD4oC7sA">Retrofit Android Example – Fetching JSON from URL</a><br />
<a href="https://www.youtube.com/user/SimplifiedCoding">Simplified Coding</a>14K views5 months ago<br />
Retrofit Android Example. In this video we will learn fetching JSON data from a URL using RetrofitLibrary. For the source code and<br />
<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=hiCfG5WiVF8"><img src="https://i.ytimg.com/vi/hiCfG5WiVF8/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDWbKET_bbKB9YQamG4VTw3HQoi2g" /></a><br />
<br />
<a href="https://www.youtube.com/watch?v=hiCfG5WiVF8">10:35</a><a href="https://www.youtube.com/watch?v=hiCfG5WiVF8">Make your REST Client easily in Android with Retrofit 2 and GSON - Part 1</a><br />
<a href="https://www.youtube.com/user/sylsau">Sylvain Saurel</a><br />
8.7K views1 year agoLearn to make your REST Client easily in Android with Retrofit 2 and Gson - Part 1.<br />
<a href="https://www.youtube.com/watch?v=OzlINapSY8g&list=PLEVlop6sMHCrO2gl7zX0L5Fjlq3m_HJCo">Android REST Tutorial - Retrofit, OkHttp, RxJava 2, JSON (Moshi)</a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=OzlINapSY8g&list=PLEVlop6sMHCrO2gl7zX0L5Fjlq3m_HJCo">Beginner Android REST Tutorial - What is REST, and why do we need it?</a>3:47 <br />
<a href="https://www.youtube.com/watch?v=UZ24eApwbVM&list=PLEVlop6sMHCrO2gl7zX0L5Fjlq3m_HJCo">Beginner Android REST Tutorial - Project Demo and Overview</a>10:20 <br />
<br />
<a href="https://www.youtube.com/playlist?list=PLEVlop6sMHCrO2gl7zX0L5Fjlq3m_HJCo">VIEW FULL PLAYLIST (4 VIDEOS)</a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=wg9nG07UvuU"><img src="https://i.ytimg.com/vi/wg9nG07UvuU/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAdeIr27iUVTB2F9YJEXLoXYC-ogw" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=wg9nG07UvuU">24:37</a><br />
<br />
<a href="https://www.youtube.com/watch?v=wg9nG07UvuU">Android REST Tutorial - CRUD Application RETROFIT Latest</a><br />
<br />
<a href="https://www.youtube.com/user/SuperAndroidTutorial">SuperAndroidTutorial</a><br />
13K views1 year ago<br />
<br />
<br />
Create a simple rest application in android. How to invoke RESTful webservice in Android applications! How to call webservice in<br />
<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=gwSaxVkUiqo"><img src="https://i.ytimg.com/vi/gwSaxVkUiqo/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLBKrDNYCblcyjBjpy9NJZ6zY_taZg" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=gwSaxVkUiqo">11:37</a><br />
<a href="https://www.youtube.com/watch?v=gwSaxVkUiqo">Retrofit Tutorial — Basics of API Description</a><br />
<a href="https://www.youtube.com/channel/UCWIA0jryy_aEd9u6JTe1S9Q">Future Studio</a>933 views2 months ago<br />
<br />
<br />
In this video, you'll learn in more detail how to describe API endpoints in Retrofit. I'll introduce a variety of standard configurations<br />
<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=yYjMCDlyRUg"><img src="https://i.ytimg.com/vi/yYjMCDlyRUg/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLATaHft_021mNgZ9FVYLJp8KNK5yA" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=yYjMCDlyRUg">21:41</a><br />
<br />
<a href="https://www.youtube.com/watch?v=yYjMCDlyRUg">Android Tutorial #7 - Get Stuff from Internet - Retrofit 2.0</a><br />
<a href="https://www.youtube.com/user/SuperAndroidTutorial">SuperAndroidTutorial</a><br />
16K views2 years ago<br />
<br />
<br />
Code is here https://github.com/AndreiD/UltimateAndroidAppTemplate remember to star the repository please Retrofit is one of the<br />
<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=YXDG0NuPFLw"><img src="https://i.ytimg.com/vi/YXDG0NuPFLw/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCRD_ANXpDQ1gZJPgG1O6eNZScS0Q" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=YXDG0NuPFLw">13:29</a><br />
<a href="https://www.youtube.com/watch?v=YXDG0NuPFLw">ANDROID RETROFIT JSON API CALL</a><br />
<a href="https://www.youtube.com/channel/UCZ00VgbuL3218mXA0_drptg">Delaroy Studios</a>14K views1 year agoThis video explains in details how to use the retrofit library to make JSON API calls to a live server Donate: https://www.paypal.me/<br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=CLA3Ox0QtKQ"><img src="https://i.ytimg.com/vi/CLA3Ox0QtKQ/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAcrFdYjG7u5H_vCh-MHDcpXHcqpw" /></a><br />
<br />
<br />
<a href="https://www.youtube.com/watch?v=CLA3Ox0QtKQ">19:08</a><a href="https://www.youtube.com/watch?v=CLA3Ox0QtKQ">Android JSON API Calls using Retrofit HTTP Library</a><br />
<a href="https://www.youtube.com/channel/UCZ00VgbuL3218mXA0_drptg">Delaroy Studios</a>20K views1 year ago<br />
<br />
This is a fully analyzed video on how to make API calls using a more smoother library called Retrofitusing the Movies DB API. A<br />
<br />
<a href="https://www.youtube.com/watch?v=Lx1e_fdnNxA">Android JSON Retrofit Example [Parsing JSON Data from Web ...</a><br />
<a href="https://www.youtube.com/watch?v=Lx1e_fdnNxA"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAUDBA0QDQ8QDg8QEA4NDQoODw4PChANDwsQDQ8PDQ0NDQ0NDRwNDQ0QDQ8OEBUPDx0dHx8fDg0gGBYeGBweHx4BBQUFCAcIDwkJDxcTEBMaFRgVExUVFhIWGB4aFRIZFxsXFhYTFR0VHhUVFh0VFxIVFRoYEhkVFRUVFRUXFRIVFf/AABEIAFoAeAMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAGAAEEBwgFAwL/xAA6EAACAQMCBAQDBgUDBQEAAAABAgMEERIAIQUGEzEHIkFRFDJhCCNCUnGBJCUzYpEVc7E1Q6HR8Bf/xAAbAQACAwEBAQAAAAAAAAAAAAAABQMEBgIHAf/EADIRAAEDAgQEBAUDBQAAAAAAAAECAxEABAUSITFBUWFxEyKRoQYVMoHwFLHxI0JScsH/2gAMAwEAAhEDEQA/AMZafWlKLwBo7lJHqVkJYqOtFbDezf0POynEOi2tfYlbEinEPDCji6iuKlnWwQx1MRQ77ux+HLY2IsAL3yB99VrK9ZvHC2woKUIMfeJHOqyrttIkz6VSun1bEPINKbjCpHYhjUJZQPmuPhLsT6AW/fXY4V4OwSRGS8yXbGGNp485z63+4AjUAE5ttsfTfTG5t1W6M7pAEgbzv2/BXCL9pW0+hqjtPrQVR4GUvSLpJM7BQxTqxJf5g8akxFjIpHZgBuLHXJpvDnhixhpTWNIz26cboMU/OWemxJPoo/431TYdS+klrzQYIAMz2/7tXSrttO/7VSem1ck3h/w4pdVrA+bXylixVPwWtTXeRh6bAWb01Ki8G0IiNpB1rkBqtAY1vZWl/hfIrEgL7na19tWXG/CTmdITMgZiBtXP69rr6GqR0tXjxvwfggAMizsGyVXSpRUEgYjE50eXYXFwA34W9/Wu8OODRqVM1VJMqr/SmiMTM3dVf4Y7Jtkf8C9wK6V50pU0CsKmMgzbaGY2jrQb9kbmO9UTpauPjXh/w0OFgapkUWXMyxjrObbRJ8NkFvtc+/6Xel8JA0jRJBVNLGAWQTRllBAYG3Q9iDtq4i1WUhSoTImFEJMdjtXPzFmYBJ7Amqc02ru4b4acPuyP8W05mEKQRzRgk3sxZ3psR2awNu1+18S7i3gTwtCE6lUZnJCRNUQoxNixLA0t0RQCS1vTYEkAq7y8RaLCHAddoBI2me3XbfkalTdtkSKzJptXVxjwzoep06c1UxCm5WWM5lfnZAtPfpD0J7+m2+lpghrMkKJCZEgKISfQ1CcRZBiT6E1tjw35UimZpZkDrHJaNGUFS4FzIQdjYNioP99x2IP+a+ORUtO80gbCILZI0zeRnYRxRRIPnlkkZY0QdyygaDvs31bycMRpDdzPWAkgC+MzqvYW2UAftok5oo6OqkSlmdWkiMNYaYTBXZUZlileMHqGJZ7MrC3njTfa2leHYYnD2QwIkfURxPH3q0zBQCONfNHz3QuYAJ0yqoaeaIE2yjqFZ4WJtinUVJMQxF8Htex1C4N4l0ErMEl26kEUb4nGpaaLrqYLeZ0EXnL2tbzXx31zeXfDvhvnSEuywPTQNH1SRD8I89VDT7i4RFrmAH5TEL7a6HLvhrSwGMhppGiYFWlmDnFaY0aRtZRkqU5Kgt5id2Zm31fqWvYeI9AQrJNG0bGXKUSxqkKx071ZlfqOrNE0EZZXiDAjzfICw6fJ/M0VUsrRBsYZ3gJdMMmRUcsqnzBfOB5gDsdtCyeDlB0uk/WkTpmEZz+YQ/Cy0UcAZVBwjgmkCk+a7ZMxbfRHwWggo1xaV2eqqSTJKQXqJ5F9emgjU9OMABQBZPfRRRCRrO3GqRRPU7A9Spq87+bO8rixv3ULsF7fTWitY18ReexS1dWkcZf+K4i7tJIQA5mfaMC4wW267d/Q3Jz/AMRYPd4mwlq0kqBneBGu5kVUu3ENpBVRfTcj1VYkkEJ8gUL13kYLBdkYxvbzSyBBdLbgG0hFwW5PE/s31SSRZTxvA0iLPMilZIU/E5ja4Owx6lzYspdcAzDQPCJ46Gmp4pDk/TvI11XJhj15mLsEVeq42B/GoUak03OcbNGqo56s8tOpBjIzjV3fIdW6gJHI3mF/IdrlQWuBBzC7fwUq8x1V3O8fnWu/lCXUhakz1qJw3wt4XHGqJRwjAACQxgzggEZfEH78PufMGvud9TvD/lOOkiZFF2eSR3kJu8l2bp5tbcrGQNtr5EDc6lTcyxLkZMo1Xq2dgCr9J+lIRgSwCuR84He42vaRR8ciZwgJDkSkK0bKSI3aNjZl/Mpt7gXG2ravMrOdTzqUISNhUOk5Tp1rJKzpp8RLHFF1AvmwS53/AL2JAZh3WOEHZRoW+0NybHV8OmOAaemjkngIW75RjNoh6lZVXAr2uUPcAgsouaYGVWuy5hCA8TgrmEZc/LZdpI73O2aA7kam8L4rHKSELXW1w0Tx9yQLdRRfdT212lwpUFcRQttKklJ2NY58LOHsY5A0ZjYSvHMxus0hW33BQgNAqXsw7+gAN7Nq4vtCQLT1ENSHjijlWb4kFBnUvEqLAEtu0hQsCe9oox2B0tecfE1niz9+t22SopVr5Aox0Jj+BFKcrbHkUdudEf2Xz/Ko/wDfru/++/8A9bUfmvwilnqKioFfJHJVR10BUU8ZSGCppVpgkTACpDpJFTzn7zAtHJaNS5YdzwZ4Yq0BjIXEy1WSqMVAlcsyqO4UZEf+tCPCuXeK00SLTRveaXjiSWngYwmXiKPwypkaeW5gi4eJVKRZMBJGOkSPL6J+oTcf1k7K1H31powIbSOgqTS+CKBFHUhiyqZnnipqEQ08tJUCmFTw9ITIRHHM1JAzvud5gAMrhuHeCK9aZ6iSCaOoqoKiaH/TY0jqOlJXSAzxhunJKwq4lMjAk/CqTckY8+XgnHYldYGqCTWcdZGM9Gy5VFVFNw2eUyN1Dw6OAzrNCn3mTMEjKYEdWu4TxcDq2MswHMFl6lMrRrJVRjh6QMQAl6JMscgCwHUdTuCpahR+B7iCSI1ELtJScMg+Jkoc6gfBR0sb0/UM+/Dqk0uctL6moqLsctTuEeDSx1VJOHgtSCmC3oy0sQhFSOhSztNeClY1APSAIHSsNiMJXhJwXiSzyT1wJeShp4VZ3hzvFXcTljSRadmjWRaSekDsuQJy8zEE6Fed+TeNT0CiVmkq+s+MaTxvFGJaNYupJIslKY+jVdSRJIxMyFgRFIexRV+ayryx4TLxLifFGndkpIq+sjOBAeWUuWKqxBwCxlSxtc5qB7jUPDImWNFdsnVEDN+dgAGb9zc/voF8HKhQ/EYslMi8SrZWAO4WZ/Jl/d5CLewX3GpWrosSEmCrSq7zKXCnNw1o04hwmOVVEyK+I9V23FmsDewYXBX22OoHRpkmjjEYzyeVCFBEbsst273R3Tr2Nt7Sb313teT06ZByoyAIDYjID1AbuB9NQwJq34qsuWTHKaDH4vStllAxJNyB5iSxwlVLNsRO7wyILb9XK++pUHG6dS7mJkdDPcnZbCSYCQm9gZHWQBSM7swC21M5i4zSRArJgSQxMfTDswvmSU9svNv6/XULgXMlDMT0whe7MUaEI5JHmYZDzMV9vTubalDK4zQYquX2wrLImpPD5KZ3EfQKsuexjBVRG5hUMyMVswp1ZQdvu4r2YDRBBSopJVQCbAkDva5/5J/zr5hpY75BVDWbzBAD5iWYXtfdiSfqT66eCqUsyj5ktkpBBAb5WF+6NY2YbXVhe4IEdS1n77Z0MzQ07qPuIJmjkup8zzJkhH9iKhBYfimQA3U6Wj77SlGZeGPEpUPJNSBS3ZcJVldj+kSObfTT6cWOO2Vo34dw4Eq4A8qzmK2y1PSnlXv4e8wQxQxRuTlUVNRHHZGYFkBZgWUELYKe/sfY66XGefI4nkQqSyOiAAks5LQKzBUUkKpqIr+u98bEEj/2YR/Kk9f4iuN/XeeQ7/X30b81y9OGSRKczuAn3ShQ8nmAtd9vLctv7G2+kCbU2qAyFTk0mOQitVYraWEZkkyB/dGs9tNNNe9RJeaQsdU7pYUmVwHBMlolm8vtdHUC/rf9Tzj4gR54dM5CR0YFgpTF4IwbPYuWNRGwCXBU7NcqD78y8UnSaNUpzJEwDSWiyswBIGedlbyACytuUuVHm1zoeZZr3+BawRZFUK2QYrUs+5iCZnooqgkG86ZY3GgrMxPtV9u3SU5igEf7gfufvUzhHP8AHLB1UQjzU6FHYKVaZUdQx7WxdTcXuCCNjrxh8TqU9PZwHWN2LKFEKvTzVQaRi2IskEisAdiN9t9Rp+YKoqxFIuGKYxtHKSWVpg5JEV+njHGUATLzrdQSADsUqd8Rc2J8o3IFhf8AbbQkqOx9q+PoYa+pG+0LmNt68uDcRWWMSJfFshuLEFSVYEH1DAj9tVd4bUsUvEK7F7NSzVIYRyYlXqKiU3YL3/pElXupJFwSNraijAFgAAOwAsB+g1lnhHikKHjFXnGPhjVV8dR01vIGaoZkqGF/vAnykDezvYE4g9HD13TiCkSUHN7Efffakd0+htQJ0E8a1PGtgBcmwAubXP1NgBc/T/Go3FanBGb8qu364i9tczkzm+lrEZ6WTqIjBWbpulmKh8bSKDfFlJH1GunxWlzW363HuCCCP/OrAEKhVSKOZPlrHPOPiKtp5GBaUzSqcMSypYOvz/g2xsu18d+2hDlbniQzIybXdTe2DfQix/xY+19+xF4zeGM1POzLG8kLuHV1G297gG1twex99xqL4W+HE8tSpSPbIFmZSqqDvd29Le3c2trWIKQMwIyRWWUB9JBz1snkSuaSnSRvxop9e48rXv8AUemvTmjiEUHTnlkSKNGwkkdwihJRZVJY43acQgetzYd7GRy3SqkQjXtF5L2tcgAn6dz6fUemqz+0vWRy060eRBldHfEDYRnKKMsxxR5ZQuJbY4ML3I1j7m4ZaJW4YTO9aUKKGpO4FBvN/P0fEqopDmaOkGxKYpVyubZNkMgiKLIhsW6kmQxsNLVTcWoXpZVSXOSl6hmVUbESuoGIa+/UVgl1v5gAR5u76y+LYA/ibourNxZaUBl8MAj7ytOs7iNNqTm71PiDWtNfZiUjhSXFj167a1rffye++rP1lKLxHhiW0PE4tmdmT/UYlWXI3a1pLI35bbeh23Avz741SqYzT8SuHD5KlYj4gWxLXBKSHI7bjyL9dObDFvmNwEBtSSonVQhI47n2Ma0y8cMtgEExG1bVtprawN/+2V/f/VGK+lp4sj9LW8p9yf2vtcr5K8Y5ZI2EvFMZCxyeSrijWFPToqWvJI3a73Atc9gGbYkwbJkvKIUBwTqfSuUX4UYyK9K2dbT6ytJ4tIjf9TjdG2H8xS8bHYBrSXaMn8XdSTe6/LX3MvjRVrM6RcTYoCMWFVE6nIBsQwXdVviG/tNzvsuwm7GIOFCUlGkysZR/I5VI7dhAnKT2FbW5p49DTQPPO4SKJSWY+vsqjuzsbKqjckgDfWAOPcVMtRNUEWaonqJgl726rs+J90UNj9bfrqNzDz29TZqqsM+JOCSVQZVNrEhMsUFu+IBP6aKODx8LaPB6umLtg8s7VMakG11hgVnBCgWzY/oN/k0a7tjB0eI5KyrTyCYHH848KT3a3bsgJSQBzqf4Ic6VNJWA04V0nKrPBI+CMFuQ4exKFBli1j3KlTca01wvxjppYy0McrkM6f8AbCZLsfP1LlD3DKDsQbazPxWp4U8TKKikilUriY6iEKSFIBPntJGwJvnuMiP1Cann04IsdSkcccZiCJKsdwe7MA5yZrbtfbf1NymduHcYJXaQ0oQCHBHPUf5Tt0g76VIy69apykEjpW4fDrmaKriKMfvY81dciRKqnHqIzACUbhXcDZsh7X6fNvHaWhp3nnbFEvYXBeVreWOJSfM7WsB+pNhc6wTQ8yCSSANWRoyBUikNQqLSqBbLJWFmx2Hr2yPbRzW13DpWSSSsin6KlQKjigeSpF7sxaSb7s3+RDYG1msLW+XLgw9KEXCiska5BPbkNfbtVpF2taSQjXrXS5C554g9bPKZ5UglaeomVZ7QQhyxSxceVV+S6YscBl2OjyTF1Jazq4JYs2fUBG7MzEl7j8RP76p3mriHDQiPDVQFfujLTrUBVlUNkMUDkq2WzRk9jfYi+uRxPxOZiVE0AizRhErIUwS2MRNwzRkAZKbX3FgNtZ7GsEe+InEXFqvw0DQpVKIjpxJ57RGtVUuuNApWCfeu74pyMRFYAxFpGjkNupN5UUMw+Z1VQFWQ7sMb+hK0MNx9KifKSpgEkneR6hEjp09ku9rgHYDff8xJDa9Awq4t8JtG7V9YzAaxJGpP5w7CljrDrqyoJNUBfSvptLSKtlT30r6bS0UU99K+m0tFFPfSvptLRRT30r6bS0UU99K+m0tFFPfSvptLRRT302lpaKK//9k=" />▶ 19:39</a><br />
https://www.youtube.com/watch?v=Lx1e_fdnNxA<br />
May 2, 2017 - Uploaded by CodingWithMitchAndroid JSON Retrofit Example [Parsing JSON Data from Web] Android Advanced Tutorial #9 In this video ...<br />
<br />
<br />
Github<br />
<br />
<a href="https://github.com/ahmed-adel-said/Retrofit-Library-Tutorial">https://github.com/ahmed-adel-said/Retrofit-Library-Tutorial</a><br />
<br />
Articles<br />
<br />
<br />
JSON Parsing in Android<br />
<a href="http://www.androiddeft.com/2017/10/08/retrofit-android/">http://www.androiddeft.com/2017/10/08/retrofit-android/</a><br />
<br />
<br />
<a href="https://stackoverflow.com/questions/40973633/retrofit-2-get-json-from-response-body">android - Retrofit 2: Get JSON from Response body - Stack Overflow</a><br />
https://stackoverflow.com/questions/40973633/retrofit-2-get-json-from-response-body<br />
Mar 12, 2017 - and use dependencies in gradale compile 'com.squareup.retrofit2:retrofit:2.3.0' compile 'com.squareup.retrofit2:converter-gson:2.+'. NOTE: The error occurs because you changed your JSONinto POJO (by use of addConverterFactory(GsonConverterFactory.create()) in retrofit). If you want response in JSON then remove the ...</div>
<div>
<a href="https://code.tutsplus.com/tutorials/getting-started-with-retrofit-2--cms-27792">Get Started With Retrofit 2 HTTP Client - TutsPlus Code - Envato Tuts+</a><br />
https://code.tutsplus.com/tutorials/getting-started-with-retrofit-2--cms-27792<br />
Dec 16, 2016 - Retrofit, on the other hand, is very well planned, documented, and tested—a battle-tested library that will save you a lot of precious time and headaches. In this tutorial, I will explain how to useRetrofit 2 to handle network requests by building a simple app to query recent answers from the Stack Exchange ...<br />
<br />
,Retrofit was built on top of some other powerful libraries and tools. Behind the scenes, Retrofit makes use of OkHttp (from the same developer) to handle network requests. Also, Retrofit does not have a built-in any JSON converter to parse from JSON to Java objects. Instead it ships support for the following JSON converter libraries to handle that:<br />
<br />
Gson: com.squareup.retrofit:converter-gson<br />
Jackson: com.squareup.retrofit:converter-jackson<br />
Moshi: com.squareup.retrofit:converter-moshi<br />
<br />
<a href="https://zeroturnaround.com/rebellabs/getting-started-with-retrofit-2/">Getting started with Retrofit 2 | zeroturnaround.com</a><br />
https://zeroturnaround.com/rebellabs/getting-started-with-retrofit-2/<br />
Jun 2, 2016 - We're excited to announce that JRebel For Android 2.0 has landed! If you're as sick of slow development as we are, click below to check out the latest version of our awesome Android dev tool. LEARN MORE. This post was modified from its original versi<span style="background-color: white; color: #545454; font-family: "roboto" , "arial" , sans-serif; font-size: x-small;">on, we've rewritten it to include latest</span><span style="background-color: white; color: #6a6a6a; font-family: "roboto" , "arial" , sans-serif; font-size: x-small; font-weight: bold;">Retrofit</span><span style="background-color: white; color: #545454; font-family: "roboto" , "arial" , sans-serif; font-size: x-small;"> </span><span style="background-color: white; color: #545454; font-family: "roboto" , "arial" , sans-serif; font-size: x-small;">2.0+ ...</span></div>
<div>
<span style="background-color: white;"><span style="color: #545454; font-family: "roboto" , "arial" , sans-serif; font-size: x-small;"> we quickly got from zero to a functional sample that we can run from the Android Studio. What is even better it’s that the new Android emulator that came with the Android Studio 2.0 is pretty snappy too. </span></span></div>
<div>
<span style="background-color: white; color: #545454; font-family: "roboto" , "arial" , sans-serif; font-size: x-small;"><br /></span></div>
<a href="http://square.github.io/retrofit/">Retrofit - Square Open Source</a><br />
square.github.io/retrofit/<br />
Introduction. Retrofit turns your HTTP API into a Java interface. public interface GitHubService { @GET("users/{user}/repos") Call<List<Repo>> listRepos(@Path("user") String user); }. The Retrofit class generates an implementation of the GitHubService interface. Retrofit retrofit = new Retrofit.Builder() .<br />
You visited this page on 3/16/18.<br />
<br />
<br />
<a href="https://square.github.io/retrofit/2.x/retrofit/">Overview (Retrofit 2.3.0 API)</a><br />
https://square.github.io/retrofit/2.x/retrofit/<br />
Body · Call · CallAdapter · CallAdapter.Factory · Callback · Converter · Converter.Factory · DELETE · Field · FieldMap · FormUrlEncoded · GET · HEAD · Header · HeaderMap · Headers · HTTP · HttpException · Multipart · OPTIONS · Part · PartMap · PATCH · Path · POST · PUT · Query · QueryMap · QueryName · Response ...<br />
<br />
<br />
<a href="http://www.vogella.com/tutorials/Retrofit/article.html">Using Retrofit 2.x as REST client - Tutorial - Vogella</a><br />
www.vogella.com/tutorials/Retrofit/article.html<br />
Feb 13, 2018 - It also provides a REST API which is well documented on the Stackoverflow API side. In this exercise you use the Retrofit REST library. You will use it to query StackOverflow for tagged questions and their answers. We use the following query URL in our example. Open this URL in the browser and have a ...<br />
<div>
<br /></div>
<div>
<div class="paragraph" style="background-color: white; box-sizing: border-box; color: rgba(0, 0, 0, 0.8); direction: ltr; font-family: "Noto Serif", "DejaVu Serif", serif; font-size: 16px; margin: 0px; padding: 0px;">
<div style="box-sizing: border-box; direction: ltr; font-family: inherit; font-size: 1.0625rem; letter-spacing: -0.003em; line-height: 1.58; margin-bottom: 1.25rem; padding: 0px; text-rendering: optimizeLegibility;">
To work with Retrofit you need basically three classes.</div>
</div>
<div class="ulist" style="background-color: white; box-sizing: border-box; color: rgba(0, 0, 0, 0.8); direction: ltr; font-family: "Noto Serif", "DejaVu Serif", serif; font-size: 16px; margin: 0px; padding: 0px;">
<ul style="box-sizing: border-box; direction: ltr; font-family: inherit; font-size: 1em; line-height: 1.6; list-style-position: outside; margin: 0px 0px 1.25em 1.5em; padding: 0px;">
<li style="box-sizing: border-box; direction: ltr; margin: 0px; padding: 0px;"><div style="box-sizing: border-box; direction: ltr; font-family: inherit; font-size: 1.0625rem; letter-spacing: -0.003em; line-height: 1.58; margin-bottom: 0.625em; padding: 0px; text-rendering: optimizeLegibility;">
Model class which is used to map the JSON data to</div>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; padding: 0px;"><div style="box-sizing: border-box; direction: ltr; font-family: inherit; font-size: 1.0625rem; letter-spacing: -0.003em; line-height: 1.58; margin-bottom: 0.625em; padding: 0px; text-rendering: optimizeLegibility;">
Interfaces which defines the possible HTTP operations</div>
</li>
<li style="box-sizing: border-box; direction: ltr; margin: 0px; padding: 0px;"><div style="box-sizing: border-box; direction: ltr; font-family: inherit; font-size: 1.0625rem; letter-spacing: -0.003em; line-height: 1.58; margin-bottom: 0.625em; padding: 0px; text-rendering: optimizeLegibility;">
Retrofit.Builder class - Instance which uses the interface and the Builder API which allows defining the URL end point for the HTTP operation.</div>
</li>
</ul>
</div>
<a href="http://www.vogella.com/tutorials/Retrofit/article.html#retrofit">Retrofit</a> · <a href="http://www.vogella.com/tutorials/Retrofit/article.html#retrofit-converters-and-adapters">Retrofit converters and ...</a> · <a href="http://www.vogella.com/tutorials/Retrofit/article.html#retrofit-authentication">Retrofit authentication</a> · <a href="http://www.vogella.com/tutorials/Retrofit/article.html#stackoverflow_basics">Exercise: Build an ...</a><br />
<br />
<br />
<a href="https://futurestud.io/tutorials/retrofit-getting-started-and-android-client">Retrofit — Getting Started and Creating an Android Client - Future Studio</a><br />
https://futurestud.io/tutorials/retrofit-getting-started-and-android-client<br />
<a href="https://www.google.com/search?rlz=1C1GGRV_enUS751US751&ei=a5esWqqIIJLYtQWu35WYDg&q=retrofit+documentation&oq=retrofit&gs_l=psy-ab.1.1.0i71k1l8.0.0.0.8446.0.0.0.0.0.0.0.0..0.0....0...1..64.psy-ab..0.0.0....0.UW9U8lBwHOY#"></a><br />
<br />
<a href="https://webcache.googleusercontent.com/search?q=cache:Vz8xsqdEheAJ:https://futurestud.io/tutorials/retrofit-getting-started-and-android-client+&cd=5&hl=en&ct=clnk&gl=us"></a>Dec 1, 2014 - This is the first tutorial in an extensive series on Retrofit. The series dives through all aspects of Retrofit and prepares you for many potential use cases. You'll get to know Retrofit's range of functions and extensibility. Update — October 21st 2015. We've added new code examples for Retrofit 2 besides the ...<br />
<a href="https://futurestud.io/tutorials/retrofit-getting-started-and-android-client#prepareyourandroidproject">Prepare Your Android Project</a> · <a href="https://futurestud.io/tutorials/retrofit-getting-started-and-android-client#howtodescribeapiendpoints">How to Describe API ...</a> · <a href="https://futurestud.io/tutorials/retrofit-getting-started-and-android-client#retrofitrestclient">Retrofit REST Client</a><br />
<span style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;">Making REST call is common in now days app. There are lots of Opensource lib available in the market which can full-fill your requirement</span><br />
<br style="color: #333333; font-family: q_serif, Georgia, Times, "Times New Roman", "Hiragino Kaku Gothic Pro", Meiryo, serif; font-size: 16px;" />
<span class="qlink_container" style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;"><a class="external_link" data-qt-tooltip="square.github.io" href="http://square.github.io/retrofit/" rel="noopener" style="background-attachment: initial; background-clip: initial; background-image: url("//qsf.fs.quoracdn.net/-3-images.new_grid.external_link.svg-26-aef78ead48f1f1e2.svg"); background-origin: initial; background-position: right 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration-line: none;" target="_blank">Retrofit</a></span><span style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;"> - Fast and effective </span><br />
<span class="qlink_container" style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;"><a class="external_link" data-qt-tooltip="android.com" href="https://developer.android.com/training/volley/index.html" rel="noopener" style="background-attachment: initial; background-clip: initial; background-image: url("//qsf.fs.quoracdn.net/-3-images.new_grid.external_link.svg-26-aef78ead48f1f1e2.svg"); background-origin: initial; background-position: right 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration-line: none;" target="_blank">Volley</a></span><span style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;"> - Fast effective in android specially for short time operation</span><br />
<span class="qlink_container" style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;"><a class="external_link" data-qt-tooltip="square.github.io" href="http://square.github.io/okhttp/" rel="noopener" style="background-attachment: initial; background-clip: initial; background-image: url("//qsf.fs.quoracdn.net/-3-images.new_grid.external_link.svg-26-aef78ead48f1f1e2.svg"); background-origin: initial; background-position: right 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration-line: none;" target="_blank">OkHttp</a></span><span style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;"> - Cool easy with high performance task </span><br />
<span class="qlink_container" style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px; margin-bottom: 0px;"><a class="external_link" data-qt-tooltip="loopj.com" href="http://loopj.com/android-async-http/" rel="noopener nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("//qsf.fs.quoracdn.net/-3-images.new_grid.external_link.svg-26-aef78ead48f1f1e2.svg"); background-origin: initial; background-position: right 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration-line: none;" target="_blank">Android Asynchronous Http Client</a></span><span style="color: #333333; font-family: "q_serif" , "georgia" , "times" , "times new roman" , "hiragino kaku gothic pro" , "meiryo" , serif; font-size: 16px;"> -Callback based API allow to pars data ready made.</span><br />
<br />
<a href="https://android.jlelse.eu/consuming-rest-api-using-retrofit-library-in-android-ed47aef01ecb">Consuming REST API using Retrofit Library in Android - AndroidPub</a><br />
https://android.jlelse.eu/consuming-rest-api-using-retrofit-library-in-android-ed47aef01e...What is rest on Android?<br />
Retrofit is a REST Client library (Helper Library) used in Android and Java to create an HTTP request and also to process the HTTP response from a REST API. ... We can also simply say that a RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data.Mar 19, 2017<br />
<br />
<a href="http://programmerguru.com/android-tutorial/android-restful-webservice-tutorial-part-1/">Android Restful Webservice Tutorial – Introduction to RESTful ...</a><br />
programmerguru.com/android-tutorial/android-restful-webservice-tutorial-part-1/<br />
May 1, 2014 - In this post, I will be discussing about creating and invoking RESTful webservice inAndroid applications. This tutorial will be ... RESTful Web services are designed with less dependence on proprietary middleware (for example, an application server) than the SOAP- and WSDL-based kind. As per the ...<br />
<br />
<div>
<a href="https://android.jlelse.eu/consuming-rest-api-using-retrofit-library-in-android-ed47aef01ecb">Consuming REST API using Retrofit Library in Android - AndroidPub</a><br />
https://android.jlelse.eu/consuming-rest-api-using-retrofit-library-in-android-ed47aef0...<br />
Mar 19, 2017 - Retrofit is a REST Client library (Helper Library) used in Android and Java to create an HTTP request and also to process the HTTP response from a REST API. It was created by Square, you can also use retrofit to receive data structures other than JSON, for example SimpleXML and Jackson.<br />
<br />
<br />
<a href="https://www.techrepublic.com/blog/software-engineer/calling-restful-services-from-your-android-app/">Calling RESTful services from your Android app - TechRepublic</a><br />
https://www.techrepublic.com/blog/.../calling-restful-services-from-your-android-app/<br />
Mar 20, 2012 - There are a number of documents available on the web explaining what constitutes aREST service and how to implement one. There are also a number of write-ups explaining how to consume REST services from a client. Yet a common request I see in Android forums is for examples of Java-based ...<br />
<br />
<a href="https://alvinalexander.com/android/android-asynctask-http-client-rest-example-tutorial">Source code for an Android AsyncTask (REST client) example ...</a><br />
https://alvinalexander.com/android/android-asynctask-http-client-rest-example-tutorial<br />
Mar 5, 2018 - This tutorial shares the complete source code for an Android AsyncTask and REST example. ... TextView; public class TestFragment extends Fragment { private static final String TAG = "AATestFragment"; // you'll want to call a REST service, but for basic network testing i use any url //private static final String ...<br />
<br />
<br />
<a href="https://dzone.com/articles/creating-a-simple-android-rest-client-using-http-r">Creating a Simple Android REST Client Using HTTP-RPC - DZone ...</a><br />
https://dzone.com/articles/creating-a-simple-android-rest-client-using-http-r<br />
Dec 29, 2016 - HTTP-RPC, an open-source framework for simplifying the development of RESTapplications, can be used to invoke services provided by JSONPlaceholder.<br />
<br />
<a href="https://developers.google.com/drive/v3/web/quickstart/android">https://developers.google.com/drive/v3/web/quickstart/android</a><br />
<h1 class="devsite-page-title" itemprop="name" style="box-sizing: inherit; color: #757575; font-family: roboto, sans-serif; font-size: 34px; font-stretch: normal; font-weight: 300; letter-spacing: -0.01em; line-height: 40px; margin: 0px 0px 20px; overflow: hidden; padding: 0px; position: relative; text-overflow: ellipsis; top: -4px;">
Android Quickstart</h1>
<div class="devsite-article-body clearfix
" itemprop="articleBody" style="box-sizing: inherit; color: #212121; font-family: roboto, sans-serif; font-size: 16px; margin: 0px; padding: 0px;">
<div style="box-sizing: inherit; margin-bottom: 16px; margin-top: 16px; padding: 0px;">
Complete the steps described in the rest of this page, and in about ten minutes you'll have a simple Android application that makes requests to the Drive API.</div>
</div>
<br />
<br />
Weather app uses REST<br />
<a href="https://code.tutsplus.com/tutorials/create-a-weather-app-on-android--cms-21587">https://code.tutsplus.com/tutorials/create-a-weather-app-on-android--cms-21587</a><br />
<br />
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
We can get the current weather details of any city formatted as JSON using the OpenWeatherMap API. In the query string, we pass the city's name and the metric system the results should be in.</div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
For example, to get the current weather information for Canberra, using the metric system, we send a request to <a href="http://api.openweathermap.org/data/2.5/weather?q=Canberra&units=metric" style="border: none; box-sizing: border-box; color: #0085b6; outline: none;">http://api.openweathermap.org/data/2.5/weather?q=Canberra&units=metric</a></div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
The response we get back from the API looks like this:</div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_619316" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 630px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none; border-collapse: collapse; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-size: 14px; font-stretch: normal; height: auto; left: auto; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 630px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
01</div>
<div class="line number2 index1 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
02</div>
<div class="line number3 index2 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
03</div>
<div class="line number4 index3 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
04</div>
<div class="line number5 index4 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
05</div>
<div class="line number6 index5 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
06</div>
<div class="line number7 index6 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
07</div>
<div class="line number8 index7 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
08</div>
<div class="line number9 index8 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
09</div>
<div class="line number10 index9 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
10</div>
<div class="line number11 index10 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
11</div>
<div class="line number12 index11 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
12</div>
<div class="line number13 index12 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
13</div>
<div class="line number14 index13 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
14</div>
<div class="line number15 index14 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
15</div>
<div class="line number16 index15 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
16</div>
<div class="line number17 index16 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
17</div>
<div class="line number18 index17 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
18</div>
<div class="line number19 index18 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
19</div>
<div class="line number20 index19 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
20</div>
<div class="line number21 index20 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
21</div>
<div class="line number22 index21 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
22</div>
<div class="line number23 index22 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
23</div>
<div class="line number24 index23 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
24</div>
<div class="line number25 index24 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
25</div>
<div class="line number26 index25 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
26</div>
<div class="line number27 index26 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
27</div>
<div class="line number28 index27 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
28</div>
<div class="line number29 index28 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
29</div>
<div class="line number30 index29 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
30</div>
<div class="line number31 index30 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
31</div>
<div class="line number32 index31 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
32</div>
<div class="line number33 index32 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
33</div>
<div class="line number34 index33 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
34</div>
<div class="line number35 index34 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
35</div>
<div class="line number36 index35 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
36</div>
<div class="line number37 index36 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
37</div>
<div class="line number38 index37 alt1" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
38</div>
<div class="line number39 index38 alt2" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-radius: 0px; border-right: 1px solid rgb(228, 228, 228); border-top-width: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
39</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 592px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">{</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"base"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"cmc stations"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">, </code></div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"clouds"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: {</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"all"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 90</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}, </code></div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"cod"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 200, </code></div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"coord"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: {</code></div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"lat"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: -35.28, </code></div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"lon"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 149.13</code></div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}, </code></div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"dt"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 1404390600, </code></div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"id"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 2172517, </code></div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"main"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: {</code></div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"humidity"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 100, </code></div>
<div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"pressure"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 1023, </code></div>
<div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"temp"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: -1, </code></div>
<div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"temp_max"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: -1, </code></div>
<div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"temp_min"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: -1</code></div>
<div class="line number19 index18 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}, </code></div>
<div class="line number20 index19 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"name"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"Canberra"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">, </code></div>
<div class="line number21 index20 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"sys"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: {</code></div>
<div class="line number22 index21 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"country"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"AU"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">, </code></div>
<div class="line number23 index22 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"message"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 0.313, </code></div>
<div class="line number24 index23 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"sunrise"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 1404335563, </code></div>
<div class="line number25 index24 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"sunset"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 1404370965</code></div>
<div class="line number26 index25 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}, </code></div>
<div class="line number27 index26 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"weather"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: [</code></div>
<div class="line number28 index27 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">{</code></div>
<div class="line number29 index28 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"description"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"overcast clouds"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">, </code></div>
<div class="line number30 index29 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"icon"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"04n"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">, </code></div>
<div class="line number31 index30 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"id"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 804, </code></div>
<div class="line number32 index31 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"main"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"Clouds"</code></div>
<div class="line number33 index32 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div>
<div class="line number34 index33 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">], </code></div>
<div class="line number35 index34 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"wind"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: {</code></div>
<div class="line number36 index35 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"deg"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 305.004, </code></div>
<div class="line number37 index36 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript string" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; color: blue; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">"speed"</code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">: 1.07</code></div>
<div class="line number38 index37 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"> </code><code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div>
<div class="line number39 index38 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; font-variant-east-asian: normal !important; font-variant-numeric: normal !important; height: auto !important; left: auto !important; line-height: normal !important; margin: 0px !important; min-height: auto !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-sizing: content-box; float: none; font-stretch: normal; height: auto; left: auto; line-height: normal; margin: 0px; min-height: auto; outline: 0px; overflow: visible; padding: 5px 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">}</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
Create a new Java class and name it <b style="box-sizing: border-box;">RemoteFetch.java</b>. This class is responsible for fetching the weather data from the OpenWeatherMap API.</div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
We use the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">HttpURLConnection</code> class to make the remote request. The OpenWeatherMap API expects the API key in an HTTP header named <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">x-api-key</code>. This is specified in our request using the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">setRequestProperty</code> method.</div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
We use a <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">BufferedReader</code> to read the API's response into a <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">StringBuffer</code>. When we have the complete response, we convert it to a <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">JSONObject</code> object.</div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
As you can see in the above response, the JSON data contains a field named <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">cod</code>. Its value is <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: "Source Code Pro", Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">200</code> if the request was successful. We use this value to check whether the JSON response has the current weather information or not.</div>
<div style="background-color: #fefefe; box-sizing: border-box; color: #3a3a3a; font-family: roboto, arial, sans-serif; font-size: 18px; margin-bottom: 26px;">
<br /></div>
<div class="topic" style="background-color: white; border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #505050; font-family: roboto, sans-serif; font-size: 14px; margin-bottom: 40px; margin-top: -20px;">
<div class="container" style="box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 1000px !important;">
<div class="row" style="box-sizing: border-box; margin-left: -15px; margin-right: -15px;">
<div class="col-sm-7" style="box-sizing: border-box; float: left; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; width: 583.333px;">
<h1 class="breadcrumb-title" style="box-sizing: border-box; color: inherit; display: inline-block; font-size: 30px; font-weight: 500; line-height: 1.1; margin: 0px; padding-bottom: 15px; padding-top: 15px;">
Weather API</h1>
</div>
<div class="col-sm-5" style="box-sizing: border-box; float: left; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; width: 416.667px;">
<ol class="breadcrumb pull-right hidden-xs" style="background: transparent; border-radius: 4px; box-sizing: border-box; color: #333333; display: flex; float: right; font-family: "open sans", arial, sans-serif; font-stretch: normal; line-height: 1.42; list-style: none; margin: 0px; padding: 25px 0px;">
<li style="box-sizing: border-box; display: inline-block; vertical-align: top; white-space: nowrap;"><a href="https://openweathermap.org/" style="background: 0px 0px; box-sizing: border-box; color: #d26c22;">Home</a></li>
<li class="breadcrumb__leaf" style="box-sizing: border-box; color: #999999; display: inline-block; max-width: 250px; overflow-x: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap;">Weather API</li>
</ol>
</div>
</div>
</div>
</div>
<div class="container" style="background-color: white; box-sizing: border-box; color: #505050; font-family: roboto, sans-serif; font-size: 14px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 1000px;">
<div class="row" style="box-sizing: border-box; margin-left: -15px; margin-right: -15px;">
<div class="col-sm-12" style="box-sizing: border-box; float: left; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; width: 1000px;">
<div class="lead" style="box-sizing: border-box; font-size: 21px; line-height: 1.4; margin-bottom: 20px;">
Our weather API is simple, clear and free. We also offer higher levels of support, please see our <a href="https://openweathermap.org/price" style="background: 0px 0px; box-sizing: border-box; color: #d26c22;">paid plan options.</a> To access the API you need to sign up for an <a href="http://openweathermap.org/appid" style="background: 0px 0px; box-sizing: border-box; color: #d26c22;">API key</a> if you are on a free or paid plan.</div>
</div>
</div>
<div class="row" style="box-sizing: border-box; margin-left: -15px; margin-right: -15px;">
<div class="col-sm-4" style="box-sizing: border-box; float: left; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; width: 333.333px;">
<h3 style="box-sizing: border-box; color: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;">
Current weather data</h3>
<a class="btn btn-default btn-xs" href="https://openweathermap.org/current" style="background-image: none; background-position: 0px 0px; border-radius: 3px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #d26c22; cursor: pointer; display: inline-block; font-size: 12px; line-height: 1.5; margin-bottom: 0px; padding: 1px 5px; text-align: center; vertical-align: middle; white-space: nowrap;" type="button">API doc</a> <a class="btn btn-orange btn-xs" href="https://openweathermap.org/price" style="background: none 0px 0px rgb(210, 108, 34); border-radius: 3px; border: 1px solid rgb(193, 99, 31); box-sizing: border-box; color: #d26c22; cursor: pointer; display: inline-block; font-size: 12px; line-height: 1.5; margin-bottom: 0px; padding: 1px 5px; text-align: center; transition: 0.3s, 0.3s; vertical-align: middle; white-space: nowrap;" type="button">Subscribe</a><br />
<div style="box-sizing: border-box; margin-bottom: 10px;">
</div>
<ul style="box-sizing: border-box; margin-bottom: 10px; margin-top: 0px;">
<li style="box-sizing: border-box;">Access current weather data for any location including over 200,000 cities</li>
<li style="box-sizing: border-box;">Current weather is frequently updated based on global models and data from more than 40,000 weather stations</li>
<li style="box-sizing: border-box;">Data is available in JSON, XML, or HTML format</li>
<li style="box-sizing: border-box;">Available for Free and all other paid accounts</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-73128379140111013522017-07-12T13:50:00.002-07:002017-07-12T13:50:13.054-07:00Angular ASP.NET MVC with WebAPI<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part">https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part</a><br />
<br /></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-83264262856086044592017-06-13T15:48:00.002-07:002017-06-13T15:48:44.069-07:00Angular 2 with ASP.NET MVC WebApi<div dir="ltr" style="text-align: left;" trbidi="on">
https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-54213394066926846822017-05-09T10:22:00.002-07:002017-05-09T10:22:54.040-07:00WinSock2 for Games<div dir="ltr" style="text-align: left;" trbidi="on">
Rock Paper Scissors Game Project:<br />
https://www.gamedev.net/resources/_/technical/multiplayer-and-network-programming/winsock2-for-games-r1059</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-13948907016657130042017-05-03T10:00:00.001-07:002017-05-03T10:06:02.563-07:00Naushad Microsoft ASP.NET MVC Angular Training as Professional<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Naushad Visual Studio .NET MVC Angular Training as Professional<br />
<br />
Other series<br />
<a href="https://www.youtube.com/watch?v=E7Voso411Vs">Step-by-step ASP.NET MVC Tutorial for Beginners</a> mosh udemy<br />
<a href="https://www.youtube.com/watch?v=zWFoZb6EiwU">Learn ASP NET MVC 5 Complete Tutorial 2016 COMPLETE</a> Hershey computing Nearly 4 hours<br />
<a class=" g-hovercard yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" data-ytid="UCrAmSSnW0ybHeW9yoXbSnFw" href="https://www.youtube.com/user/geelovejapan" style="background: rgb(255, 255, 255); border: 0px; color: #167ac6; cursor: pointer; font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px; text-decoration-line: none;"><span class="video-thumb comment-author-thumbnail yt-thumb yt-thumb-48" style="background: rgb(241, 241, 241); border: 0px; display: inline-block; float: left; font-size: 0px; margin: 0px 10px 0px 0px; overflow: hidden; padding: 0px; position: relative; vertical-align: middle; width: 48px;"><span class="yt-thumb-square" style="background: transparent; border: 0px; display: block; height: auto; margin: 0px; padding: 0px 0px 48px;"><span class="yt-thumb-clip" style="background: transparent; border: 0px; bottom: -100px; left: -100px; margin: 0px; padding: 0px; position: absolute; right: -100px; text-align: center; top: -100px; white-space: nowrap; word-break: normal;"><br class="Apple-interchange-newline" /><img alt="geelovejapan" data-ytimg="1" height="48" role="img" src="https://yt3.ggpht.com/-2qEqxpa7LSA/AAAAAAAAAAI/AAAAAAAAAAA/DyeXRhsXrKI/s48-c-k-no-mo-rj-c0xffffff/photo.jpg" style="background: transparent; border: 0px; display: inline-block; font-size: 13px; margin: 0px; outline: none; padding: 0px; vertical-align: middle;" tabindex="0" width="48" /> <span class="vertical-align" style="background: transparent; border: 0px; display: inline-block; height: 248px; margin: 0px; padding: 0px; vertical-align: middle;"></span></span></span></span></a><span style="background-color: white; font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 13px;"></span><br />
<div class="comment-simplebox-edit" data-editable-content-text="" data-image-src="" data-video-id="" id="comment-renderer-edit-z12evj4z3o2rclfmh23tt5ebzlucfpp5m04" style="background: rgb(255, 255, 255); border: 0px; font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px;">
</div>
<div class="comment-renderer-content" style="background: rgb(255, 255, 255); border: 0px; font-family: "YouTube Noto", Roboto, arial, sans-serif; font-size: 13px; margin: 0px; min-height: 48px; overflow: hidden; padding: 0px;">
<div class="comment-renderer-header" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<a class="comment-author-text g-hovercard yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" data-ytid="UCrAmSSnW0ybHeW9yoXbSnFw" href="https://www.youtube.com/user/geelovejapan" style="background: transparent; border: 0px; color: #128ee9; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none; word-break: break-all;">geelovejapan</a><span class="comment-renderer-time" style="background: transparent; border: 0px; color: #767676; font-size: 11px; margin: 0px 0px 0px 6px; padding: 0px;" tabindex="0"><a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&lc=z12evj4z3o2rclfmh23tt5ebzlucfpp5m04" style="background: transparent; border: 0px; color: #767676; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">11 months ago (edited)</a></span></div>
<div class="comment-renderer-text" role="article" style="background: transparent; border: 0px; margin: 3px 0px 8px; padding: 0px;" tabindex="0">
<div class="comment-renderer-text-content expanded" style="background: transparent; border: 0px; margin: 0px 0px 8px; max-height: none; overflow: hidden; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=1s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">00:01</a> - The MVC Mindset
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=276s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">04:36</a> - Requests Handled by Actions
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=712s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">11:52</a> - ASP . NET Routing
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=1116s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">18:36</a> - Action Result Types
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=1333s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">22:13</a> - Action Selectors
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=1660s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">27:40</a> - Filters
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=2040s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">34:00</a> - Razor Syntax
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=2324s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">38:44</a> - Layouts
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=2580s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">43:00</a> - HTML Helpers
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=2938s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">48:58</a> - Building and Minification
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=3384s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">56:24</a> - Responsive Design with BootStrap
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=3802s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:03:22</a> - Models in Actions and Views
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=4114s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:08:34</a> - Display and Validating Model Properties
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=4492s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:14:52</a> - View Models
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=4759s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:19:19</a> - Database Objects and Entity Framework
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=5086s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:24:46</a> - Entity Framework Code First Migrations
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=5584s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:33:04</a> - Challenge: Adding Transactions
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=5668s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:34:28</a> - Challenge: Solution
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=6124s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:42:04</a> - OWIN and Katana
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=6393s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:46:33</a> - Local Authentication
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=6631s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:50:31</a> - Facebook Login
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=6987s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">1:56:27</a> - ASP . NET Identity and the User Manager
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=7322s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:02:02</a> - Role-Based Authorization
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=7551s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:05:51</a> - Roles and Assignments
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=7850s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:10:50</a> - Unit Testing
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=8117s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:15:17</a> - Unit Tests
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=8431s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:20:31</a> - Mocking Dependencies
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=8795s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:26:35</a> - Test-Driven Development
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=9189s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:33:09</a> - Partial Page Updates with Unobtrusive Ajax
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=9503s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:38:23</a> - Partial Page Updates With jQuery Ajax
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=9738s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:42:18</a> - Model Binding with Knockout
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=10131s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:48:51</a> - Paged Grid with Knockout (skipta niðurstöðum í bls)
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=10650s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">2:57:30</a> - Deploying to Azure Web Sites
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=10990s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">3:03:10</a> - Deploying to AppHarbor
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=11517s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">3:11:57</a> - Deploying Without Automatic Migrations
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=11836s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">3:17:16</a> - Web.config Transformations
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=12264s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">3:24:24</a> - Challenge: Implementing Transfers
<a class="yt-uix-sessionlink spf-link " data-sessionlink="itct=CPIBELZ1IhMI6e7Tl5nU0wIVRDdOCh2xBwQX" href="https://www.youtube.com/watch?v=zWFoZb6EiwU&t=12503s" style="background: transparent; border: 0px; color: #167ac6; cursor: pointer; margin: 0px; padding: 0px; text-decoration-line: none;">3:28:23</a> - Challenge: Solution</div>
</div>
</div>
<br />
<br />
<br /></div>
MVC Training Part 1 What is MVC? and Defference between Asp.Net webForm and Asp.Net MVC
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/ztzTRttDvZM" width="560"></iframe><br />
<br />
MVC Training Part 2 My First HelloWorld Application In Asp.Net MVC
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/9ratmq_QSbc" width="560"></iframe>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-22442321589805070732017-05-02T13:18:00.002-07:002017-05-08T09:30:08.222-07:00Mosaic Software Cambridge MA Chartman, Integrated-7, and The Twin 1-2-3-alike<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Mosaic Software Cambridge MA Chartman, Integrated-7, and The Twin 1-2-3-alike</b><br />
<b><br /></b>
<b><br /></b>
<br />
<div style="text-align: left;">
I'm Arthur Hu and for me the good old days were in the 80s from 1983-1989 when I stumbled on this company peddling a device independent graphics package for MS-BASIC for no money then got offered a salary if I could write a spreadsheet program for the PC like Lotus 1-2-3 or Microsoft Multiplan. </div>
<div style="text-align: left;">
<br /></div>
According to wikipedia, I was actually the 2nd Bexley alumni (MIT '80, graduates with 2 degrees in 1981) to do a spreadsheet as the original Visicalc was done by <a href="https://en.wikipedia.org/wiki/Daniel_S._Bricklin">Dan Bricklin</a>, which in turn was reworked into Lotus 1-2-3 much like a spin-off before the Visi-On debacle. Bexley hall legendary as center of counterculture on campus since the 1960s and 70s and even into the 2010s until it was demolished allegedly due to water structural damage and is now the site of a park which does not bear a memorial.<br />
<br />
After the success of 1-2-3, the industry was abuzz with the idea of who would be first to create an integrated software package that did everything. Lotus eventually came up with Symphony. Mosaic had started with the BASIC based Chartman and the idea was to use C to make an integrated package. The result was Integrated-7 which was a spreadsheet with a very basic word processor and database, and the spreadsheet which was based mostly on 1-2-3 with its own file format was adapted to use the published 1-2-3 file format and became The Twin which was one of the first successful PC programs written in C using data abstraction which was taught at MIT in the late 1970s using PL/I before CLU was created.<br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
At the time it was common practice to create programs that emulated other programs at a byte for byte compatibility level as long as you did not actually copy source code, which we didn't do. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The Intel 8086/8088 was the original x86 processor which got around the 16 bit 64k addressing barrier which frequent afflicted minicomputers by adding a 4 bit segment hack which extended addressing to 1 million bytes or 1M memory which was fine for about 4 years. Lotus 1-2-3 which was written in 16 bit assembler with 16 bit pointers which was the most efficient way to to processing. Using Lattice C meant code would be bigger and worse, to simplify things we used Lattice C 32 bit LONG pointer, but it wasn't bad as it was about twice as big and half as fast but usually memory got twice as big and twice as fast if you just waited for next year's PC. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The hardest trick in matching was how they got lightning fast screen repaints because sprintf took FOREVER to paint a screen full of floating point numbers. If you broke down the process manually, the bottleneck was floating point multiply by 10.0 to convert a number into a long decimal integer. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The hack I figured out was to take the fraction and exponent out of the IEEE floating point to get a binary number, then use a shift and add (mult by 2 and add 1) to multiply by five and shift again which gives you ten, and then stick it back into the fraction and exponent add or subtract an exponent or two, and we got times similar to 1-2-3. This could all be done in C. The only assembler was to do the rpn push and pop for expression evaluation of tokens, and later to interface to Intel </div>
<div style="text-align: left;">
<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4057" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<span id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4058">Franklin Hu</span></div>
</div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4061" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<br /></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4061" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<span id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4060">I was so inspired by your story, that I recovered i7 from my ancient 701C butterfly laptop and created an Integrated 7 museum. Find it at:</span></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4023" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<br /></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4022" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<span id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4021"><a data-saferedirecturl="https://www.google.com/url?hl=en&q=http://franklinhu.com/i7museum.html&source=gmail&ust=1494347031366000&usg=AFQjCNGzFu2OsjyY6xE2Aj9ApOMiv9x8tQ" href="http://franklinhu.com/i7museum.html" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4020" style="color: #1155cc;" target="_blank">http://franklinhu.com/<wbr></wbr>i7museum.html</a></span></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4019" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<br /></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4016" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<span id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4015">Send us a picture with your retro system running i7, I can add it to the museum.</span></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4014" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<br /></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4017" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<span id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4059">Enjoy!</span></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4017" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<br /></div>
<div dir="ltr" id="m_1764041662193950549yui_3_16_0_ym19_1_1494172695806_4017" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<h1 style="font-family: "Times New Roman";">
<span style="font-family: "arial" , "helvetica" , sans-serif;">Welcome to the Integrated 7 (i7) Museum</span></h1>
<div style="font-family: "Times New Roman"; font-size: medium;">
Integrated 7 was a multipurpose spreadsheet/wordprocessing/database/communication, etc. etc. program that included many of (seven of them) the most commonly needed applications on a personal computer.</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
<img alt="" src="https://franklinhu.com/i7title.jpg" style="height: 385px; width: 636px;" /></div>
<div style="font-family: "Times New Roman"; font-size: medium;">
This program also contained the very first implementation of the Helvetica font which can be accessed by specifying Font =3 in the Graph Options menu.</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
<img alt="" src="https://franklinhu.com/helvetica.jpg" style="height: 323px; width: 708px;" /></div>
<div style="font-family: "Times New Roman"; font-size: medium;">
This program was created in 1988 and I consider it abandonware. If anyone has any objections I will remove it, but for now, get it here.</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
<a href="http://franklinhu.com/i7.zip">Download i7</a></div>
<div style="font-family: "Times New Roman"; font-size: medium;">
This is a zip file, just unzip it to a directory like c:\i7</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
This can be run in a modern operating system if you use DosBox</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
<a href="https://sourceforge.net/projects/dosbox/files/dosbox/0.74/DOSBox0.74-win32-installer.exe/download">https://sourceforge.net/projects/dosbox/files/dosbox/0.74/DOSBox0.74-win32-installer.exe/download</a></div>
<div style="font-family: "Times New Roman"; font-size: medium;">
After you start it, you can use the command</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
mount x: c:/i7</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
This will mount the x drive to where you unzipped i7.</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
Then just switch to the x: drive and run i7:</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
x:</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
i7</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
I have verified that if you change the configuration file (Use the menu to access Options/DosBox .74 Options)</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
machine = hercules</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
Then start i7 with the i7h.bat file, you can run it in high resolution black/white Hercules graphics card mode, so you can see that nice Helvetica font in all its glory.</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
-Thanks for dropping by, enjoy</div>
<div style="font-family: "Times New Roman"; font-size: medium;">
<br /></div>
<div style="font-family: "Times New Roman"; font-size: medium;">
<br /></div>
</div>
<div dir="ltr" style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px;">
<br /></div>
</div>
<div style="text-align: left;">
I got this letter from my brother Franklin who was also there:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<blockquote style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;" type="cite">
<b>my e-mail is arthur no-space 98021 at gmail<br class="Apple-interchange-newline" />From:</b> Elmer Robinson <a href="mailto:elmerrobinson@yahoo.com" style="color: #1155cc;" target="_blank">elmerrobinson at yahoo</a><br />
<b>Date:</b> May 1, 2017 at 5:35:12 PM PDT<br />
<b>To:</b> "<a href="mailto:franklinhu@yahoo.com" style="color: #1155cc;" target="_blank">franklinhu at yahoo</a> </blockquote>
<blockquote style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;" type="cite">
<b>Subject:</b> <b>The Twin and Integrated 7</b></blockquote>
<blockquote style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;" type="cite">
<div style="font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 16px;">
<div id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2874">
Mr. Hu,</div>
<div id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2875">
<br /></div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2876">
I apologize for reaching out to you uninvited like this. I came across your resume while I was searching for the Twin and Integrated 7.</div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2877">
<br /></div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2878">
I am a 30+ year computer network engineer and security consultant, and my career in computers was launched in part because of my time with these two applications. The first computer I bought in 1986 I purchased with two 5 1/4" floppy drives and a copy of The Twin. What I could do with that program on that old machine was simply magic to me, and made me fall in love with computers. I had an experience where I found a bug in the Twin while I was working with it, called Mosaic's help line, spoke with someone who knew exactly what I was talking about and sent me out an update disk right away. From that point on I was hooked.</div>
<div id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2879">
</div>
<div id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2880">
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_2921">
I'm reaching out to you because I've been bitten by the nostalgia bug, and I've been trying my best to re-create my first computer system. The only physical thing I need to find at this point are copies of The Twin, and Integrated 7. I have found internet archives with running copies of the Twin, but nothing is out there for I7. After years of searching I found an incomplete set of I7 disks and manuals, but the Library, Terminal and Help disks are missing preventing an full install.</div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_3022">
<br /></div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_3124">
So this is a wild, crazy shot in the dark to see if you have any idea where I could find copies of these programs that I love so much?</div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_3189">
<br /></div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_3199">
If nothing else, I wanted to tell you how much your work meant to me personally, and to thank you for your part in that.</div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_3208">
<br /></div>
<div dir="ltr" id="m_-8607094169040659877yui_3_16_0_ym19_1_1493684095442_3209">
Sincerely,</div>
<div dir="ltr">
Elmer Robinson</div>
</div>
</div>
</blockquote>
<br />
<br />
<div class="qQVYZb" style="background-color: white; color: #222222; font-family: arial, sans-serif;">
</div>
<div class="utdU2e" style="background-color: white; color: #222222; font-family: arial, sans-serif;">
</div>
<div class="tx78Ic" style="background-color: white; color: #222222; font-family: arial, sans-serif;">
</div>
<div class="aHl" style="background-color: white; color: #222222; font-family: arial, sans-serif; margin-left: -30px;">
</div>
<div id=":16c" style="background-color: white; color: #222222; font-family: arial, sans-serif;" tabindex="-1">
</div>
<div class="ii gt adP adO" id=":1e7" style="background-color: white; color: #222222; direction: ltr; font-family: arial, sans-serif; font-size: 12.8px; margin: 5px 15px 0px 0px; padding-bottom: 5px; position: relative;">
<div class="a3s aXjCH m15bcc30a62e34cb1" id=":1e3" style="overflow: hidden;">
<div style="color: black; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 16px;">
<div id="m_6505091990157591001yui_3_16_0_ym19_1_1493776681002_3522">
It's really a pleasure to meet you both. I always thought the Twin was a great product that was better and cheaper than 123. It's too bad Lotus decided to sue the competition, rather than innovate and improve their product like they should have done. Especially since they just copied VisiCalc.</div>
<div id="m_6505091990157591001yui_3_16_0_ym19_1_1493776681002_3521">
<br /></div>
<div id="m_6505091990157591001yui_3_16_0_ym19_1_1493776681002_3520">
As I mentioned, I consider it the program that got me hooked on computers and I have a real soft spot for it.</div>
<div id="m_6505091990157591001yui_3_16_0_ym19_1_1493776681002_3475">
<br /></div>
</div>
</div>
</div>
<span style="background-color: white; font-family: "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px;">I appreciate you keeping me in mind if you find something Twin or I7 related that you could part with. I'd be happy to pay what you think it's worth.</span> </div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-76013827420962375282017-04-26T21:03:00.002-07:002017-04-26T21:04:29.734-07:00Microsoft: ASP.NET Core tutorials<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/index">https://docs.microsoft.com/en-us/aspnet/core/tutorials/index</a><br />
<br />
<h1 id="aspnet-core-tutorials" sourceendlinenumber="14" sourcefile="tutorials/index.md" sourcestartlinenumber="14" style="background-color: white; color: #222222; font-family: segoe-ui_light, "Segoe UI Light", "Segoe WP", "Helvetica Neue", Helvetica, sans-serif; font-size: 2.5rem; font-weight: 300; line-height: 1.3; margin: 10px 0px 0px; text-rendering: optimizeLegibility; word-wrap: break-word;">
ASP.NET Core tutorials</h1>
<div class="metadata" ms.cmpgrp="page info" style="background-color: white; color: #6e6e6e; font-family: segoe-ui_normal, "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", Helvetica, sans-serif; font-size: 0.875rem; overflow: hidden;">
<time class="date" datetime="10/14/2016 12:00:00 AM">2016-10-14</time> <span class="reading-time">1 min to read</span> <span class="contributors-text" style="margin-right: 5px;">Contributors</span><br />
<ul class="contributors" ms.cmpgrp="contributors" style="display: inline-block; list-style: none; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="display: inline-block; list-style: disc outside none; margin: 0px; padding: 0px; vertical-align: top;"><a href="https://github.com/tdykstra" ms.cmpnm="contributorprofile" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;" title="Tom Dykstra"><img alt="Tom Dykstra" src="https://github.com/tdykstra.png?size=16" style="border-radius: 100%; border: 0px; display: inline-block; height: 16px; margin-top: 5px; max-width: 100%; width: 16px;" /></a></li>
<li style="display: inline-block; list-style: disc outside none; margin: 0px; padding: 0px; vertical-align: top;"><a href="https://github.com/Rick-Anderson" ms.cmpnm="contributorprofile" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;" title="Rick Anderson"><img alt="Rick Anderson" src="https://github.com/Rick-Anderson.png?size=16" style="border-radius: 100%; border: 0px; display: inline-block; height: 16px; margin-top: 5px; max-width: 100%; width: 16px;" /></a></li>
<li style="display: inline-block; list-style: disc outside none; margin: 0px; padding: 0px; vertical-align: top;"><a href="https://github.com/v-anpasi" ms.cmpnm="contributorprofile" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;" title="Andy Pasic"><img alt="Andy Pasic" src="https://github.com/v-anpasi.png?size=16" style="border-radius: 100%; border: 0px; display: inline-block; height: 16px; margin-top: 5px; max-width: 100%; width: 16px;" /></a></li>
<li style="display: inline-block; list-style: disc outside none; margin: 0px; padding: 0px; vertical-align: top;"><a href="https://github.com/danroth27" ms.cmpnm="contributorprofile" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;" title="danroth27"><img alt="danroth27" src="https://github.com/danroth27.png?size=16" style="border-radius: 100%; border: 0px; display: inline-block; height: 16px; margin-top: 5px; max-width: 100%; width: 16px;" /></a></li>
</ul>
</div>
<div style="background-color: white; color: #222222; font-family: segoe-ui_normal, "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px;">
<div class="content">
<div class="lf-text-block lf-block" data-lf-anchor-id="8554c88d24d90011b615284226ad412b:0" style="margin-top: 1rem; padding-right: 25px !important; position: relative !important;">
The following step-by-step guides for developing ASP.NET Core applications are available:<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<h2 id="building-web-applications" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Building web applications</h2>
<ul class="lf-text-block lf-block" data-lf-anchor-id="8548e1cbf4c138e5a37127dcf0144e21:0" style="margin: 16px 0px 16px 38px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app-xplat/index" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Introduction to ASP.NET Core MVC on Mac or Linux</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/index" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Introduction to ASP.NET Core MVC with Visual Studio</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/index" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Getting started with ASP.NET Core and Entity Framework Core using Visual Studio</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/your-first-mac-aspnet" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Your first ASP.NET Core application on a Mac or Linux using Visual Studio Code</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/client-side/yeoman" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Building projects with Yeoman</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Authoring Tag Helpers</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components#walkthrough-creating-a-simple-view-component" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Creating a simple view component</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Developing ASP.NET Core applications using dotnet watch</a></li>
<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></ul>
<h2 id="building-web-apis" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Building web APIs</h2>
<ul class="lf-text-block lf-block" data-lf-anchor-id="856d29ccd301087aa7d1350070040c88:0" style="margin: 16px 0px 16px 38px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Building your first web API with ASP.NET Core MVC and Visual Studio</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/web-api-vsc" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Create a Web API app on Mac or Linux with Visual Studio Code</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/web-api-help-pages-using-swagger" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">ASP.NET Web API Help Pages using Swagger</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/mobile/native-mobile-backend" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Creating backend web services for native mobile applications</a></li>
<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></ul>
<h2 id="working-with-data" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Working with data</h2>
<ul class="lf-text-block lf-block" data-lf-anchor-id="b7eac8d9dcc1f905e3356740f6154e25:0" style="margin: 16px 0px 16px 38px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/index" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Getting started with ASP.NET Core and Entity Framework Core using Visual Studio</a></li>
<li style="list-style: disc outside none;"><a data-linktype="external" href="https://docs.microsoft.com/ef/core/get-started/aspnetcore/new-db" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">ASP.NET Core with EF Core - new database</a></li>
<li style="list-style: disc outside none;"><a data-linktype="external" href="https://docs.microsoft.com/ef/core/get-started/aspnetcore/existing-db" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">ASP.NET Core with EF Core - existing database</a></li>
<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></ul>
<h2 id="authentication-and-authorization" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Authentication and authorization</h2>
<ul class="lf-text-block lf-block" data-lf-anchor-id="6aefd2f3506bede93f8f6d068c865fa9:0" style="margin: 16px 0px 16px 38px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/social/index" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Enabling authentication using Facebook, Google and other external providers</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/accconfirm" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Account Confirmation and Password Recovery</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/2fa" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Two-factor authentication with SMS</a></li>
<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></ul>
<h2 id="client-side-development" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Client-side development</h2>
<ul class="lf-text-block lf-block" data-lf-anchor-id="2ae4cb9020c18a999164cf2626f54fa7:0" style="margin: 16px 0px 16px 38px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Using Gulp</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/client-side/using-grunt" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Using Grunt</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/client-side/bower" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Manage client-side packages with Bower</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/client-side/bootstrap" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Building beautiful, responsive sites with Bootstrap</a></li>
<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></ul>
<h2 id="testing" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Testing</h2>
<ul class="lf-text-block lf-block" data-lf-anchor-id="008ebbc9502819e5c25e664316011547:0" style="margin: 16px 0px 16px 38px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="list-style: disc outside none;"><a data-linktype="external" href="https://docs.microsoft.com/dotnet/articles/core/testing/unit-testing-with-dotnet-test" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Unit Testing in .NET Core using dotnet test</a></li>
<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></ul>
<h2 id="publishing-and-deployment" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Publishing and deployment</h2>
<ul class="lf-text-block lf-block" data-lf-anchor-id="04b5e1c8d4813931e3314dc25d4544e1:0" style="margin: 16px 0px 16px 38px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/publish-to-azure-webapp-using-vs" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Deploy an ASP.NET Core web app to Azure using Visual Studio</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/publishing/azure-continuous-deployment" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Publishing to an Azure Web App with Continuous Deployment</a></li>
<li style="list-style: disc outside none;"><a data-linktype="external" href="https://docs.microsoft.com/azure/vs-azure-tools-docker-hosting-web-apps-in-docker" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Deploy an ASP.NET container to a remote Docker host</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/publishing/vsts-continuous-deployment" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">Use VSTS to Build and Publish to an Azure Web App with Continuous Deployment</a></li>
<li style="list-style: disc outside none;"><a data-linktype="relative-path" href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/nano-server" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">ASP.NET Core on Nano Server</a></li>
<li style="list-style: disc outside none;"><a data-linktype="external" href="https://docs.microsoft.com/en-us/azure/service-fabric/service-fabric-add-a-web-frontend" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #0050c5; cursor: pointer; text-decoration-line: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform; word-wrap: break-word;">ASP.NET Core and Azure Service Fabric</a></li>
</ul>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-80314089382913705532017-04-26T21:01:00.000-07:002017-04-26T21:01:00.807-07:00Master Chef (Part 4) ASP.NET Core MVC and Angular 2 Implement CRUD Single Page Application<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 id="ctl00_ArticleTitle" style="background-color: white; color: #333333; font-family: "Segoe UI", Arial, sans-serif; font-size: 29px; font-weight: 200; line-height: normal; margin: 0px 0px 15px; padding: 0px;">
Master Chef (Part 4) ASP.NET Core MVC and Angular 2 Implement CRUD Single Page Application</h1>
<div>
<a href="https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib">https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib</a></div>
<div>
<div class="header" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px;">
<div class="title" style="border: 0px; color: grey; margin: 0px; padding: 0px;">
<h1 id="ctl00_ArticleTitle" style="color: #333333; font-size: 29px; font-weight: 200; line-height: normal; margin: 0px 0px 15px; padding: 0px;">
Master Chef (Part 1) ASP.NET Core MVC with Fluent NHibernate and AngularJS</h1>
</div>
<div style="border: 0px; height: 34px; margin: 0px; padding: 0px;">
<div class="entry float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<img class="float-left avatar" id="ctl00_avatar" src="https://www.codeproject.com/script/Membership/ProfileImages/%7Bb8ee00ef-fa42-4848-9ece-a6dc09686f39%7D.jpg" style="border: 0px; float: left; margin: 0px 10px 0px 0px; max-height: 48px; max-width: 48px; overflow: auto; padding: 0px;" /><div class="float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<span class="author" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/script/Membership/View.aspx?mid=3827043" rel="author" style="border: 0px; color: grey; margin: 0px; padding: 0px; text-decoration-line: none;">Fred Song (Melbourne)</a></span>, <span class="date" style="border: 0px; margin: 0px; padding: 0px;" title="Date last updated">21 Sep 2016</span> <a class="license" href="http://www.codeproject.com/info/cpol10.aspx" id="ctl00_LicenseLink" style="background-color: #eeeeee; border: 1px solid rgb(204, 204, 204); color: purple; font-family: "courier new", serif; margin: 0px 0px 0px 20px; padding: 0px 4px; text-decoration-line: none;" title="The Code Project Open License (CPOL)">CPOL</a><div class="tooltip anchorLink" id="ctl00_CurRat" name="CurRat_1130939" style="border: 0px; cursor: pointer; margin: 5px 0px 0px; padding: 0px; position: relative;">
<table cellpadding="0" cellspacing="0" class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="nowrap" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span id="ctl00_ArticleRating_VI" style="border: 0px; margin: 0px; padding: 0px;"><div class="nowrap rating-stars-medium" style="border-radius: 5px; border: 0px; height: 18px; margin: 0px; padding: 2px; position: relative; width: 80px;">
<div class="clipped align-left float-left" style="border: 0px; float: left; height: 16px; margin: 0px; overflow: hidden; padding: 0px; width: 80px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-fill-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px;" /></div>
<div class="clipped" style="border: 0px; height: 16px; margin: 0px; overflow: hidden; padding: 0px; position: relative; width: 0px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-empty-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px; position: absolute; right: 0px; top: 0px;" /></div>
</div>
</span></td><td class="nowrap" id="ctl00_ArticleRating_VR" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"> <span id="ctl00_ArticleRating_VotesR" style="border: 0px; margin: 0px; padding: 0px;"> 5.00 (17 votes)</span></td></tr>
</tbody></table>
</div>
</div>
</div>
<div class="float-right align-right voting-bar" id="ctl00_RateArticleRow" style="border: 0px; float: right; margin: -8px 0px 0px; padding: 0px; text-align: right !important;">
<div class="small-text" id="ctl00_RateArticle_RateItemWrapper" name="RateItem_1130939" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;">
<table cellpadding="0" cellspacing="0" class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px; width: 100%px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-result align-right" id="ctl00_RateArticle_VoteResultDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 7px 0px 0px; text-align: right !important;"><span class="align-right" style="border: 0px; margin: 0px; padding: 0px;"></span></td><td align="right" class="voteTbl" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><table class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-prompt" id="ctl00_RateArticle_RateText" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 5px 0px 0px; white-space: nowrap;">Rate this:</td><td class="nowrap rating-stars-voter-large" id="ctl00_RateArticle_VoteFormDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span class="tooltip ajaxHist radio voting" id="ctl00_RateArticle_RB" style="border: 0px; margin: 0px; padding: 0px; position: relative;"><span id="ctl00_RateArticle_VoteRBL" style="border: 0px; margin: 0px; padding: 0px;"></span><div class="rating-star-block" style="border: 0px; margin: 0px; padding: 2px;">
<a class="star outline" href="https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib#" rating="1" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 1">vote 1</a><a class="star outline" href="https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib#" rating="2" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 2">vote 2</a><a class="star outline" href="https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib#" rating="3" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 3">vote 3</a><a class="star outline" href="https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib#" rating="4" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 4">vote 4</a><a class="star outline" href="https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib#" rating="5" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 5">vote 5</a></div>
</span></td><td style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 0px 0px 5px;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div class="hover-container" style="border: 0px; margin: 0px; padding: 0px; position: relative;">
</div>
</div>
</div>
</div>
<div class="summary" id="ctl00_description" style="border: 0px; color: grey; margin: 0px; padding: 30px 0px 0px;">
In this article, I want to show how to build a Single Page Application – MasterChef with ASP.NET Core MVC, Fluent Hibernate, and Angular JS.</div>
<span class="date" content="https://www.codeproject.com/KB/aspnet/1130939/Thumb-1130939.png" id="ctl00_thumbnailUrl" style="border: 0px; margin: 0px; padding: 0px;"></span></div>
<div class="text" id="contentdiv" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 10px 0px 0px;">
<ul class="download" style="border: 0px; margin: 25px 0px 10px; padding: 0px 0px 0px 40px;">
<li style="background: url("/images/download24.png") left center no-repeat scroll transparent; border: 0px; font-weight: bold; line-height: normal; list-style-type: none; margin: 0px 0px 6px -40px; padding: 0px 0px 1px 30px; vertical-align: middle;"><a href="https://www.codeproject.com/KB/aspnet/1130939/MasterChefWebApp.zip" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">Download source - 60.4 KB</a></li>
</ul>
<div style="line-height: normal;">
ASP.NET 5 is dead, and is being renamed to ASP.NET Core 1.0. However, though naming the new, a completely written from scratch ASP.NET framework "ASP.NET 5" was a bad idea for a one major reason: 5 makes it seem like ASP.NET 5 is bigger, better, and replaces ASP.NET 4.6. Not so. So ASP.NET 5 is now ASP.NET Core 1.0, and NET Core 5 is now .NET Core 1.0. Why 1.0? Because these are new. The whole .NET Core concept is new. The .NET Core 1.0 CLI is very new. Not only that, but .NET Core isn't as complete as the full .NET Framework 4.6.</div>
<div style="line-height: normal;">
One of the big new features of working with ASP.NET Core is cross-platform compatibility. As of this version, we can both develop and run ASP.NET Core on Windows, which has always been the case, but also on Mac OS X and Linux operating systems.</div>
<div style="line-height: normal;">
ASP.NET Core and MVC are the server side of things, but as we touched on earlier, in a single-page application, there is also a client-side component. Angular is actually one of the more popular frameworks. It's built on top of the web technologies – HTML, CSS, and JavaScript – and follows a model view whatever pattern, which basically allows us to create apps that have a decoupling between the presentation and the business logic.</div>
<div style="line-height: normal;">
NHibernate is an object-relational mapping (ORM) solution for the Microsoft .NET platform. It provides a framework for mapping an object-oriented domain model to a traditional relational database. Fluent NHibernate offers an alternative to NHibernate's standard XML mapping files. Rather than writing XML documents (.hbm.xml files), Fluent NHibernate allows you to write mappings in strongly typed C# code. This allows for easy refactoring, improved readability and more concise code.</div>
<div style="line-height: normal;">
In this article, I want to show how to build a Single Page Application – MasterChef with ASP.NET Core MVC, Fluent Hibernate, and Angular JS.</div>
<div style="line-height: normal;">
<br /></div>
<div style="line-height: normal;">
<br /></div>
</div>
</div>
<div>
<a href="https://www.codeproject.com/articles/1136158/master-chef-part-asp-net-core-mvc-with-fluent-nh">https://www.codeproject.com/articles/1136158/master-chef-part-asp-net-core-mvc-with-fluent-nh</a></div>
<div>
<br /></div>
<div>
<div class="header" style="border: 0px; margin: 0px; padding: 0px;">
<div class="title" style="border: 0px; color: grey; margin: 0px; padding: 0px;">
<h1 id="ctl00_ArticleTitle" style="color: #333333; font-family: "Segoe UI", Arial, sans-serif; font-size: 29px; font-weight: 200; line-height: normal; margin: 0px 0px 15px; padding: 0px;">
Master Chef (Part 2) ASP.NET Core MVC with Fluent NHibernate and AngularJS</h1>
</div>
<div style="border: 0px; height: 34px; margin: 0px; padding: 0px;">
<div class="entry float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<img class="float-left avatar" id="ctl00_avatar" src="https://www.codeproject.com/script/Membership/ProfileImages/%7Bb8ee00ef-fa42-4848-9ece-a6dc09686f39%7D.jpg" style="border: 0px; float: left; margin: 0px 10px 0px 0px; max-height: 48px; max-width: 48px; overflow: auto; padding: 0px;" /><div class="float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<span class="author" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/script/Membership/View.aspx?mid=3827043" rel="author" style="border: 0px; color: grey; margin: 0px; padding: 0px; text-decoration-line: none;">Fred Song (Melbourne)</a></span>, <span class="date" style="border: 0px; margin: 0px; padding: 0px;" title="Date last updated">3 Oct 2016</span> <a class="license" href="http://www.codeproject.com/info/cpol10.aspx" id="ctl00_LicenseLink" style="background-color: #eeeeee; border: 1px solid rgb(204, 204, 204); color: purple; font-family: "courier new", serif; margin: 0px 0px 0px 20px; padding: 0px 4px; text-decoration-line: none;" title="The Code Project Open License (CPOL)">CPOL</a><div class="tooltip anchorLink" id="ctl00_CurRat" name="CurRat_1136158" style="border: 0px; cursor: pointer; margin: 5px 0px 0px; padding: 0px; position: relative;">
<table cellpadding="0" cellspacing="0" class="small-text" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="nowrap" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span id="ctl00_ArticleRating_VI" style="border: 0px; margin: 0px; padding: 0px;"><div class="nowrap rating-stars-medium" style="background-color: white; border-radius: 5px; border: 0px; height: 18px; margin: 0px; padding: 2px; position: relative; width: 80px;">
<div class="clipped align-left float-left" style="border: 0px; float: left; height: 16px; margin: 0px; overflow: hidden; padding: 0px; width: 80px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-fill-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px;" /></div>
<div class="clipped" style="border: 0px; height: 16px; margin: 0px; overflow: hidden; padding: 0px; position: relative; width: 0px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-empty-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px; position: absolute; right: 0px; top: 0px;" /></div>
</div>
</span></td><td class="nowrap" id="ctl00_ArticleRating_VR" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"> <span id="ctl00_ArticleRating_VotesR" style="border: 0px; margin: 0px; padding: 0px;"> 5.00 (7 votes)</span></td></tr>
</tbody></table>
</div>
</div>
</div>
<div class="float-right align-right voting-bar" id="ctl00_RateArticleRow" style="border: 0px; float: right; margin: -8px 0px 0px; padding: 0px; text-align: right !important;">
<div class="small-text" id="ctl00_RateArticle_RateItemWrapper" name="RateItem_1136158" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;">
<table cellpadding="0" cellspacing="0" class="small-text" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px; width: 100%px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-result align-right" id="ctl00_RateArticle_VoteResultDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 7px 0px 0px; text-align: right !important;"><span class="align-right" style="border: 0px; margin: 0px; padding: 0px;"></span></td><td align="right" class="voteTbl" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><table class="small-text" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-prompt" id="ctl00_RateArticle_RateText" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 5px 0px 0px; white-space: nowrap;">Rate this:</td><td class="nowrap rating-stars-voter-large" id="ctl00_RateArticle_VoteFormDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span class="tooltip ajaxHist radio voting" id="ctl00_RateArticle_RB" style="border: 0px; margin: 0px; padding: 0px; position: relative;"><span id="ctl00_RateArticle_VoteRBL" style="border: 0px; margin: 0px; padding: 0px;"></span><div class="rating-star-block" style="border: 0px; margin: 0px; padding: 2px;">
<a class="star outline" href="https://www.codeproject.com/articles/1136158/master-chef-part-asp-net-core-mvc-with-fluent-nh#" rating="1" style="background-attachment: scroll; background-clip: initial; background-image: url("/script/ratings/images/star-empty-lg.png"); background-origin: initial; background-position: 0px 0px; background-repeat: no-repeat; background-size: initial; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 1">vote 1</a><a class="star outline" href="https://www.codeproject.com/articles/1136158/master-chef-part-asp-net-core-mvc-with-fluent-nh#" rating="2" style="background-attachment: scroll; background-clip: initial; background-image: url("/script/ratings/images/star-empty-lg.png"); background-origin: initial; background-position: 0px 0px; background-repeat: no-repeat; background-size: initial; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 2">vote 2</a><a class="star outline" href="https://www.codeproject.com/articles/1136158/master-chef-part-asp-net-core-mvc-with-fluent-nh#" rating="3" style="background-attachment: scroll; background-clip: initial; background-image: url("/script/ratings/images/star-empty-lg.png"); background-origin: initial; background-position: 0px 0px; background-repeat: no-repeat; background-size: initial; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 3">vote 3</a><a class="star outline" href="https://www.codeproject.com/articles/1136158/master-chef-part-asp-net-core-mvc-with-fluent-nh#" rating="4" style="background-attachment: scroll; background-clip: initial; background-image: url("/script/ratings/images/star-empty-lg.png"); background-origin: initial; background-position: 0px 0px; background-repeat: no-repeat; background-size: initial; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 4">vote 4</a><a class="star outline" href="https://www.codeproject.com/articles/1136158/master-chef-part-asp-net-core-mvc-with-fluent-nh#" rating="5" style="background-attachment: scroll; background-clip: initial; background-image: url("/script/ratings/images/star-empty-lg.png"); background-origin: initial; background-position: 0px 0px; background-repeat: no-repeat; background-size: initial; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 5">vote 5</a></div>
</span></td><td style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 0px 0px 5px;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div class="hover-container" style="border: 0px; margin: 0px; padding: 0px; position: relative;">
</div>
</div>
</div>
</div>
<div class="summary" id="ctl00_description" style="border: 0px; color: grey; margin: 0px; padding: 30px 0px 0px;">
In this article I talk about how to use ASP.NET Core MVC, Fluent NHibernate and Angular JS to implement a CRUD SPA (Single Page Application).</div>
<span class="date" content="https://www.codeproject.com/KB/scripting/1136158/Thumb-1136158.png" id="ctl00_thumbnailUrl" style="border: 0px; margin: 0px; padding: 0px;"></span></div>
<div class="text" id="contentdiv" style="border: 0px; margin: 0px; padding: 10px 0px 0px;">
<ul class="download" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 25px 0px 10px; padding: 0px 0px 0px 40px;">
<li style="background: url("/images/download24.png") left center no-repeat scroll transparent; border: 0px; font-weight: bold; line-height: normal; list-style-type: none; margin: 0px 0px 6px -40px; padding: 0px 0px 1px 30px; vertical-align: middle;"><a href="https://www.codeproject.com/KB/scripting/1136158/MasterChefWebApp.zip" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">Download source - 71.3 KB</a></li>
</ul>
<div style="background-color: white; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: normal;">
In <a href="http://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">Maser Chef Part 1</a>, I introduced how to integrate ASP.NET Core MVC with Fluent NHibernate and Angular JS. In this article I talk about how to use ASP.NET Core MVC, Fluent NHibernate and Angular JS to implement a CRUD SPA (Single Page Application).</div>
<div style="background-color: white; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: normal;">
<br /></div>
<div style="background-color: white; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: normal;">
<a href="https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram</a>, </div>
<div style="background-color: white; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: normal;">
<br /></div>
<div class="header" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px;">
<div class="title" style="border: 0px; color: grey; margin: 0px; padding: 0px;">
<h1 id="ctl00_ArticleTitle" style="color: #333333; font-size: 29px; font-weight: 200; line-height: normal; margin: 0px 0px 15px; padding: 0px;">
Master Chef (Part 3) ASP.NET Core MVC with Entity Framework Core and Angular2</h1>
</div>
<div style="border: 0px; height: 34px; margin: 0px; padding: 0px;">
<div class="entry float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<img class="float-left avatar" id="ctl00_avatar" src="https://www.codeproject.com/script/Membership/ProfileImages/%7Bb8ee00ef-fa42-4848-9ece-a6dc09686f39%7D.jpg" style="border: 0px; float: left; margin: 0px 10px 0px 0px; max-height: 48px; max-width: 48px; overflow: auto; padding: 0px;" /><div class="float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<span class="author" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/script/Membership/View.aspx?mid=3827043" rel="author" style="border: 0px; color: grey; margin: 0px; padding: 0px; text-decoration-line: none;">Fred Song (Melbourne)</a></span>, <span class="date" style="border: 0px; margin: 0px; padding: 0px;" title="Date last updated">26 Jan 2017</span> <a class="license" href="http://www.codeproject.com/info/cpol10.aspx" id="ctl00_LicenseLink" style="background-color: #eeeeee; border: 1px solid rgb(204, 204, 204); color: purple; font-family: "courier new", serif; margin: 0px 0px 0px 20px; padding: 0px 4px; text-decoration-line: none;" title="The Code Project Open License (CPOL)">CPOL</a><div class="tooltip anchorLink" id="ctl00_CurRat" name="CurRat_1167027" style="border: 0px; cursor: pointer; margin: 5px 0px 0px; padding: 0px; position: relative;">
<table cellpadding="0" cellspacing="0" class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="nowrap" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span id="ctl00_ArticleRating_VI" style="border: 0px; margin: 0px; padding: 0px;"><div class="nowrap rating-stars-medium" style="border-radius: 5px; border: 0px; height: 18px; margin: 0px; padding: 2px; position: relative; width: 80px;">
<div class="clipped align-left float-left" style="border: 0px; float: left; height: 16px; margin: 0px; overflow: hidden; padding: 0px; width: 78px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-fill-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px;" /></div>
<div class="clipped" style="border: 0px; height: 16px; margin: 0px; overflow: hidden; padding: 0px; position: relative; width: 2px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-empty-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px; position: absolute; right: 0px; top: 0px;" /></div>
</div>
</span></td><td class="nowrap" id="ctl00_ArticleRating_VR" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"> <span id="ctl00_ArticleRating_VotesR" style="border: 0px; margin: 0px; padding: 0px;"> 4.88 (15 votes)</span></td></tr>
</tbody></table>
</div>
</div>
</div>
<div class="float-right align-right voting-bar" id="ctl00_RateArticleRow" style="border: 0px; float: right; margin: -8px 0px 0px; padding: 0px; text-align: right !important;">
<div class="small-text" id="ctl00_RateArticle_RateItemWrapper" name="RateItem_1167027" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;">
<table cellpadding="0" cellspacing="0" class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px; width: 100%px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-result align-right" id="ctl00_RateArticle_VoteResultDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 7px 0px 0px; text-align: right !important;"><span class="align-right" style="border: 0px; margin: 0px; padding: 0px;"></span></td><td align="right" class="voteTbl" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><table class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-prompt" id="ctl00_RateArticle_RateText" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 5px 0px 0px; white-space: nowrap;">Rate this:</td><td class="nowrap rating-stars-voter-large" id="ctl00_RateArticle_VoteFormDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span class="tooltip ajaxHist radio voting" id="ctl00_RateArticle_RB" style="border: 0px; margin: 0px; padding: 0px; position: relative;"><span id="ctl00_RateArticle_VoteRBL" style="border: 0px; margin: 0px; padding: 0px;"></span><div class="rating-star-block" style="border: 0px; margin: 0px; padding: 2px;">
<a class="star outline" href="https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram#" rating="1" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 1">vote 1</a><a class="star outline" href="https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram#" rating="2" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 2">vote 2</a><a class="star outline" href="https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram#" rating="3" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 3">vote 3</a><a class="star outline" href="https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram#" rating="4" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 4">vote 4</a><a class="star outline" href="https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram#" rating="5" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 5">vote 5</a></div>
</span></td><td style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 0px 0px 5px;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div class="hover-container" style="border: 0px; margin: 0px; padding: 0px; position: relative;">
</div>
</div>
</div>
</div>
<div class="summary" id="ctl00_description" style="border: 0px; color: grey; margin: 0px; padding: 30px 0px 0px;">
From this article, I’d like create ASP.NET Core (Net Core) application with Angular 2.</div>
<span class="date" content="https://www.codeproject.com/KB/scripting/1167027/Thumb-1167027.png" id="ctl00_thumbnailUrl" style="border: 0px; margin: 0px; padding: 0px;"></span></div>
<div class="text" id="contentdiv" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 10px 0px 0px;">
<ul class="download" style="border: 0px; margin: 25px 0px 10px; padding: 0px 0px 0px 40px;">
<li style="background: url("/images/download24.png") left center no-repeat scroll transparent; border: 0px; font-weight: bold; line-height: normal; list-style-type: none; margin: 0px 0px 6px -40px; padding: 0px 0px 1px 30px; vertical-align: middle;"><a href="https://www.codeproject.com/KB/scripting/1167027/MasterChef2WebApp.zip" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">Download MasterChef2WebApp.zip - 86.6 KB</a></li>
</ul>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
Introduce</h2>
<div style="line-height: normal;">
In <a href="https://www.codeproject.com/Articles/1130939/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NHib" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">Master Chef Part 1</a> and <a href="https://www.codeproject.com/Articles/1136158/Master-Chef-Part-ASP-NET-Core-MVC-with-Fluent-NH?q=master+chef" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">Master Chef Part 2</a>, I introduced how to integrate ASP.NET Core (Framework) with Angular JS and Fluent NHibernate. In this article, I’d like create an ASP.NET Core (Net Core) application. You should know NHibernate doesn’t have Net Core version yet, so I switch to Entity Framework Core. On 9/14/2016, Angular 2 Final release was out. Angular 2 is the second major installment of AngularJS and is entirely written in TypeScript. For the developers who are working with Angular 1.x, you might find a big change in Angular 2, as it is entirely component based and an object orientation, is much easier with enhanced DI capability. I’ll show you how to build Angular2 application in Visual Studio 2015 Update 3.</div>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
Create MasterChef2 Application in Visual Studio 2015 Update 3</h2>
<div style="line-height: normal;">
Download and install the latest ASP.NET Web Tools from <a href="https://marketplace.visualstudio.com/items?itemName=JacquesEloff.MicrosoftASPNETandWebTools-9689" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">https://marketplace.visualstudio.com/items?itemName=JacquesEloff.MicrosoftASPNETandWebTools-9689</a>. Then install TypeScript 2 from <a href="https://www.microsoft.com/en-us/download/details.aspx?id=48593" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">https://www.microsoft.com/en-us/download/details.aspx?id=48593</a>.</div>
<div style="line-height: normal;">
Form Visual C#/Web, select ASP.NET core Web Application (.NET Core).</div>
<div style="line-height: normal;">
<img height="437px" src="https://www.codeproject.com/KB/scripting/1167027/image001.png" style="border: 0px; height: auto; margin: 0px; max-width: 100%; overflow: auto; padding: 0px;" width="628px" /></div>
<div style="line-height: normal;">
ASP.NET Core has two kinds of applications.</div>
<ol style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">ASP.NET Core .NET Framework Application is application running on Windows using .NET Framework.</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">ASP.NET Core .NET Core Application is cross-platform application running on Windows, Linux, and OS X using .NET Core.</li>
</ol>
</div>
</div>
</div>
<div>
see <a href="https://www.codeproject.com/Articles/1183740/Master-Chef-Part-ASP-NET-Core-MVC-and-Angular-Impl">https://www.codeproject.com/Articles/1183740/Master-Chef-Part-ASP-NET-Core-MVC-and-Angular-Impl</a></div>
<div>
<div class="header" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px;">
<div class="title" style="border: 0px; color: grey; margin: 0px; padding: 0px;">
<h1 id="ctl00_ArticleTitle" style="color: #333333; font-size: 29px; font-weight: 200; line-height: normal; margin: 0px 0px 15px; padding: 0px;">
Master Chef (Part 4) ASP.NET Core MVC and Angular 2 Implement CRUD Single Page Application</h1>
</div>
<div style="border: 0px; height: 34px; margin: 0px; padding: 0px;">
<div class="entry float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<img class="float-left avatar" id="ctl00_avatar" src="https://www.codeproject.com/script/Membership/ProfileImages/%7Bb8ee00ef-fa42-4848-9ece-a6dc09686f39%7D.jpg" style="border: 0px; float: left; margin: 0px 10px 0px 0px; max-height: 48px; max-width: 48px; overflow: auto; padding: 0px;" /><div class="float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<span class="author" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/script/Membership/View.aspx?mid=3827043" rel="author" style="border: 0px; color: grey; margin: 0px; padding: 0px; text-decoration-line: none;">Fred Song (Melbourne)</a></span>, <span class="date" style="border: 0px; margin: 0px; padding: 0px;" title="Date last updated">25 Apr 2017</span> <a class="license" href="http://www.codeproject.com/info/cpol10.aspx" id="ctl00_LicenseLink" style="background-color: #eeeeee; border: 1px solid rgb(204, 204, 204); color: purple; font-family: "courier new", serif; margin: 0px 0px 0px 20px; padding: 0px 4px; text-decoration-line: none;" title="The Code Project Open License (CPOL)">CPOL</a><div class="tooltip anchorLink" id="ctl00_CurRat" name="CurRat_1183740" style="border: 0px; cursor: pointer; margin: 5px 0px 0px; padding: 0px; position: relative;">
<table cellpadding="0" cellspacing="0" class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="nowrap" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span id="ctl00_ArticleRating_VI" style="border: 0px; margin: 0px; padding: 0px;"><div class="nowrap rating-stars-medium" style="border-radius: 5px; border: 0px; height: 18px; margin: 0px; padding: 2px; position: relative; width: 80px;">
<div class="clipped align-left float-left" style="border: 0px; float: left; height: 16px; margin: 0px; overflow: hidden; padding: 0px; width: 80px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-fill-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px;" /></div>
<div class="clipped" style="border: 0px; height: 16px; margin: 0px; overflow: hidden; padding: 0px; position: relative; width: 0px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-empty-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px; position: absolute; right: 0px; top: 0px;" /></div>
</div>
</span></td><td class="nowrap" id="ctl00_ArticleRating_VR" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"> <span id="ctl00_ArticleRating_VotesR" style="border: 0px; margin: 0px; padding: 0px;"> 5.00 (5 votes)</span></td></tr>
</tbody></table>
</div>
</div>
</div>
<div class="float-right align-right voting-bar" id="ctl00_RateArticleRow" style="border: 0px; float: right; margin: -8px 0px 0px; padding: 0px; text-align: right !important;">
<div class="small-text" id="ctl00_RateArticle_RateItemWrapper" name="RateItem_1183740" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;">
<table cellpadding="0" cellspacing="0" class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px; width: 100%px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-result align-right" id="ctl00_RateArticle_VoteResultDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 7px 0px 0px; text-align: right !important;"><span class="align-right" style="border: 0px; margin: 0px; padding: 0px;"></span></td><td align="right" class="voteTbl" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><table class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-prompt" id="ctl00_RateArticle_RateText" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 5px 0px 0px; white-space: nowrap;">Rate this:</td><td class="nowrap rating-stars-voter-large" id="ctl00_RateArticle_VoteFormDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span class="tooltip ajaxHist radio voting" id="ctl00_RateArticle_RB" style="border: 0px; margin: 0px; padding: 0px; position: relative;"><span id="ctl00_RateArticle_VoteRBL" style="border: 0px; margin: 0px; padding: 0px;"></span><div class="rating-star-block" style="border: 0px; margin: 0px; padding: 2px;">
<a class="star outline" href="https://www.codeproject.com/Articles/1183740/Master-Chef-Part-ASP-NET-Core-MVC-and-Angular-Impl#" rating="1" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 1">vote 1</a><a class="star outline" href="https://www.codeproject.com/Articles/1183740/Master-Chef-Part-ASP-NET-Core-MVC-and-Angular-Impl#" rating="2" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 2">vote 2</a><a class="star outline" href="https://www.codeproject.com/Articles/1183740/Master-Chef-Part-ASP-NET-Core-MVC-and-Angular-Impl#" rating="3" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 3">vote 3</a><a class="star outline" href="https://www.codeproject.com/Articles/1183740/Master-Chef-Part-ASP-NET-Core-MVC-and-Angular-Impl#" rating="4" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 4">vote 4</a><a class="star outline" href="https://www.codeproject.com/Articles/1183740/Master-Chef-Part-ASP-NET-Core-MVC-and-Angular-Impl#" rating="5" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration-line: none; text-indent: -999em; width: 24px;" title="vote 5">vote 5</a></div>
</span></td><td style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 0px 0px 5px;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div class="hover-container" style="border: 0px; margin: 0px; padding: 0px; position: relative;">
</div>
</div>
</div>
</div>
<div class="summary" id="ctl00_description" style="border: 0px; color: grey; margin: 0px; padding: 30px 0px 0px;">
Inthis article, I talk about how to use ASP.NET Core MVC, Entity Framework Coreand Angular 2 to implement a CRUD SPA (Single Page Application).</div>
<span class="date" content="https://www.codeproject.com/KB/aspnet/1183740/Thumb-1183740.png" id="ctl00_thumbnailUrl" style="border: 0px; margin: 0px; padding: 0px;"></span></div>
<div class="text" id="contentdiv" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 10px 0px 0px;">
<ul class="download" style="border: 0px; margin: 25px 0px 10px; padding: 0px 0px 0px 40px;">
<li style="background: url("/images/download24.png") left center no-repeat scroll transparent; border: 0px; font-weight: bold; line-height: normal; list-style-type: none; margin: 0px 0px 6px -40px; padding: 0px 0px 1px 30px; vertical-align: middle;"><a href="https://www.codeproject.com/KB/aspnet/1183740/MasterChef2WebApp.zip" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">Download source - 79.7 KB</a></li>
</ul>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
Introduction</h2>
<div style="line-height: normal;">
In Master Chef (part 3) <a href="https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration-line: none;">https://www.codeproject.com/Articles/1167027/Master-Chef-Part-ASP-NET-Core-MVC-with-Entity-Fram</a>, I’ve introduced how to create ASP.NET Core MVC and Angular 2 applications. In this article, I talk about how to use ASP.NET Core MVC, Entity Framework Core and Angular 2 to implement a CRUD SPA (Single Page Application).</div>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
Server Data Model</h2>
<div style="line-height: normal;">
Create, read, update and delete (as an acronym CRUD) are four basic functions of persistent storage.</div>
<div style="line-height: normal;">
We need to implement CRUD on database level in our repository class first. Add a basic Entity class.</div>
<div class="pre-action-link" id="premain139143" style="border: 0px; color: #999999; font-size: 11px; margin: 0px; padding: 0px; position: relative; text-align: right; width: 700px;">
<span id="prehide139143" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Hide</span> <span id="copycode139143" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Copy Code</span></div>
<pre class="notranslate" id="pre139143" lang="cs" style="background-color: #fbedbb; border: 1px solid rgb(251, 237, 187); color: black; font-family: Consolas, "Courier New", Courier, mono; font-size: 9pt; font-stretch: normal; line-height: normal; overflow: auto; padding: 6px; tab-size: 4; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;"> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">class</span> Entity
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">virtual</span> Guid Id { <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">get</span>; <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">set</span>; }
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">virtual</span> Guid? ParentId { <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">get</span>; <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">set</span>; }
}</pre>
<div style="line-height: normal;">
Then let <code style="border: 0px; color: #990000; font-family: Consolas, "Courier New", Courier, mono; font-size: 11pt; font-stretch: normal; line-height: normal; margin: 0px; padding: 0px;">Recipe</code>, <code style="border: 0px; color: #990000; font-family: Consolas, "Courier New", Courier, mono; font-size: 11pt; font-stretch: normal; line-height: normal; margin: 0px; padding: 0px;">RecipeStep</code> and <code style="border: 0px; color: #990000; font-family: Consolas, "Courier New", Courier, mono; font-size: 11pt; font-stretch: normal; line-height: normal; margin: 0px; padding: 0px;">RecipeItem</code> inherit <code style="border: 0px; color: #990000; font-family: Consolas, "Courier New", Courier, mono; font-size: 11pt; font-stretch: normal; line-height: normal; margin: 0px; padding: 0px;">Entity</code> class, and use Id and ParentId these generic names to replace the corresponding keys and references.</div>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-47349672241686311262017-03-13T07:53:00.000-07:002017-03-13T07:53:23.473-07:00Ionic HTML5 and Angular<div dir="ltr" style="text-align: left;" trbidi="on">
Ionic HTML5 and Angular<br />
<br />
<a href="http://coenraets.org/blog/2014/02/sample-mobile-application-with-ionic-and-angularjs/">Sample Mobile Application with Ionic and AngularJS</a> February 5, 2014 in <a href="http://coenraets.org/blog/category/angular-js/">Angular.js</a>, <a href="http://coenraets.org/blog/category/cordova/">Cordova</a>, <a href="http://coenraets.org/blog/category/ionic/">Ionic</a>, <a href="http://coenraets.org/blog/category/phonegap/">PhoneGap</a><br /><br /><br /><a href="http://blog.ionic.io/angular-2-ionic/">Ionic and Angular 2 | The Official Ionic Blog</a><br />blog.ionic.io/angular-2-ionic<a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br />Hey Ionites, After a hugely successful ngConf last week, the Ionic office is abuzz with Angular 2, and what it means for Ionic. The number one response from ngConf is that Angular is here to stay, and …<br /><br /><a href="http://moduscreate.com/5-best-mobile-web-app-frameworks-ionic-angularjs/">5 Best Mobile Web App Frameworks: Ionic (AngularJS) - Modus Create</a><br />moduscreate.com/5-best-mobile-web-app-frameworks<a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br />Ionic framework is the youngest in our top 5 stack, as the alpha was released in late November 2013. Built on top of the popular AngularJS framework from Google, Ionic utilizes AngularJS to provide …<br /><br /><a href="http://ionicframework.com/docs/api/">Javascript - Extend Ionic even further with the power of AngularJS ...</a><br />ionicframework.com/docs/api<a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br />Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and AngularJS. ... Learn more about how Ionic was built, why you should use it, and what's included. …<br /><br /><a href="https://www.npmjs.com/package/ionic-angular">ionic-angular - npm</a><br />https://www.npmjs.com/package/ionic-angular<a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br />Usually, the only import required by the user is ionic-angular, as everything from Ionic is exported by the package: import { App, NavController } from 'ionic-angular'; Bundles. Minified and unminified …<br /><br /><a href="https://www.amazon.com/Ionic-Action-Hybrid-Mobile-AngularJS/dp/1633430081">Ionic in Action: Hybrid Mobile Apps with Ionic and AngularJS</a><br />www.amazon.com › … › <a href="https://www.amazon.com/Web-Development-Computers-Internet-Books/b?ie=UTF8&node=3510">Web Development & Design</a><a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br />Ionic in Action teaches web developers how to build cross-platform mobile apps for phones and tablets on iOS and Android. You'll learn how to extend your web development skills to build apps …<br /><br /><a href="https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic">Create Your First Mobile App with AngularJS and Ionic | Scotch</a><br />https://scotch.io/tutorials/create-your-first-mobile-app-with...<a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br />Angular 2 is the shiny new framework that comes with a lot of new concepts. Learn all the great new features. In the past years, making a mobile app involved being good with the native language you …<br /><br /><a href="http://blog.ionic.io/angular-2-series-introduction/">Angular 2 Series: Introduction | The Official Ionic Blog</a><br />blog.ionic.io/angular-2-series-introduction<a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br />README: Angular 2 has changed significantly since this post was written. As such, please do not use this code verbatim. Instead, focus on the concepts below and then map them to the new syntax and API of Angular …<br /><br /><a href="https://www.lynda.com/AngularJS-tutorials/Building-Mobile-App-AngularJS-1-Ionic/368920-2.html">Building a Mobile App with AngularJS 1 and Ionic - Lynda.com</a><br />https://www.lynda.com/AngularJS-tutorials/Building-Mobile-App...<a href="https://www.bing.com/search?q=ionic+angular&PC=U316&FORM=CHROMN#"></a><br /><a href="https://www.bing.com/videos/search?q=ionic+angular&PC=U316&ru=%2fsearch%3fq%3dionic%2bangular%26PC%3dU316%26FORM%3dCHROMN&view=detail&mmscn=vwrc&mid=8A166ECF83A4554FAF278A166ECF83A4554FAF27&FORM=WVFSTD">Watch video</a> · - [Voiceover] Hey there, this is Ray Villalobos, staff author at lynda.com and I want to welcome you to Building a Mobile App with AngularJS and Ionic. In this course, I'm going to show …<br /><div>
<br /></div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com1tag:blogger.com,1999:blog-8878501298548928127.post-53349992913113756122017-03-09T08:39:00.000-08:002017-03-09T08:39:07.644-08:00Microsoft Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 id="hands-on-lab-build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs" sourceendlinenumber="16" sourcefile="web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs.md" sourcestartlinenumber="15" style="background-color: white; color: #222222; font-family: segoe-ui_light, "Segoe UI Light", "Segoe WP", "Helvetica Neue", Helvetica, sans-serif; font-size: 2.5rem; font-weight: 300; line-height: 1.3; margin: 10px 0px 4px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js</h1>
<div>
<a href="https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs">https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs</a></div>
<div class="metadata" ms.cmpgrp="page info" style="background-color: white; color: #222222; font-family: segoe-ui_normal, "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; margin: 0px 0px 24px; overflow: hidden;">
<div class="info" style="font-size: 0.8125rem;">
<div class="meta" style="color: #6e6e6e;">
<time class="date" datetime="9/30/2015 12:00:00 AM">9/30/2015</time> <span class="reading-time">22 min to read</span> <span class="contributors-text" style="margin-right: 5px;">Contributors</span> <ul class="contributors" ms.cmpgrp="contributors" style="display: inline-block; list-style-image: initial; list-style-position: initial; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="display: inline-block; margin: 0px; padding: 0px; vertical-align: top;"><a href="https://github.com/Rick-Anderson" ms.cmpnm="contributorprofile" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #007bb8; cursor: pointer; text-decoration: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform;" title="Rick Anderson"><img alt="Rick Anderson" src="https://github.com/Rick-Anderson.png?size=16" style="border-radius: 100%; border: 0px; display: inline-block; height: auto; margin-top: 5px; max-width: 100%; width: 16px;" /></a></li>
<li style="display: inline-block; margin: 0px; padding: 0px; vertical-align: top;"><a href="https://github.com/tdykstra" ms.cmpnm="contributorprofile" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #007bb8; cursor: pointer; text-decoration: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform;" title="Tom Dykstra"><img alt="Tom Dykstra" src="https://github.com/tdykstra.png?size=16" style="border-radius: 100%; border: 0px; display: inline-block; height: auto; margin-top: 5px; max-width: 100%; width: 16px;" /></a></li>
</ul>
</div>
</div>
</div>
<div style="background-color: white; color: #222222; font-family: segoe-ui_normal, "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px;">
<div class="content">
<div class="lf-text-block lf-block" data-lf-anchor-id="bd27040cc0851092d00004015b82108f:0" style="padding-right: 25px !important; position: relative !important;">
by <a href="https://twitter.com/webcamps" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #007bb8; cursor: pointer; text-decoration: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform;">Web Camps Team</a><span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<div class="lf-text-block lf-block" data-lf-anchor-id="fda5c4a4d11d8f6ac6486300f582e214:0" style="padding-right: 25px !important; position: relative !important;">
<a href="http://aka.ms/webcamps-training-kit" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #007bb8; cursor: pointer; text-decoration: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform;">Download Web Camps Training Kit</a><span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<blockquote style="border-color: rgb(224, 224, 224); border-style: solid; border-width: 0px 0px 0px 3px; margin: 1.2em 0px 2em; padding: 0px 0.8em;">
<div class="lf-text-block lf-block" data-lf-anchor-id="8f842c6dc59166f93389884247036377:0" style="padding-right: 25px !important; position: relative !important;">
In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. In subsequent interactions with the page –e.g. the user navigates to a link or submits a form with data– a new request is sent to the server, and the flow starts again: the server processes the request and sends a new page to the browser in response to the new action requested by the client.<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<div class="lf-text-block lf-block" data-lf-anchor-id="83942c67c7b026fb33cde842672b4b53:0" style="padding-right: 25px !important; position: relative !important;">
In Single-Page Applications (SPAs) the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests. This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page. The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience.<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<div class="lf-text-block lf-block" data-lf-anchor-id="1fd92dc75497217da0cd09044d274ca1:0" style="padding-right: 25px !important; position: relative !important;">
The architecture of a SPA involves certain challenges that are not present in traditional web applications. However, emerging technologies like ASP.NET Web API, JavaScript frameworks like AngularJS and new styling features provided by CSS3 make it really easy to design and build SPAs.<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<div class="lf-text-block lf-block" data-lf-anchor-id="0f9de4854685e1a91fc5cfcf75654f79:0" style="padding-right: 25px !important; position: relative !important;">
In this hand-on lab, you will take advantage of those technologies to implement Geek Quiz, a trivia website based on the SPA concept. You will first implement the service layer with ASP.NET Web API to expose the required endpoints to retrieve the quiz questions and store the answers. Then, you will build a rich and responsive UI using AngularJS and CSS3 transformation effects.<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<div class="lf-text-block lf-block" data-lf-anchor-id="e585eda457193f882a0d6ac325026297:0" style="padding-right: 25px !important; position: relative !important;">
All sample code and snippets are included in the Web Camps Training Kit, available at <a href="http://aka.ms/webcamps-training-kit" style="backface-visibility: hidden; background-color: transparent; box-shadow: transparent 0px 0px 1px; color: #007bb8; cursor: pointer; text-decoration: none; transition: transform 0.1s ease-out, color, background-color, -webkit-transform;">http://aka.ms/webcamps-training-kit</a>.<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
</blockquote>
<h2 id="overview" style="font-size: 1.75rem; font-weight: 300; line-height: 1.3; margin-bottom: 12px; margin-top: 32px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Overview</h2>
<div class="lf-text-block lf-block" data-lf-anchor-id="d41d8cd98f00b204e9800998ecf8427e:0" style="padding-right: 25px !important; position: relative !important;">
<a href="https://www.blogger.com/null" id="Objectives" style="background-color: transparent; color: #007bb8; cursor: pointer; transition: none 86ms ease-out;"></a><span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<h3 id="objectives" style="font-family: segoe-ui_semibold, "Segoe UI Semibold", "Segoe WP", "Helvetica Neue", Helvetica, sans-serif; font-size: 1.188rem; font-weight: 300; line-height: 1.3; margin-bottom: 18px; margin-top: 30px; text-rendering: optimizeLegibility; word-wrap: break-word;">
Objectives</h3>
<div class="lf-text-block lf-block" data-lf-anchor-id="19818c01402608a549e1069d04280b51:0" style="padding-right: 25px !important; position: relative !important;">
In this hands-on lab, you will learn how to:<span class="lf-thread-btn" style="position: absolute !important; right: 0px !important; top: 0px !important;"></span></div>
<ul class="lf-text-block lf-block" data-lf-anchor-id="0ec54bcf5081326086418dc45f0004d9:0" style="margin: 0px 0px 16px; padding-bottom: 0px; padding-left: 0px; padding-right: 25px !important; padding-top: 0px; position: relative !important;">
<li style="margin: 4px 0px 0px 18px;">Create an ASP.NET Web API service to send and receive JSON data</li>
<li style="margin: 4px 0px 0px 18px;">Create a responsive UI using AngularJS</li>
<li style="margin: 4px 0px 0px 18px;">Enhance the UI experience with CSS3 transformations</li>
<li style="margin: 4px 0px 0px 18px;"><continues at link above></li>
</ul>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-91706857670324045792017-03-09T08:35:00.003-08:002017-03-09T08:45:55.083-08:00ASP.NET Web API<div dir="ltr" style="text-align: left;" trbidi="on">
Learn About ASP.NET Web API<br />
<a href="https://www.asp.net/web-api">https://www.asp.net/web-api</a><br />
<br />
ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.<br />
<a href="https://go.microsoft.com/fwlink/?linkid=843367">Download</a><br />
<br />
<a href="https://go.microsoft.com/fwlink/?linkid=843367"></a><br />
<br />
<br />
<a href="https://go.microsoft.com/fwlink/?linkid=843367">Visual Studio 2017</a><br />
<br />
<br />
Free, powerful IDE for ASP.NET on Windows<br />
<br />
<br />
<a href="https://www.asp.net/web-api/videos/getting-started/your-first-web-api"><img src="https://media-www-asp.azureedge.net/media/4374468/web-api-hero.png" /></a><br />
<br />
Web API: <br />
<a href="https://www.asp.net/web-api/overview">Guidance</a> <br />
<a href="https://www.asp.net/web-api/videos">Videos</a> <br />
<a href="https://www.asp.net/aspnet/samples/aspnet-web-api">Samples</a> <br />
<a href="https://forums.asp.net/1246.aspx/1?ASP+NET+Web+API">Forum</a> <br />
<a href="https://www.asp.net/web-api/books">Books</a> <br />
<a href="https://www.asp.net/web-api/open-source">Open Source</a> <br />
<br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api">Getting Started</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/web-api-routing-and-actions">Routing</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/data">Working with Data</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/mobile-clients">Mobile Clients</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api">OData</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/formats-and-model-binding">Serialization and Model Binding</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/error-handling">Error Handling</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/testing-and-debugging">Testing and Debugging</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/security">Security, Authentication, and Authorization</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/hosting-aspnet-web-api">Deployment and Hosting</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/api-reference">API Reference</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/advanced">Advanced Topics</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/releases">Releases</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/resources">Additional Resources</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/older-versions">Older Versions</a> <br />
<a href="https://www.blogger.com/null"></a><a href="https://www.asp.net/web-api/overview/get-help">Get Help</a> <br />
<br />
<br />
<img border="0" src="https://engine.adzerk.net/i.gif?e=eyJhdiI6MTA4MDEsImF0IjoxNDAzLCJidCI6MCwiY20iOjUzNDg0MCwiY2giOjQ4MTEsImNrIjp7fSwiY3IiOjY5ODQ5NywiZGkiOiJiZDU4ZGI3MzUzNzc0MjZhYTdjZDhmMWZkZTgwZGE2NyIsImRtIjoxLCJmYyI6MjI4NjgzNywiZmwiOjI3MjUyNTMsImlwIjoiOTYuNDIuODEuMTA3IiwibnciOjIwNzIsInBjIjowLCJlYyI6MCwicHIiOjc3NjAsInJ0IjoxLCJyZiI6Imh0dHBzOi8vd3d3LmJpbmcuY29tLyIsInN0IjoxODA5OSwidWsiOiJ1ZTEtMjllZjdlNjVkYjkwNGQzNGJlYjNkOWU1ZTU0OGRlZDciLCJ0cyI6MTQ4OTA3NzE4NTY3NiwiYmYiOnRydWUsInBuIjoiTWljcm9UZXh0IiwiZnEiOjB9&s=blCPoDhKBl-m9g-HHkGy0vs7JGo" /><br />
<br />
<br />
The basics of building an HTTP service using ASP.NET Web API <br />
<br />
<a href="https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api">Getting Started with ASP.NET Web API 2</a> <br />
<br />
<br />
By Mike Wasson|May 28, 2015 <br />
<br />
<br />
In this tutorial, you will create your first HTTP service using ASP.NET Web API. <br />
<br />
<a href="https://www.asp.net/web-api/videos/getting-started/aspnet-web-api">Getting Started with ASP.NET Web API</a> <br />
<br />
<br />
This video from Scott Hanselman will get you started on ASP.NET Web API. <br />
<br />
<a href="http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-windows-store-dotnet-leaderboard?WT.mc_id=zumo_aspnet">Creating a Leaderboard App with Azure Mobile Services .NET Backend</a> <br />
<br />
<br />
Use Visual Studio to create a Web API app hosted in Azure Mobile Services. <br />
<br />
<a href="https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/action-results">Action Results in Web API 2</a> <br />
<br />
<br />
By Mike Wasson|February 3, 2014 <br />
<br />
<br />
Describes how Web API converts the return value from a controller action into an HTTP response. <br />
<br />
<a href="http://www.asp.net/media/4071077/aspnet-web-api-poster.pdf">Web API 2 Poster</a> <br />
<br />
<br />
This poster shows how an HTTP request flows through the Web API 2 pipeline, and how the HTTP response flows back. It also shows extensibility points, where you can add custom code or even replace the default behavior entirely. <br />
<br />
<a href="http://www.apress.com/9781430247258">Pro ASP.NET Web API</a> <br />
<br />
<br />
Pro ASP.NET Web API, by Tugberk Ugurlu and Alexander Zeitler, shows you how to build flexible, extensible web services that run seamlessly on a range of operating systems and devices, from desktops to tablets to smart phones—even the ones we don’t know today. <br />
<br />
<a href="https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/using-web-api-with-aspnet-web-forms">Using Web API with ASP.NET Web Forms</a> <br />
<br />
<br />
By Mike Wasson|April 3, 2012 <br />
<br />
<br />
This tutorial shows how to use ASP.NET Web API in an ASP.NET Web Forms project. <br />
<br />
<a href="https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/creating-api-help-pages">Creating API Help Pages</a> <br />
<br />
<br />
By Mike Wasson|April 1, 2013 <br />
<br />
<br />
Learn how to add help pages for your web API, so that other developers will know how to call your API. <br />
<br />
<a href="https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs">Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js</a> <br />
<br />
<br />
By Web Camps Team|September 30, 2015 <br />
<br />
<br />
Build Geek Quiz, a trivia website based on the SPA concept, from the gr<br />
<div class="content learn" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; color: #505050; font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif; font-size: 13.008px; margin: 0px auto; max-width: 1180px; outline: 0px; padding: 10px; position: relative; vertical-align: baseline; z-index: 0;">
<div class="col-main" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; font-size: 13.008px; margin: 0px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline; width: 835px;">
<div class="col-center" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; float: left; font-size: 13.008px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: 596px;">
<ol class="common-list-steps no-bullets" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 13.008px; list-style: none; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 13.008px; margin: 15px 0px 0px 30px; outline: 0px; padding: 20px 0px 0px; position: relative; vertical-align: baseline;"><div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: 13.008px; margin-bottom: 18px; outline: 0px; padding: 0px; vertical-align: baseline;">
ound up using ASP.NET Web API, AngularJS, and CSS3.</div>
</li>
</ol>
</div>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-37759614475160139732017-03-09T08:33:00.000-08:002017-03-09T09:10:42.461-08:00Odata Windows Service<div dir="ltr" style="text-align: left;" trbidi="on">
Odata Windows Service<br />
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx">https://msdn.microsoft.com/en-us/library/dn766002.aspx</a><br />
<h1 class="title" style="font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 2.769em; font-stretch: normal; font-weight: normal; line-height: 1.167; margin-top: 0px;">
Understand OData Services in Windows Azure Pack</h1>
<div id="mainSection" style="clear: both; font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 13px;">
<div id="mainBody">
<br />
<div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
Applies To: Windows Azure Pack</div>
<div class="introduction">
<div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
This topic provides basic information about what OData is and how it works with the IaaS service of Windows Azure Pack. The IaaS OData service is offered by Service Provider Foundation through the Service Management API.</div>
<ul class="unordered">
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#odataintro" style="color: #00709f; text-decoration: none;">OData Introduction</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#urlplaceholders" style="color: #00709f; text-decoration: none;">URL placeholders</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#serviceurl" style="color: #00709f; text-decoration: none;">The service URL format for collections and entities</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#identifyresource" style="color: #00709f; text-decoration: none;">Identify an entity through the URL</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#commonget" style="color: #00709f; text-decoration: none;">Common GET HTTP Info</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#commonrequest" style="color: #00709f; text-decoration: none;">Common HTTP request information</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#commonresponse" style="color: #00709f; text-decoration: none;">Common HTTP response information</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#entitybasics" style="color: #00709f; text-decoration: none;">Entity Basics</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#updateentity" style="color: #00709f; text-decoration: none;">Updating Entities</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#complextypes" style="color: #00709f; text-decoration: none;">Complex Types</a></div>
</li>
<li style="list-style-image: none;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
<a href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#commonoperations" style="color: #00709f; text-decoration: none;">OData Operations</a></div>
</li>
</ul>
</div>
<a href="https://www.blogger.com/null" id="odataintro" style="color: #0072c6;"></a><br />
<div>
<h2 class="LW_CollapsibleArea_TitleDiv" style="font-family: "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; line-height: 1.3em; margin: 0px; padding-bottom: 5px; padding-top: 20px;">
<a class="LW_CollapsibleArea_TitleAhref" href="https://www.blogger.com/null" role="heading" style="color: #0072c6; cursor: text; outline: none;" title=""><span class="LW_CollapsibleArea_Title" style="color: black; display: inline-block; font-size: 1.769em; line-height: 1.3em;">OData Introduction</span></a><div class="LW_CollapsibleArea_Anchor_Div" id="Anchor_0" style="float: right; height: 20px; padding-top: 7px; visibility: hidden; width: 20px;">
<a class="LW_CollapsibleArea_Anchor_Img" href="https://msdn.microsoft.com/en-us/library/dn766002.aspx#Anchor_0" style="background-attachment: scroll; background-clip: initial; background-image: url("/Areas/Epx/Content/Images/ImageSprite.png?v=636239072766779663"); background-origin: initial; background-position: -502px -3px; background-repeat: no-repeat; background-size: initial; color: black; display: inline-block; height: 20px; overflow: hidden; text-decoration: none; width: 20px;" title="Right-click to copy and share the link for this section"></a></div>
<div class="LW_CollapsibleArea_HrDiv" style="padding-top: 0px;">
</div>
</h2>
<div class="sectionblock" style="padding-bottom: 20px; padding-left: 15px;">
<div class="section">
<div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
You can think of the OData service as a database exposed through an HTTP REST interface. When you work with a database you are working with records in a table. You perform one of four operations on the records: <strong>create</strong>, <strong>read</strong>, <strong>update</strong>, or <strong>delete</strong>. These operations are known as CRUD operations. OData shares this same concept of record manipulation.</div>
<div style="color: #2a2a2a; line-height: 18px; padding-bottom: 15px;">
An OData service has three basic components, entities (data model types), entity sets (collections), and OData operations. A collection (like a database table) contains instances (like database records) of a specific entity type. Entity types are data structures that are used by collections and have key properties whose values uniquely identify one instance from another. OData operations (like database stored procedures) are pieces of custom logic that you can call. For more information about basic OData concepts, see the <a href="http://go.microsoft.com/fwlink/p/?LinkID=268737" style="color: #00709f; text-decoration: none;">OData documentation</a>.</div>
</div>
</div>
</div>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com1tag:blogger.com,1999:blog-8878501298548928127.post-33561708702947942092017-02-15T09:50:00.005-08:002017-02-15T10:06:25.809-08:00Angular Tutorials<div dir="ltr" style="text-align: left;" trbidi="on">
Angular Tutorials<br />
<br />
angular2 in 15min Duncan Hunter <a href="https://www.youtube.com/watch?v=U3qshbC4fLo">youtube</a><br />
<br />
<br />
<a href="http://www.angulartypescript.com/angular-2-tutorial/">http://www.angulartypescript.com/angular-2-tutorial/</a><br />
This tutorial is a practical Angular 2 resource for programmers who are building or want to build web client applications under HTML and Typescript (Typescript is compiled into JavaScript).<br />
<br />
We will discover the Angular 2 architecture, directives, components, services, routing, styling, events, validation, unit testing, and everything we need in our daily work<br />
<br />
<a href="http://www.angulartypescript.com/angular-2-data-binding/">http://www.angulartypescript.com/angular-2-data-binding/</a><br />
Data binding is the mechanism used to ensure the linking between what a user see on the screen and the data value in our class. (Front <-> Back)<br />
<br />
Angular 2 uses a Framework to manage the Data binding. Binding is 2 way - you type into the field and the object gets updated. Update the object and the control is updated.<br />
<br />
All what you need to do is to declare the binding between a source and a target.<br />
<br />
Example : <input type=’’Text’’ [(target)] = “expression” value=’myData’><br />
<br />
<ul style="border: 0px; box-sizing: border-box; color: #2b2b2b; font-family: Roboto, sans-serif; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 24px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">One-way</span> (from <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">data</span> to <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">view</span> –>):</li>
</ul>
<div style="border: 0px; box-sizing: border-box; color: #2b2b2b; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Interpolation : {{<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">expression</span>}}<br />
Property : [<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">target</span>]<br />
Attribute : [<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">attr</span>.]<br />
Class : [<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">class</span>.]<br />
Style :[<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">style</span>.]</div>
<ul style="border: 0px; box-sizing: border-box; color: #2b2b2b; font-family: Roboto, sans-serif; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 24px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">One-way</span> (from <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">view</span> to <span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">data</span> <–)</li>
</ul>
<div style="border: 0px; box-sizing: border-box; color: #2b2b2b; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Event : (<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">click</span>)= ‘’<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">expression</span> ‘’</div>
<ul style="border: 0px; box-sizing: border-box; color: #2b2b2b; font-family: Roboto, sans-serif; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 24px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Two-way</span> (<—->)</li>
</ul>
<div style="border: 0px; box-sizing: border-box; color: #2b2b2b; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
Two-way : [(<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">target</span>)] = “<span style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">expression</span>“</div>
<div style="border: 0px; box-sizing: border-box; color: #2b2b2b; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 24px; outline: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<br />
<hr class="watch-sidebar-separation-line" style="background: rgb(255, 255, 255); border-bottom-color: rgb(226, 226, 226); border-bottom-style: solid; border-image: initial; border-left: 0px; border-right: 0px; border-top: 0px; font-family: Roboto, arial, sans-serif; font-size: 13px; margin: 0px 5px 15px; padding: 0px;" />
<div class="watch-sidebar-body" style="background: rgb(255, 255, 255); border: 0px; font-family: Roboto, arial, sans-serif; font-size: 13px; margin: 0px; padding: 0px;">
<ul class="video-list" id="watch-related" style="background: transparent; border: 0px; list-style: none; margin: 0px; padding: 0px;">
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCoQpDAYASITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCoQpDAYASITCIvP66SykNICFURITgodNqwHTSj4HUCwyoSx-f-g8P8B" href="https://www.youtube.com/watch?v=_-CD_5YhJTA&t=1015s" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch"><span aria-describedby="description-id-884750" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCWv7vMbMWH4-V0ZXdmDpPBA" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Programming with Mosh</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">502,026 views</span></a></div>
<div class="thumb-wrapper contains-percent-duration-watched" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCoQpDAYASITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCoQpDAYASITCIvP66SykNICFURITgodNqwHTSj4HUCwyoSx-f-g8P8B" href="https://www.youtube.com/watch?v=_-CD_5YhJTA&t=1015s" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="_-CD_5YhJTA" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/_-CD_5YhJTA/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=9wfQstZprhbY21VECSeeySi9Ww8" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px 0px 4px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">54:13</span></span></a><span class="resume-playback-background" style="background: rgb(238, 238, 238); border: 0px; bottom: 0px; height: 4px; left: 0px; margin: 0px; opacity: 0.6; padding: 0px; position: absolute; width: 168px;"></span><span class="resume-playback-progress-bar" style="background: rgb(230, 33, 23); border: 0px; bottom: 0px; height: 4px; left: 0px; margin: 0px; opacity: 1; padding: 0px; position: absolute; width: 55.4375px;"></span></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCkQpDAYAiITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCkQpDAYAiITCIvP66SykNICFURITgodNqwHTSj4HUD31__Z3q7-z8EB" href="https://www.youtube.com/watch?v=wZ_5des_6_c" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Angular.js 2 Tutorial - Full app in 20 Minutes"><span aria-describedby="description-id-701405" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Angular.js 2 Tutorial - Full app in 20 Minutes</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCSJbGtTlrDami-tDGPUV9-w" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Mindspace</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">82,187 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCkQpDAYAiITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCkQpDAYAiITCIvP66SykNICFURITgodNqwHTSj4HUD31__Z3q7-z8EB" href="https://www.youtube.com/watch?v=wZ_5des_6_c" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="wZ_5des_6_c" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/wZ_5des_6_c/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EyOFN5SvfmSlam_EYo3WrnBkN7g" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">20:09</span></span></a><span class="thumb-menu dark-overflow-action-menu video-actions" style="background: transparent; border: 0px; bottom: 2px; cursor: pointer; display: block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 2px;"><button aria-expanded="false" aria-haspopup="true" class="yt-uix-button-reverse flip addto-watch-queue-menu spf-nolink hide-until-delayloaded yt-uix-button yt-uix-button-dark-overflow-action-menu yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup yt-uix-button-empty" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 28px; margin: 0px; outline: 0px; padding: 0px 5px 0px 10px; vertical-align: middle; white-space: nowrap; word-wrap: normal;" type="button"></button></span><button class="yt-uix-button yt-uix-button-size-small yt-uix-button-default yt-uix-button-empty yt-uix-button-has-icon no-icon-markup addto-button addto-queue-button video-actions spf-nolink hide-until-delayloaded addto-tv-queue-button yt-uix-tooltip" data-style="tv-queue" data-tooltip-text="Queue" data-video-ids="wZ_5des_6_c" style="background: rgb(248, 248, 248); border-color: rgb(211, 211, 211); border-radius: 2px; border-style: solid; border-width: 1px; bottom: 2px; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px; color: #333333; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 22px; margin: 0px; outline: 0px; padding: 0px; position: absolute; right: -60px; vertical-align: middle; white-space: nowrap; width: 22px; word-wrap: normal;" title="Queue" type="button"></button></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCgQpDAYAyITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCgQpDAYAyITCIvP66SykNICFURITgodNqwHTSj4HUDVv6WukP6A08YB" href="https://www.youtube.com/watch?v=xqYD8QXJX9U" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Learn TypeScript for beginners"><span aria-describedby="description-id-917312" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Learn TypeScript for beginners</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCHI5xgQujSyqz_UyKdLFaqw" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">.NET Interview Preparation videos</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">33,945 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCgQpDAYAyITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCgQpDAYAyITCIvP66SykNICFURITgodNqwHTSj4HUDVv6WukP6A08YB" href="https://www.youtube.com/watch?v=xqYD8QXJX9U" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="xqYD8QXJX9U" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/xqYD8QXJX9U/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Aq-eQjxrRTJ40f8X_l7BDj75tEw" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">46:06</span></span></a><span class="thumb-menu dark-overflow-action-menu video-actions" style="background: transparent; border: 0px; bottom: 2px; cursor: pointer; display: block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 2px;"><button aria-expanded="false" aria-haspopup="true" class="yt-uix-button-reverse flip addto-watch-queue-menu spf-nolink hide-until-delayloaded yt-uix-button yt-uix-button-dark-overflow-action-menu yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup yt-uix-button-empty" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 28px; margin: 0px; outline: 0px; padding: 0px 5px 0px 10px; vertical-align: middle; white-space: nowrap; word-wrap: normal;" type="button"></button></span><button class="yt-uix-button yt-uix-button-size-small yt-uix-button-default yt-uix-button-empty yt-uix-button-has-icon no-icon-markup addto-button addto-queue-button video-actions spf-nolink hide-until-delayloaded addto-tv-queue-button yt-uix-tooltip" data-style="tv-queue" data-tooltip-text="Queue" data-video-ids="xqYD8QXJX9U" style="background: rgb(248, 248, 248); border-color: rgb(211, 211, 211); border-radius: 2px; border-style: solid; border-width: 1px; bottom: 2px; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px; color: #333333; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 22px; margin: 0px; outline: 0px; padding: 0px; position: absolute; right: -60px; vertical-align: middle; white-space: nowrap; width: 22px; word-wrap: normal;" title="Queue" type="button"></button></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCcQpDAYBCITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCcQpDAYBCITCIvP66SykNICFURITgodNqwHTSj4HUDm89eAvvGL5KAB" href="https://www.youtube.com/watch?v=oMgvi-AV-eY" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Learn Angular 2 for beginners ( step by step)"><span aria-describedby="description-id-803468" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Learn Angular 2 for beginners ( step by step)</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCH912uDFX3sIaPXMrJa9X_w" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">QuestPond</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">44,794 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCcQpDAYBCITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCcQpDAYBCITCIvP66SykNICFURITgodNqwHTSj4HUDm89eAvvGL5KAB" href="https://www.youtube.com/watch?v=oMgvi-AV-eY" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="oMgvi-AV-eY" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/oMgvi-AV-eY/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=6fGfnCUd7fcne2WVLWRQJqTCgSc" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">52:17</span></span></a></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCYQpDAYBSITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCYQpDAYBSITCIvP66SykNICFURITgodNqwHTSj4HUDglLett5GG3yg=" href="https://www.youtube.com/watch?v=KL4Yi3WtymA" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Getting Started with Angular2 and Typescript"><span aria-describedby="description-id-45455" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Getting Started with Angular2 and Typescript</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCQcF2ObH_FM-NzdRJ8IeNcQ" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Jim Cummins</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">50,206 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCYQpDAYBSITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCYQpDAYBSITCIvP66SykNICFURITgodNqwHTSj4HUDglLett5GG3yg=" href="https://www.youtube.com/watch?v=KL4Yi3WtymA" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="KL4Yi3WtymA" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/KL4Yi3WtymA/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=vakm1-0c7Q5S6AezLCcOoLFe2MM" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">40:31</span></span></a><span class="thumb-menu dark-overflow-action-menu video-actions" style="background: transparent; border: 0px; bottom: 2px; cursor: pointer; display: block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 2px;"><button aria-expanded="false" aria-haspopup="true" class="yt-uix-button-reverse flip addto-watch-queue-menu spf-nolink hide-until-delayloaded yt-uix-button yt-uix-button-dark-overflow-action-menu yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup yt-uix-button-empty" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 28px; margin: 0px; outline: 0px; padding: 0px 5px 0px 10px; vertical-align: middle; white-space: nowrap; word-wrap: normal;" type="button"></button></span><button class="yt-uix-button yt-uix-button-size-small yt-uix-button-default yt-uix-button-empty yt-uix-button-has-icon no-icon-markup addto-button addto-queue-button video-actions spf-nolink hide-until-delayloaded addto-tv-queue-button yt-uix-tooltip" data-style="tv-queue" data-video-ids="KL4Yi3WtymA" style="background: rgb(248, 248, 248); border-color: rgb(211, 211, 211); border-radius: 2px; border-style: solid; border-width: 1px; bottom: 2px; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px; color: #333333; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 22px; margin: 0px; outline: 0px; padding: 0px; position: absolute; right: -60px; vertical-align: middle; white-space: nowrap; width: 22px; word-wrap: normal;" title="Queue" type="button"></button></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCUQpDAYBiITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCUQpDAYBiITCIvP66SykNICFURITgodNqwHTSj4HUCn7rHVx7ntmvsB" href="https://www.youtube.com/watch?v=-zW1zHqsdyc&t=768s" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Angular 2 In 60 Minutes"><span aria-describedby="description-id-649653" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Angular 2 In 60 Minutes</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UC29ju8bIPH5as8OGnQzwJyA" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Traversy Media</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">171,539 views</span></a></div>
<div class="thumb-wrapper contains-percent-duration-watched" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCUQpDAYBiITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCUQpDAYBiITCIvP66SykNICFURITgodNqwHTSj4HUCn7rHVx7ntmvsB" href="https://www.youtube.com/watch?v=-zW1zHqsdyc&t=768s" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="-zW1zHqsdyc" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/-zW1zHqsdyc/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=5UX8I1-xBUQQ-r0C-Fd8LfeRfA8" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px 0px 4px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">58:02</span></span></a><span class="resume-playback-background" style="background: rgb(238, 238, 238); border: 0px; bottom: 0px; height: 4px; left: 0px; margin: 0px; opacity: 0.6; padding: 0px; position: absolute; width: 168px;"></span><span class="resume-playback-progress-bar" style="background: rgb(230, 33, 23); border: 0px; bottom: 0px; height: 4px; left: 0px; margin: 0px; opacity: 1; padding: 0px; position: absolute; width: 40.3125px;"></span></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCQQpDAYByITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCQQpDAYByITCIvP66SykNICFURITgodNqwHTSj4HUD_yqymqOCG4kA=" href="https://www.youtube.com/watch?v=QMQbAoTLJX8" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Simple Angular 2 App With Angular CLI"><span aria-describedby="description-id-44040" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Simple Angular 2 App With Angular CLI</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UC29ju8bIPH5as8OGnQzwJyA" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Traversy Media</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">57,916 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCQQpDAYByITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCQQpDAYByITCIvP66SykNICFURITgodNqwHTSj4HUD_yqymqOCG4kA=" href="https://www.youtube.com/watch?v=QMQbAoTLJX8" rel="spf-prefetch" style="background: none; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="QMQbAoTLJX8" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/QMQbAoTLJX8/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=lcapBwzzkKi4BgxWJ46SQt2ZPGU" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /></span></a></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<br /></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCMQpDAYCCITCIvP66SykNICFURITgodNqwHTSj4HTIKd2F0Y2gtdnJlY0i6-eGF25CrvVM" data-visibility-tracking="CCMQpDAYCCITCIvP66SykNICFURITgodNqwHTSj4HUDaw4PIioHMzBY=" href="https://www.youtube.com/watch?v=FpkwCKkA4do" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="FpkwCKkA4do" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><br /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">56:51</span></span></a></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCIQpDAYCSITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCIQpDAYCSITCIvP66SykNICFURITgodNqwHTSj4HUCozdKKsOKiwM4B" href="https://www.youtube.com/watch?v=zoCLEwFUpqg" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Build Angular 2 apps with TypeScript and Visual Studio Code"><span aria-describedby="description-id-191064" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Build Angular 2 apps with TypeScript and Visual Studio Code</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCrhJmfAGQ5K81XQ8_od1iTg" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Microsoft Ignite</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">58,254 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCIQpDAYCSITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCIQpDAYCSITCIvP66SykNICFURITgodNqwHTSj4HUCozdKKsOKiwM4B" href="https://www.youtube.com/watch?v=zoCLEwFUpqg" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="zoCLEwFUpqg" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/zoCLEwFUpqg/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=MDdvjf9IeCv9akXpR_M1Xf4DdvU" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">1:15:39</span></span></a></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCEQpDAYCiITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCEQpDAYCiITCIvP66SykNICFURITgodNqwHTSj4HUCG7rGW6YeqrV4=" href="https://www.youtube.com/watch?v=XlqoPpLMdwY" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Thinking in Angular 2 - An overview of key Angular 2 concepts for JavaScript developers"><span aria-describedby="description-id-386547" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Thinking in Angular 2 - An overview of key Angular 2 concepts for JavaScript developers</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCK9TqOjs5sq2vAu4vUdgyqg" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Rangle.io</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">63,262 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCEQpDAYCiITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCEQpDAYCiITCIvP66SykNICFURITgodNqwHTSj4HUCG7rGW6YeqrV4=" href="https://www.youtube.com/watch?v=XlqoPpLMdwY" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="XlqoPpLMdwY" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/XlqoPpLMdwY/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=JS7mUCXYlASwep3pHnlaxzxmqIY" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">1:08:48</span></span></a></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CCAQpDAYCyITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCAQpDAYCyITCIvP66SykNICFURITgodNqwHTSj4HUDe7cu_xe6KidEB" href="https://www.youtube.com/watch?v=0RIrdFfy9t4" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Angular 2 Http Client (Accessing REST Web Services) Quickstart Tutorial 2016"><span aria-describedby="description-id-695154" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Angular 2 Http Client (Accessing REST Web Services) Quickstart Tutorial 2016</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCLXQoK41TOcIsWtY-BgB_kQ" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">CodingTheSmartWay.com</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">26,516 views</span></a></div>
<div class="thumb-wrapper" style="background: transparent; border: 0px; height: 94px; margin: 0px 5px; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 168px;">
<a aria-hidden="true" class="thumb-link spf-link yt-uix-sessionlink spf-link" data-sessionlink="itct=CCAQpDAYCyITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CCAQpDAYCyITCIvP66SykNICFURITgodNqwHTSj4HUDe7cu_xe6KidEB" href="https://www.youtube.com/watch?v=0RIrdFfy9t4" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" tabindex="-1"><span class="yt-uix-simple-thumb-wrap yt-uix-simple-thumb-related" data-vid="0RIrdFfy9t4" style="background: transparent; border: 0px; display: inline-block; float: left; height: 94px; margin: 0px 8px 0px 0px; overflow: hidden; padding: 0px; position: relative;" tabindex="0"><img alt="" aria-hidden="true" height="94" src="https://i.ytimg.com/vi/0RIrdFfy9t4/hqdefault.jpg?custom=true&w=168&h=94&stc=true&jpg444=true&jpgq=90&sp=68&sigh=raFQP2FSMxAC24qeWmoU-8Xp5rI" style="background: transparent; border: 0px; margin: 0px; padding: 0px; position: relative; top: 0px;" width="168" /><span class="video-time" style="background: rgb(0 , 0 , 0); border: 0px; bottom: 2px; color: rgb(255 , 255 , 255); display: inline-block; font-size: 11px; height: 14px; line-height: 14px; margin: 0px; opacity: 0.75; padding: 0px 4px; position: absolute; right: 2px; vertical-align: top;">33:56</span></span></a></div>
<div class="yt-uix-menu-container related-item-action-menu" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px;">
<div class="yt-uix-menu yt-uix-menu-flipped hide-until-delayloaded" style="background: transparent; border: 0px; display: inline-block; margin: 0px; padding: 0px; position: relative;">
<button aria-haspopup="true" aria-label="Action menu." aria-pressed="false" class="yt-uix-button yt-uix-button-size-default yt-uix-button-action-menu yt-uix-button-empty yt-uix-button-has-icon no-icon-markup yt-uix-menu-trigger" role="button" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: initial; border-radius: 2px; border-style: none; border-width: initial; box-shadow: none; cursor: pointer; font-family: Roboto, arial, sans-serif; height: 10px; margin: -10px -1px 0px 0px; opacity: 0; outline: 0px; padding: 0px; vertical-align: middle; white-space: nowrap; width: 10px; word-wrap: normal;" type="button"></button></div>
</div>
</div>
</li>
<li class="video-list-item related-list-item show-video-time related-list-item-compact-video" style="background: transparent; border: 0px; margin: 0px 0px 15px; padding: 0px; position: relative;"><div class="related-item-dismissable" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">
<div class="content-wrapper" style="background: transparent; border: 0px; margin: 0px 0px 0px 181px; padding: 0px;">
<a class=" content-link spf-link yt-uix-sessionlink spf-link " data-sessionlink="itct=CB8QpDAYDCITCIvP66SykNICFURITgodNqwHTSj4HTIHcmVsYXRlZEi6-eGF25CrvVM" data-visibility-tracking="CB8QpDAYDCITCIvP66SykNICFURITgodNqwHTSj4HUC05dWEgLCcqNYB" href="https://www.youtube.com/watch?v=1lBxgACVcrQ" rel="spf-prefetch" style="background: transparent; border: 0px; color: #333333; cursor: pointer; display: block; margin: 0px; min-height: 94px; outline: 0px; overflow: hidden; padding: 0px; position: relative; text-decoration: none;" title="Angular 2 force awakens with John Papa - Webinar Recording"><span aria-describedby="description-id-558991" class="title" dir="ltr" style="background: transparent; border: 0px; cursor: pointer; display: block; font-size: 14px; line-height: 1.2; margin: 0px 15px 2px 0px; max-height: 3.6em; overflow: hidden; padding: 0px;">Angular 2 force awakens with John Papa - Webinar Recording</span><span class="stat attribution" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;"><span class="g-hovercard" data-name="related" data-ytid="UCbrXRQHV4TOU4Pqzw325Z1A" style="background: transparent; border: 0px; margin: 0px; padding: 0px;">Pluralsight</span></span><span class="stat view-count" style="background: transparent; border: 0px; color: #767676; display: block; font-size: 11px; height: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; white-space: nowrap;">18,754 views</span></a></div>
</div>
</li>
</ul>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-82199183033421034452017-01-27T07:27:00.003-08:002017-01-27T07:27:56.389-08:00Intertech Angular 2 Training<div dir="ltr" style="text-align: left;" trbidi="on">
Angular 2 Training<br />
Not bad for 3 days and $2,225<br />
<a href="https://www.blogger.com/goog_264017678"><br /></a>
<a href="https://www.intertech.com/Training/Web-Dev/AngularJS/AngularJS/Angular-2-Training">https://www.intertech.com/Training/Web-Dev/AngularJS/AngularJS/Angular-2-Training</a><br />
Course ID: WAS-2533 Duration: 3 Days Request More Information<br />
Upcoming Classes Description Course Outline Related Course Free Resources Search More Courses Return To Top<br />
Upcoming Classes <br />
Start Date<span class="Apple-tab-span" style="white-space: pre;"> </span>Time<span class="Apple-tab-span" style="white-space: pre;"> </span>Location<span class="Apple-tab-span" style="white-space: pre;"> </span>Price<span class="Apple-tab-span" style="white-space: pre;"> </span>Classroom<span class="Apple-tab-span" style="white-space: pre;"> </span>Live Online<br />
Feb 06, 2017<span class="Apple-tab-span" style="white-space: pre;"> </span>9:00 AM - 5:00 PM CST<span class="Apple-tab-span" style="white-space: pre;"> </span>Eagan, MN<span class="Apple-tab-span" style="white-space: pre;"> </span>$2,225.00<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Apr 24, 2017<span class="Apple-tab-span" style="white-space: pre;"> </span>9:00 AM - 5:00 PM CST<span class="Apple-tab-span" style="white-space: pre;"> </span>Eagan, MN<span class="Apple-tab-span" style="white-space: pre;"> </span>$2,225.00<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Jun 05, 2017<span class="Apple-tab-span" style="white-space: pre;"> </span>9:00 AM - 5:00 PM CST<span class="Apple-tab-span" style="white-space: pre;"> </span>Eagan, MN<span class="Apple-tab-span" style="white-space: pre;"> </span>$2,225.00<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
Nov 08, 2017<span class="Apple-tab-span" style="white-space: pre;"> </span>9:00 AM - 5:00 PM CST<span class="Apple-tab-span" style="white-space: pre;"> </span>Eagan, MN<span class="Apple-tab-span" style="white-space: pre;"> </span>$2,225.00<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span>Enroll<span class="Apple-tab-span" style="white-space: pre;"> </span>Click to get an alert on class status. See if a class is Guaranteed to Run (GTR) or get notified when it is GTR.<br />
On Site/Private<br />
Can't find a class that fits right for you? Contact us to inquire about scheduling your own private class<br />
<br />
Contact Us<br />
Description<br />
Angular 2 is a complete rewrite of the Angular framework, incorporating the latest standards in JavaScript and unifying many of the diverse elements found in AngularJS 1.x. The new Angular 2 training course includes a comprehensive introduction to AngularJS version 2.0, introduction to TypeScript and ES6, Components, Form Handling, Data Binding and much more. See full details below.<br />
<br />
Our Angular 2 training is offered as Instructor led in classroom, live online, and onsite. Contact us now at 651.288.7109 or reach us through the Request More Information button at the top right to reserve a seat in one of our upcoming classes or schedule our instructors for a private class at your site.<br />
<br />
Bring This Course To You<br />
For groups of 5 or more, let Intertech bring this course to your location. Customized versions tailored towards your objectives are also available. Learn More<br />
Course Outline<br />
Introduction to Angular 2<br />
<br />
What is Angular 2?<br />
Why Angular 2?<br />
Scope and Goal of Angular 2<br />
Installing and using Angular 2<br />
Building Blocks of an Angular 2 Application<br />
A simple application<br />
Introduction to TypeScript and ES6<br />
<br />
Introduction to TypeScript<br />
The type system<br />
Defining class and interface<br />
Defining a module<br />
Importing a module<br />
Generics<br />
Components<br />
<br />
What is a component?<br />
Developing a simple component.<br />
Templates for a component.<br />
Component lifecycle<br />
Data Binding<br />
<br />
What is data binding<br />
One way data binding<br />
Two way data binding<br />
Event binding<br />
Working with Forms<br />
<br />
Using Input Text Box<br />
Using Radio Buttons<br />
Using Checkbox<br />
Using Checkbox - Advanced<br />
Using Select<br />
Using Select – Advanced<br />
Disabling an Input<br />
Detecting model changes using getter and setter<br />
Basic Directives<br />
<br />
What are directives?<br />
Controlling Element Visibility<br />
Adding and Removing an Element<br />
Dynamically Changing Style Class<br />
Setting Image Source<br />
Setting Hyperlink Dynamically<br />
Advanced Directives<br />
<br />
Looping using ngFor<br />
Conditional rendering using ngSwitch<br />
ngSwitchWhen<br />
Service and Dependency Injection<br />
<br />
What is a service?<br />
Defining a service<br />
Injecting a service to a component<br />
Application wide dependency injection<br />
@Injectable classes<br />
Multiple service instances<br />
@Optional and @Host<br />
HTTP Client<br />
<br />
The HTTP providers<br />
Injecting the providers<br />
Making a GET call<br />
Handling error<br />
More about Observables<br />
Making a POST request<br />
Working with headers<br />
Making sequential calls<br />
Making parallel calls<br />
Introduction to Custom Directives<br />
<br />
Types of directives - component, structural and attribute<br />
Creating a basic attribute directive<br />
Using the attribute directive<br />
Handling event from an attribute directive<br />
Binding input to an attribute directive<br />
Advanced Custom Directives<br />
<br />
About structural directives<br />
Understand how ngIf works<br />
Using the <template> tag<br />
Using asterisk<br />
Creating your own structural directive<br />
Using the structural directive<br />
Binding input to a structural directive<br />
Advanced Form Handling<br />
<br />
Introduction to Form Validation<br />
Validation and Model Binding<br />
Input Type Validation<br />
Validation Directives<br />
A Note About "required"<br />
Detecting Validation State<br />
Showing Error Message<br />
Other Status Variables<br />
Styling Input Fields<br />
Styling Other Areas<br />
Pipe<br />
<br />
What is a pipe?<br />
Example pipe usage.<br />
Passing parameters to a pipe<br />
Chaining pipes<br />
DatePipe<br />
NumberPipe<br />
CurrencyPipe<br />
UpperCasePipe and LowerCasePipe<br />
DecimalPipe<br />
Developing a custom pipe<br />
Change detection from a pipe<br />
Pure and Impure Pipes<br />
Introduction to Single Page Application<br />
<br />
What is a Single Page Application (SPA)?<br />
How is it Any Different?<br />
Why Create SPA?<br />
It's Not All or Nothing<br />
Challenges to SPA<br />
Implementing SPA Using Angular 2<br />
Simple SPA Using Visibility Control<br />
SPA using Dynamic Templates for a Component<br />
Example of Dynamic Template<br />
SPA Using Routing<br />
Routing<br />
<br />
Why use routing?<br />
Defining a route table<br />
Navigation using hyperlink<br />
Navigation using code<br />
Supplying parameters to a route URL<br />
<br /></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com1tag:blogger.com,1999:blog-8878501298548928127.post-38938635099265791262017-01-12T14:51:00.001-08:002017-01-12T14:53:03.215-08:00Alternatives to Native Mobile App Development<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="entry-title" style="background-color: #003472; box-sizing: border-box; color: white; font-family: "Avenir Next", Avenir, "Helvetica Neue", Hevetica, sans-serif; font-size: 32px; font-weight: 500; line-height: 1.3; margin: 25px auto 0px; max-width: 600px; text-align: center;">
<a href="https://auth0.com/blog/alternatives-to-native-mobile-app-development/" style="background-color: transparent; box-sizing: border-box; color: white; outline-offset: -2px; outline: -webkit-focus-ring-color auto 5px; text-decoration: none;" title="Published: January 10, 2017"><span itemprop="headline" style="box-sizing: border-box;">Alternatives to Native Mobile App Development</span></a></h1>
<div class="entry-content" itemprop="description" style="background-color: #003472; box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; line-height: 2; margin: 0px auto; text-align: center;">
<div class="selectionShareable" style="box-sizing: border-box; color: white; margin: 10px auto 40px; max-width: 580px; opacity: 0.7;">
A look at five frameworks for building cross-platform mobile applications and how they stack up against each other.</div>
</div>
https://auth0.com/blog/alternatives-to-native-mobile-app-development/<br />
<br />
<a href="https://ionicframework.com/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">Ionic</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> is perhaps the most widely known cross-platform mobile framework. It allows developers to build iOS and Android applications with web technologies such as HTML, CSS, and JavaScript. Ionic is built on top of </span><a href="https://cordova.apache.org/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">Cordova</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> which enables access to various device features such as geolocation, push notifications, camera, and others. Ionic 1.x utilizes </span><a href="https://angularjs.org/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">Angular 1.x</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;">, while Ionic 2, the latest version of the framework, utilizes </span><a href="https://angular.io/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">Angular 2+</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;">.</span><br />
<span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"><br /></span>
<a href="http://phonegap.com/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">PhoneGap</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> is very similar to Ionic in many respects. It too allows developers to build cross-platform mobile applications with web technologies and is built on top of Cordova. PhoneGap is not tied to any specific JavaScript framework, so developers have more choice in how they build their applications. PhoneGap boasts an ecosystem comprised of a desktop app, mobile app, and a cloud service called </span><a href="https://build.phonegap.com/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">PhoneGap Build</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> for building and deploying an application.</span><br />
<span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"><br /></span>
<br />
<div class="selectionShareable" style="background-color: white; box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; margin-bottom: 14px;">
<a href="https://www.xamarin.com/" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Xamarin</a> comes from <a href="https://microsoft.com/" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Microsoft</a> and takes a unique approach to cross-platform app development. Xamarin applications are written entirely in C#. Xamarin then compiles the C# code into native iOS and Android distributions. The underlying layer on which Xamarin is built on top of is <a href="http://www.mono-project.com/" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Mono</a> and this enables cross-platform development. The benefit of building applications with Xamarin compared to Cordova-based frameworks is that apps built with Xamarin make use each platform's native API's. This means that Xamarin apps compile down to native iOS and Android applications and behave as such.</div>
<div class="selectionShareable" style="background-color: white; box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; margin-bottom: 14px;">
Xamarin is not a code once, run everywhere solution. While you can achieve a high level of code shareability, you will more than likely need to write specific code for iOS and Android versions of your app.</div>
<a href="https://developers.google.com/web/progressive-web-apps/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">Progressive Web Apps</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> aim to make web applications behave like their native counterparts. This project comes to us from </span><a href="https://google.com/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">Google</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> and presents a very interesting proposition. Progressive Web Apps aim to be reliable, fast, and engaging. This means that apps should load fast, present an engaging and fluid user experience, and support native features like push notifications or offline access. The PWA spec will add new features and functionality over time. Developers can then choose how many features they wish to implement, possibly making PWA the most flexible way to reach mobile users.</span><br />
<br />
<a href="https://facebook.github.io/react-native/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">React Native</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> comes to us from </span><a href="https://facebook.com/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">Facebook</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"> and presents a framework for building cross-platform mobile applications with </span><a href="https://facebook.github.io/react/" style="background-color: white; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; text-decoration: none;" target="_blank">React</a><span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;">. React Native is comparable to Xamarin, wherein apps created with React Native are indistinguishable from native iOS and Android apps written in Objective-C or Java.</span><br />
<span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"><br /></span>
<div style="background-color: white; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 14px;">
<a class="m_4595439742417459694title" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://www.codeproject.com/News.aspx?ntag%3D19837497547576268%26_z%3D3846742&source=gmail&ust=1484342779025000&usg=AFQjCNFnhbUxDYDxMG64BZpojpMV11nlUw" href="https://www.codeproject.com/News.aspx?ntag=19837497547576268&_z=3846742" style="color: rgb(189, 114, 0) !important; display: block; font-size: 22px; line-height: 27.5px; margin-bottom: 13px; text-decoration: none;" target="_blank">Cross-Platform Mobile Applications with React Native</a></div>
<span style="background-color: white; color: rgba(0 , 0 , 0 , 0.870588); font-family: , serif; font-size: 20px;"></span><br />
<div class="m_4595439742417459694description" style="background-color: white; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 14px;">
React Native, an open-source framework from Facebook, builds on the popular React JavaScript framework, allowing developers to create cross-platform iOS and Android applications using JavaScript.</div>
<div class="m_4595439742417459694description" style="background-color: white; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 14px;">
<br /></div>
<div class="m_4595439742417459694description" style="background-color: white;">
<span style="font-family: Segoe UI, Arial, Helvetica, sans-serif;"><span style="font-size: 14px;">differs from other cross-platform frameworks that use JavaScript (such as PhoneGap, Titanium, etc.) because, although the application logic runs in JavaScript, the resulting application UI is 100% native. This means that you don’t have to deal with many of the compromises usually associated with managing an HTML5-based UI.</span></span></div>
<span style="background-color: white; color: #0b0087; font-size: 20px;"><a href="http://www.codemag.com/article/1701071">http://www.codemag.com/article/1701071</a></span>
<br />
<h2 style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Avenir Next", avenir-next-web, "Helvetica Neue", Hevetica, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.5; margin: 30px 0px 25px;">
Authentication with Hybrid App Frameworks</h2>
<div class="selectionShareable" style="background-color: white; box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; margin-bottom: 14px;">
Mobile applications present various user and identity challenges. Luckily, <a href="https://auth0.com/" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Auth0</a>has your back. Our identity solution is platform agnostic and we have plenty of resources to get you up and running as quickly as possible. <a href="https://www.blogger.com/null" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box;" target="_blank">Sign up</a> for a free Auth0 account, and then follow any of these guides to get user authentication for your app in no time at all:</div>
<ul style="background-color: white; box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); font-family: minion-pro, serif; font-size: 20px; margin: 40px 0px; padding-left: 0px;">
<li style="box-sizing: border-box; list-style: none; padding-left: 25px; position: relative;"><span style="box-sizing: border-box; font-weight: 700;">Ionic</span> - <a href="https://auth0.com/docs/quickstart/native/ionic" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Quickstart (Ionic)</a>, <a href="https://auth0.com/docs/quickstart/native/ionic2" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Quickstart (Ionic 2)</a>, <a href="https://auth0.com/blog/ionic-2-authentication-how-to-secure-your-mobile-app-with-jwt/" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Tutorial</a></li>
<li style="box-sizing: border-box; list-style: none; padding-left: 25px; position: relative;"><span style="box-sizing: border-box; font-weight: 700;">PhoneGap</span> - <a href="https://auth0.com/docs/quickstart/native/phonegap" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Quickstart</a></li>
<li style="box-sizing: border-box; list-style: none; padding-left: 25px; position: relative;"><span style="box-sizing: border-box; font-weight: 700;">Xamarin</span> - <a href="https://auth0.com/docs/quickstart/native/xamarin" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Quickstart</a>, <a href="https://auth0.com/blog/xamarin-authentication-and-cross-platform-app-development/" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Tutorial</a></li>
<li style="box-sizing: border-box; list-style: none; padding-left: 25px; position: relative;"><span style="box-sizing: border-box; font-weight: 700;">React Native</span> - <a href="https://auth0.com/docs/quickstart/native/react-native-ios" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Quickstart (iOS)</a>, <a href="https://auth0.com/docs/quickstart/native/react-native-android" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Quickstart (Android)</a></li>
<li style="box-sizing: border-box; list-style: none; padding-left: 25px; position: relative;"><span style="box-sizing: border-box; font-weight: 700;">Progressive Web Apps</span> - <a href="https://auth0.com/blog/introduction-to-progressive-apps-part-one/" style="background-color: transparent; background-position: 0px 23px; background-repeat: repeat-x; background-size: 2px 2px; border-bottom: 1px solid rgba(0, 0, 0, 0.498039); box-sizing: border-box; color: rgba(0, 0, 0, 0.870588); text-decoration: none;" target="_blank">Tutorial</a></li>
</ul>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com1tag:blogger.com,1999:blog-8878501298548928127.post-9393773944892433262017-01-11T08:49:00.003-08:002017-01-11T08:49:37.110-08:00Blog » General » Building a Universal Windows Platform (UWP) Application (Part 1) – Using Template10 Building a Universal Windows Platform (UWP) Application (Part 1) – Using Template10<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="breadcrumbs" style="background: rgb(255, 255, 255); border: 0px; color: #636363; font-family: "Open Sans"; font-size: 11px; margin: 0px; outline: 0px; padding: 0px; position: relative; top: -35px; vertical-align: baseline;">
<div class="breadcrumb breadcrumbs" style="background: transparent; border: 0px; display: inline; margin: 0px; outline: 0px; padding: 0px; position: relative; top: -35px; vertical-align: baseline;">
<div class="rdfa-breadcrumb" style="background: transparent; border: 0px; display: inline; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" xmlns:v="http://rdf.data-vocabulary.org/#">
<span style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" typeof="v:Breadcrumb"><a class="home" href="https://www.intertech.com/Blog/" property="v:title" rel="v:url" style="background: transparent; border: 0px; color: #333333; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;">Blog</a></span> <span class="separator" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">»</span> <span style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" typeof="v:Breadcrumb"><a href="https://www.intertech.com/Blog/uncategorized/" property="v:title" rel="v:url" style="background: transparent; border: 0px; color: #333333; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;" title="General">General</a></span> <span class="separator" style="background: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">»</span> Building a Universal Windows Platform (UWP) Application (Part 1) – Using Template10</div>
</div>
</div>
</div>
<div id="main" style="background: rgb(255, 255, 255); border: 0px; color: #636363; float: left; font-family: "Open Sans"; font-size: 11px; margin: 0px 40px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: 680px;">
<div class="post single clearfix" style="background: url("../../css/../images/sep_d.png") 0px 100% repeat-x; border: 0px; margin: 0px 0px 60px; outline: 0px; padding: 0px 0px 35px; vertical-align: baseline;">
<a href="https://www.intertech.com/Blog/building-universal-windows-platform-uwp-application-part-1-using-template10/" style="background: transparent; border: 0px; color: #7fb3e0; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;"><h1 style="background: transparent; border: 0px; font-size: 30px; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;">
Building a Universal Windows Platform (UWP) Application (Part 1) – Using Template10</h1>
</a><ul class="post-meta" style="background: transparent; border: 0px; list-style: none; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li class="author" style="background: transparent; border-bottom-color: rgb(229, 229, 229); border-bottom-style: dotted; border-image: initial; border-left-color: initial; border-left-style: initial; border-right-color: initial; border-right-style: initial; border-top-color: initial; border-top-style: initial; border-width: 0px 0px 1px; color: #959595; margin: 0px; outline: 0px; padding: 5px 0px; vertical-align: baseline;">By <a href="https://www.intertech.com/Blog/author/ed-glogowski/" rel="author" style="background: transparent; border: 0px; color: #7fb3e0; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;" title="Posts by Ed Glogowski">Ed Glogowski</a><a href="https://www.intertech.com/Blog/building-universal-windows-platform-uwp-application-part-1-using-template10/" plugin="Google Plus Authorship" rel="author" style="background: transparent; border: 0px; color: #7fb3e0; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;" title="Google Plus Profile for +">+</a></li>
<li class="date" style="background: url("../../css/../images/blog_icon_date.png") 0px 16px no-repeat; border: 0px; color: #959595; display: inline-block; margin: 0px 15px 0px 0px; outline: 0px; padding: 12px 0px 0px 15px; vertical-align: baseline;">September 29, 2016</li>
<li class="comments" style="background: url("../../css/../images/blog_icon_comments.png") 0px 15px no-repeat; border: 0px; color: #959595; display: inline-block; margin: 0px 15px 0px 0px; outline: 0px; padding: 12px 0px 0px 17px; vertical-align: baseline;"><a data-disqus-identifier="10164 https://www.intertech.com/Blog/?p=10164" href="https://www.intertech.com/Blog/building-universal-windows-platform-uwp-application-part-1-using-template10/#disqus_thread" style="background: transparent; border: 0px; color: #959595; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;">0 Comments</a></li>
<li class="ratings" style="background: transparent; border: 0px; color: #959595; display: inline-block; margin: 0px 15px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: auto;"><div class="post-ratings" data-nonce="79dadeee16" id="post-ratings-10164" itemscope="" itemtype="http://schema.org/Article" style="background: transparent; border: 0px; margin: 0px; opacity: 1; outline: 0px; padding: 0px; vertical-align: baseline; width: 60px;">
<img alt="1 Star" id="rating_10164_1" src="https://www.intertech.com/Blog/wp-content/plugins/wp-postratings/images/stars/rating_on.gif" style="background: transparent; border: 0px; cursor: pointer; display: inline-block; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; position: relative; top: 2px; vertical-align: baseline;" title="1 Star" /><img alt="2 Stars" id="rating_10164_2" src="https://www.intertech.com/Blog/wp-content/plugins/wp-postratings/images/stars/rating_on.gif" style="background: transparent; border: 0px; cursor: pointer; display: inline-block; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; position: relative; top: 2px; vertical-align: baseline;" title="2 Stars" /><img alt="3 Stars" id="rating_10164_3" src="https://www.intertech.com/Blog/wp-content/plugins/wp-postratings/images/stars/rating_on.gif" style="background: transparent; border: 0px; cursor: pointer; display: inline-block; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; position: relative; top: 2px; vertical-align: baseline;" title="3 Stars" /><img alt="4 Stars" id="rating_10164_4" src="https://www.intertech.com/Blog/wp-content/plugins/wp-postratings/images/stars/rating_on.gif" style="background: transparent; border: 0px; cursor: pointer; display: inline-block; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; position: relative; top: 2px; vertical-align: baseline;" title="4 Stars" /><img alt="5 Stars" id="rating_10164_5" src="https://www.intertech.com/Blog/wp-content/plugins/wp-postratings/images/stars/rating_on.gif" style="background: transparent; border: 0px; cursor: pointer; display: inline-block; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; position: relative; top: 2px; vertical-align: baseline;" title="5 Stars" /></div>
</li>
</ul>
<div class="post-entry" style="background: transparent; border: 0px; margin: 20px 0px 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline;">
<a href="https://www.intertech.com/Blog/building-universal-windows-platform-uwp-application-part-1-using-template10/" style="background: transparent; border: 0px; color: #7fb3e0; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;"><img class="image" src="https://www.intertech.com/Blog/wp-content/uploads/2016/09/BuildUWPAppPart1-560x224.png" style="background: transparent; border: 0px; color: #333333; display: block; height: auto; margin: 0px auto 23px; max-width: 100%; outline: 0px; padding: 0px; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;" /></a><div style="background: transparent; border: 0px; font-size: 14px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
I just rolled off a client recently that needed to build a Universal Windows Platform (UWP) application as part of their hardware and software solution. For those who aren’t yet familiar with UWP, you can check out <a href="https://msdn.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide" style="background: transparent; border: 0px; color: #7fb3e0; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease, opacity 0.2s ease-in-out, outline 0.2s ease; vertical-align: baseline;" target="_blank">this article by Tyler Whitney</a>.</div>
<div style="background: transparent; border: 0px; font-size: 14px; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
As many of you developers out there are aware, sometimes you have to build or bring with you a number of application infrastructure items before you can even get started with the core application logic. For example, you might need some helpers, services and base classes that make your job easier or allow you to start with your base patterns, such as, MVC, MVVM, etc.<a href="https://www.intertech.com/Blog/building-universal-windows-platform-uwp-application-part-1-using-template10/"> (continued in link) </a></div>
</div>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-4431270832238439902016-12-21T08:29:00.003-08:002016-12-21T08:29:58.609-08:00Single Page Application (SPA) for Enterprise App (Angular2 & WebApi) -<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 id="ctl00_ArticleTitle" itemprop="name" style="background-color: white; color: #333333; font-family: "Segoe UI", Arial, sans-serif; font-size: 29px; font-weight: 200; line-height: normal; margin: 0px 0px 15px; padding: 0px;">
<a href="https://www.codeproject.com/Articles/1139558/Single-Page-Application-SPA-for-Enterprise-App-Ang">Single Page Application (SPA) for Enterprise App (Angular2 & WebApi) - Part 1 - Overview</a></h1>
<div>
<br /></div>
<div>
<div class="header" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px;">
<div style="border: 0px; height: 34px; margin: 0px; padding: 0px;">
<div class="entry float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<img class="float-left avatar" id="ctl00_avatar" src="https://www.codeproject.com/script/Membership/ProfileImages/%7B5005edab-93b2-40ba-86e8-57c3faea97cd%7D.jpg" style="border: 0px; float: left; margin: 0px 10px 0px 0px; max-height: 48px; max-width: 48px; overflow: auto; padding: 0px;" /><div class="float-left" style="border: 0px; float: left; margin: 0px; padding: 0px;">
<span class="author" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/script/Membership/View.aspx?mid=3776391" rel="author" style="border: 0px; color: grey; margin: 0px; padding: 0px; text-decoration: none;">techcoaching</a></span>, <span class="date" content="2016-12-19 02:46:00" itemprop="dateModified" style="border: 0px; margin: 0px; padding: 0px;" title="Date last updated">18 Dec 2016</span> <a class="license" href="http://www.codeproject.com/info/cpol10.aspx" id="ctl00_LicenseLink" style="background-color: #eeeeee; border: 1px solid rgb(204, 204, 204); color: purple; font-family: "courier new", serif; margin: 0px 0px 0px 20px; padding: 0px 4px; text-decoration: none;" title="The Code Project Open License (CPOL)">CPOL</a><div class="tooltip anchorLink" id="ctl00_CurRat" name="CurRat_1139558" style="border: 0px; cursor: pointer; margin: 5px 0px 0px; padding: 0px; position: relative;">
<table cellpadding="0" cellspacing="0" class="small-text" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="nowrap" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span id="ctl00_ArticleRating_VI" style="border: 0px; margin: 0px; padding: 0px;"><div class="nowrap rating-stars-medium" style="border-radius: 5px; border: 0px; height: 18px; margin: 0px; padding: 2px; position: relative; width: 80px;">
<div class="clipped align-left float-left" style="border: 0px; float: left; height: 16px; margin: 0px; overflow: hidden; padding: 0px; width: 77px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-fill-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px;" /></div>
<div class="clipped" style="border: 0px; height: 16px; margin: 0px; overflow: hidden; padding: 0px; position: relative; width: 3px;">
<img src="https://codeproject.global.ssl.fastly.net/script/Ratings/Images/stars-empty-md.png" style="border: 0px; margin: 0px; max-width: 150px !important; overflow: auto; padding: 0px; position: absolute; right: 0px; top: 0px;" /></div>
</div>
</span></td><td class="nowrap" id="ctl00_ArticleRating_VR" style="border: 0px; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"> <span id="ctl00_ArticleRating_VotesR" style="border: 0px; margin: 0px; padding: 0px;"> <span class="rating" itemprop="ratingValue" style="border: 0px; margin: 0px; padding: 0px;">4.84</span> (<span class="count" itemprop="ratingCount" style="border: 0px; margin: 0px; padding: 0px;">70</span> votes)</span></td></tr>
</tbody></table>
</div>
</div>
</div>
<div class="float-right align-right voting-bar" id="ctl00_RateArticleRow" style="border: 0px; float: right; margin: -8px 0px 0px; padding: 0px; text-align: right !important;">
<div class="small-text" id="ctl00_RateArticle_RateItemWrapper" name="RateItem_1139558" style="border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;">
<table cellpadding="0" cellspacing="0" class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px; width: 100%px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-result align-right" id="ctl00_RateArticle_VoteResultDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 7px 0px 0px; text-align: right !important;"><span class="align-right" style="border: 0px; margin: 0px; padding: 0px;"></span></td><td align="right" class="voteTbl" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><table class="small-text" style="background-color: transparent; border: 0px; font-size: 12px !important; margin: 0px; padding: 0px;"><tbody style="border: 0px; margin: 0px; padding: 0px;">
<tr style="border: 0px; color: #111111; font-size: 14px; line-height: normal; margin: 0px; padding: 0px;"><td class="rating-prompt" id="ctl00_RateArticle_RateText" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 5px 0px 0px; white-space: nowrap;">Rate this:</td><td class="nowrap rating-stars-voter-large" id="ctl00_RateArticle_VoteFormDiv" style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px; white-space: nowrap;"><span class="tooltip ajaxHist radio voting" id="ctl00_RateArticle_RB" style="border: 0px; margin: 0px; padding: 0px; position: relative;"><span id="ctl00_RateArticle_VoteRBL" style="border: 0px; margin: 0px; padding: 0px;"></span><div class="rating-star-block" style="border: 0px; margin: 0px; padding: 2px;">
<a class="star outline" href="https://www.codeproject.com/Articles/1139558/Single-Page-Application-SPA-for-Enterprise-App-Ang#" rating="1" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -999em; width: 24px;" title="vote 1">vote 1</a><a class="star outline" href="https://www.codeproject.com/Articles/1139558/Single-Page-Application-SPA-for-Enterprise-App-Ang#" rating="2" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -999em; width: 24px;" title="vote 2">vote 2</a><a class="star outline" href="https://www.codeproject.com/Articles/1139558/Single-Page-Application-SPA-for-Enterprise-App-Ang#" rating="3" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -999em; width: 24px;" title="vote 3">vote 3</a><a class="star outline" href="https://www.codeproject.com/Articles/1139558/Single-Page-Application-SPA-for-Enterprise-App-Ang#" rating="4" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -999em; width: 24px;" title="vote 4">vote 4</a><a class="star outline" href="https://www.codeproject.com/Articles/1139558/Single-Page-Application-SPA-for-Enterprise-App-Ang#" rating="5" style="background: url("/script/ratings/images/star-empty-lg.png") 0px 0px no-repeat scroll transparent; border: 0px; display: inline-block; height: 24px; margin: 0px; overflow: hidden; padding: 0px; text-decoration: none; text-indent: -999em; width: 24px;" title="vote 5">vote 5</a></div>
</span></td><td style="border: 0px; color: grey; font-size: 12px !important; line-height: normal; margin: 0px; padding: 0px 0px 0px 5px;"></td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div class="hover-container" style="border: 0px; margin: 0px; padding: 0px; position: relative;">
</div>
</div>
</div>
</div>
<div class="summary" id="ctl00_description" itemprop="headline" style="border: 0px; color: grey; margin: 0px; padding: 30px 0px 0px;">
How to build the SPA for enterprise application using Angular2 and WebApi (RESTful)</div>
<span class="date" content="https://www.codeproject.com/KB/applications/1139558/Thumb-1139558.png" id="ctl00_thumbnailUrl" itemprop="image" style="border: 0px; margin: 0px; padding: 0px;"></span></div>
<div class="text" id="contentdiv" itemprop="articleBody" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 10px 0px 0px;">
<ul class="download" style="border: 0px; margin: 25px 0px 10px; padding: 0px 0px 0px 40px;">
<li style="background: url("/images/download24.png") left center no-repeat scroll transparent; border: 0px; font-weight: bold; line-height: normal; list-style-type: none; margin: 0px 0px 6px -40px; padding: 0px 0px 1px 30px; vertical-align: middle;"><a href="https://github.com/techcoaching/TinyERP.git" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">Download source code from Github</a></li>
</ul>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
Other Articles in the series</h2>
<ol style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li id="ctl00_ArticleTitle" style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="http://www.codeproject.com/Articles/1139558/Single-Page-Application-SPA-for-Enterprise-App-Ang" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">Overview</a></li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/Articles/1144122/Single-Page-Application-SPA-for-Enterprise-App-A" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">Add new Permission</a></li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="http://www.codeproject.com/Tips/1147130/Angular-WebApi-SPA-for-Enterprise-App-Part-Project" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">Project structure</a></li>
<li id="ctl00_ArticleTitle" style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="http://www.codeproject.com/Tips/1147486/Angular-WebApi-SPA-for-Enterprise-App-Part-Multi" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">Multi-Languages (i18n)</a></li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="http://www.codeproject.com/Tips/1148437/Angular-WebApi-SPA-for-Enterprise-App-Part-DI-IoC" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">DI & IoC - Why and Why not?</a></li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="http://www.codeproject.com/Articles/1151586/Angular-WebApi-SPA-for-Enterprise-App-Part-RESTful" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">RESTful & WebApi</a></li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/Articles/1151587/manage-application-lifecycle" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">Manage Application Lifecycle</a></li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;"><a href="https://www.codeproject.com/Articles/1151588/Angular-WebApi-SPA-for-Enterprise-App-Part-Build-D" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">Build & Deploy Application</a></li>
</ol>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
Introduction</h2>
<div style="line-height: normal;">
<strong style="border: 0px; margin: 0px; padding: 0px;">The first thing, I would like to share to you is "We did not learn technogies, we learn how to use technologies for our business".</strong></div>
<div style="line-height: normal;">
<strong style="border: 0px; margin: 0px; padding: 0px;">Note: In this code, we use Relase Candidate version of Angular 2</strong></div>
<div style="line-height: normal;">
Nowadays, with growing of web development, more and more desktop applications (such as HRM, CRM, Payroll, ...) were migrated to web application.</div>
<div style="line-height: normal;">
So the web application can utilize much benefit from web environment. This is easy to search the pros and cons between web application and desktop application on the internet, so we will not discuss here.</div>
<div style="line-height: normal;">
Purpose of series of articles will introduce you how did I organise the project for those types of application.</div>
<div style="line-height: normal;">
Some highlight technologies:</div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Angular2 (typescript)</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">WebApi (RESTful)</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Entity Framework</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Bootstrap</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">IoC</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Multi-Layer architecture</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Modular your Application</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Multi Languages</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Design Pattern (Unit Of Work, Repository, …)</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">SOLID principle</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Gulp</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">NodeJs</li>
</ul>
<div style="line-height: normal;">
There are many mistake and improvements need to be done so far.</div>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
How to get the code</h2>
<div style="line-height: normal;">
Checkout the code at <strong style="border: 0px; margin: 0px; padding: 0px;">https://github.com/techcoaching/TinyERP.git</strong></div>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
How to run the code</h2>
<div style="line-height: normal;">
The code was organized in 2 folders:</div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Client: this is client code written by typescript using angular2 framework.</li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Api: this is server side code where handles request from client.</li>
</ul>
<h3 style="color: #ff9900; font-size: 19px; font-weight: normal; line-height: normal;">
Run client side:</h3>
<ol style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">To run the client side code, please check and install if missing:</li>
</ol>
<ul style="border: 0px; margin: 10px 0px 10px 40px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Nodejs: <a href="https://nodejs.org/en/" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">https://nodejs.org/en/</a></li>
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Visual Code: <a href="https://code.visualstudio.com/" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">https://code.visualstudio.com</a></li>
</ul>
<ol start="2" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Run the app</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
- Open command prompt and go to the root folder of client:</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/cmd.png" style="border: 0px; height: auto; margin: 0px; max-width: 100%; overflow: auto; padding: 0px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
- Type “npm install” for installing missing nodejs packages.</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/npm-install.png" style="border: 0px; height: 340px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
- Use “npm start” to run the app:</div>
<div style="line-height: normal; margin-left: 40px;">
Output in console:</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/result-console.png" style="border: 0px; height: 342px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
Output on the browser:</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/result-client.png" style="border: 0px; height: 262px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
To this point, we can run the client successfully</div>
<h3 style="color: #ff9900; font-size: 19px; font-weight: normal; line-height: normal;">
Run API</h3>
<div style="line-height: normal; margin-left: 40px;">
- For the first run, We need to update the connectionstring in app.common\configurations\configuration.(debug|release).config</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/connectionstring.png" style="border: 0px; height: 135px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
- Open Api project in visual studio (2015).</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/code.PNG" style="border: 0px; height: 436px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
- Press f5 to run the Api on IIS Express, we will see the output on browser:</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/on-browser.PNG" style="border: 0px; height: 244px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
Config the default route, will remove this error page.</div>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
The First Look At The App</h2>
<div style="line-height: normal; margin-left: 40px;">
- We need to login before continueing:</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/login.PNG" style="border: 0px; height: 184px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
- Login with <strong style="border: 0px; margin: 0px; padding: 0px;">tu.tran@yahoo.com/123456</strong>, we will see the default page as below (this can be changed in application configuration):</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/after_login.PNG" style="border: 0px; height: 173px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
<br /></div>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
List of Roles Page</h2>
<div style="line-height: normal; margin-left: 40px;">
In this section, we will go through how we implement new page using my code.</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/roles.PNG" style="border: 0px; height: 150px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<h3 style="color: #ff9900; font-size: 19px; font-weight: normal; line-height: normal;">
Analyse</h3>
<div style="line-height: normal; margin-left: 40px;">
As my habit, I analyse the page before implement, this will help us recognise:</div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Listing out The steps we need to do to complete the page.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Figure out the missing information, so we can ask for help immediatedly.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Think about the flow of logic from the client to server side, from UI to repository. So the written code will be nicer. For this, many of my co-workers, they try to write the code first, and debug it after that. When something wrong, it changes your behavior, and we try to change the code to make it works. this may break the logic flow and the code is not follow the convention, architecture was used in the app. This will raise some new potential issues in the future and the code is hard for manteance.</li>
</ul>
<div style="line-height: normal; margin-left: 40px;">
After analysing the page, we figure out the list of things need to be completed as below:</div>
<div style="line-height: normal; margin-left: 80px;">
<strong style="border: 0px; margin: 0px; padding: 0px;"><em style="border: 0px; margin: 0px; padding: 0px;">On client:</em></strong></div>
<div style="line-height: normal; margin-left: 80px;">
+ Create new module (called security), I will discusss more pros and cons on how to modular the application.</div>
<div style="line-height: normal; margin-left: 80px;">
+ Register route for Roles component (page in angular was called component) and appropriated menu item information (sub menu on th eleft panel)</div>
<div style="line-height: normal; margin-left: 80px;">
+ Import and register this setting module with application config.</div>
<div style="line-height: normal; margin-left: 80px;">
+ Create component files (html file for UI, ts file for logic handling and ts for view model of that component).</div>
<div style="line-height: normal; margin-left: 80px;">
+ Implemnet the UI of Roles component</div>
<div style="line-height: normal; margin-left: 80px;">
+ Implement logic of Roles component (also calling to server and getting data)</div>
<div style="line-height: normal; margin-left: 80px;">
+ Implement service for this page (service willmake the call to REST api for getting the list of permission).</div>
<div style="line-height: normal; margin-left: 80px;">
<em style="border: 0px; margin: 0px; padding: 0px;"><strong style="border: 0px; margin: 0px; padding: 0px;">On Api:</strong></em></div>
<div style="line-height: normal; margin-left: 80px;">
+ Add new controller called RolesController for handling request related to Role.</div>
<div style="line-height: normal; margin-left: 80px;">
+ Add RoleService and RoleRepository for getting the list of Roles (I use multi-layers architecture in this case)</div>
<div style="line-height: normal; margin-left: 80px;">
+ Add entity into appropriated DbContext.</div>
<div style="line-height: normal; margin-left: 40px;">
Ok, Now we will go through step by step in detail.</div>
<h3 style="color: #ff9900; font-size: 19px; font-weight: normal; line-height: normal;">
Implement client</h3>
<div style="line-height: normal; margin-left: 40px;">
In this section, <root> folder is the folder of client code (the path to "client" folder).</div>
<ol style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Create new module (called security). as the convention of the app, we create new module.ts file in "<root>/app/modules/secutiry/_share/config" as photo below:</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/create-module.png" style="border: 0px; height: 199px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
and route.ts file</div>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/route-config.png" style="border: 0px; height: 263px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
In this file, we will provide the setting information for security module, such as: list of sub menu items, routing in module, ...</div>
<ol start="2" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Register route for Roles component (page in angular was called component) and appropriated menu item information (sub menu on th eleft panel). Add this line into the module.ts file created in above step.</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/register-route.png" style="border: 0px; height: 42px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 800px;" /></div>
<ol start="3" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Import and register this setting module with application config. This will register the security module in the application, show the module and its sub menu items will be displayed on the left panel.</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/register-module.png" style="border: 0px; height: 166px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
The sytem will auto register routes in security module for us automaticly.</div>
<ol start="4" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Create component files (html file for UI, ts file for logic handling and ts for view model of that component).</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/create-module-files.png" style="border: 0px; height: 314px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 405px;" /></div>
<ol start="5" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Implemnet the UI of Roles component, there are some directives already created, we use in this article. I will explain more detail in other article how to implement those directives in other articles.</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/roles-html.png" style="border: 0px; height: 168px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
In this html, we use:</div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">"grid" directive, for displaying the list of roles. there are some events we can passnig the handlers and columns of grid in mode.options property.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">"page-action" directive, this will dispaly the "Add Role" on the list of Roles as photo below:</li>
</ul>
<div style="line-height: normal; margin-left: 80px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/add-role-btn.png" style="border: 0px; height: 267px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">page, page-header, page-content directives, this is the structure of the page in my framework.</li>
</ul>
<ol start="6" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Implement logic of Roles component (also calling to server and getting data)</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/roles-ts.png" style="border: 0px; height: 406px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
For declare new componnet we need to:</div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Specify the template file for the component (line 9).</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Declare the number of directives were used in component html file (line 11). Is the directive was not declare here, it will not be redered in roles.html file and angular will consider its tag (<page-action/>, <grid />) as html tag</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Declare new Roles class inherit from BasePage.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Declare the model for the component. each component should have its own view model, this help us reducing the complexity of roles.ts file.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">Getting data from api by calling appropriated method of roleService. We move this to service and let the roles.ts focus on the behavior of the page.</li>
</ul>
<div style="line-height: normal; margin-left: 40px;">
Note: we pass i18nHelper into constructor of RolesModel. this will be used for resolving the lable of grid columns base on the current languages (multi-language supported).</div>
<ol start="7" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Implement service for this page (service willmake the call to REST api for getting the list of permission).</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/role-service.png" style="border: 0px; height: 246px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 600px;" /></div>
<div style="line-height: normal; margin-left: 40px;">
This is just a simple call to REST api for getting the list of roles. For more information about IConnection, see <strong style="border: 0px; margin: 0px; padding: 0px;"><root>/app/common/connectors/RESTConnector.ts</strong></div>
<h3 style="color: #ff9900; font-size: 19px; font-weight: normal; line-height: normal;">
Implement Api</h3>
<div style="line-height: normal; margin-left: 40px;">
In this section, <root> folder is the folder of api code (the path to "api" folder).</div>
<ol style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Api project structure:</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
<img alt="" src="https://www.codeproject.com/KB/applications/1139558/api-project-structure.png" style="border: 0px; height: 252px; margin: 0px; max-width: 100%; overflow: auto; padding: 0px; width: 268px;" /></div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Common: this contains the common code can be used everywhere in the app</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Api: this is public REST api that client side can call.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Service: this contains all service interfaces and its appropriated DTOs.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Service.Impl: this only contains implementation of appropriated interface in App.Service.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Repository: this contains all repository interfaces. Each repository only operates on 1 entity in database.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Repository.Impl: this only contains implementation of appropriated interface in App.Resitory.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Entity: This contains all entities of the app.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">App.Context: Currently, this containts the all DbContexts in the app, as we use EF framework. I intend to merge this with the App.Entity in the future.</li>
</ul>
<div style="line-height: normal; margin-left: 40px;">
Note: The communication between the layer (such as: App.Api -> App.Service => App.Repository), we use the interface only.</div>
<div style="line-height: normal; margin-left: 40px;">
<br /></div>
<ol start="2" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Add new controller called RolesController for handling request related to Role.</li>
</ol>
<div style="line-height: normal; margin-left: 40px;">
As the convention of the app, we create new RolesController in "App.Api/Features/Security"</div>
<div class="pre-action-link" id="premain873731" style="border: 0px; color: #999999; font-size: 11px; margin: 0px; padding: 0px; position: relative; text-align: right; width: 700px;">
<span id="prehide873731" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Hide</span> <span id="copycode873731" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Copy Code</span></div>
<pre class="notranslate" id="pre873731" style="background-color: #fbedbb; border: 1px solid rgb(251, 237, 187); color: black; font-family: Consolas, "Courier New", Courier, mono; font-size: 9pt; font-stretch: normal; line-height: normal; margin-left: 40px; overflow: auto; padding: 6px; tab-size: 4; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;"><span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Api.Features.Security
{
[RoutePrefix(<span class="code-string" style="border: 0px; color: purple; margin: 0px; padding: 0px;">"</span><span class="code-string" style="border: 0px; color: purple; margin: 0px; padding: 0px;">api/roles"</span>)]
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">class</span> RolesController : ApiController
{
[HttpGet]
[Route(<span class="code-string" style="border: 0px; color: purple; margin: 0px; padding: 0px;">"</span><span class="code-string" style="border: 0px; color: purple; margin: 0px; padding: 0px;">"</span>)]
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> IResponseData<IList<RoleListItemSummary>> GetRoles()
{
IResponseData<IList<RoleListItemSummary>> response = <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">new</span> ResponseData<IList<RoleListItemSummary>>();
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">try</span>
{
IRoleService roleService = IoC.Container.Resolve<IRoleService>();
IList<RoleListItemSummary> roles=roleService.GetRoles();
response.SetData(roles);
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">catch</span> (ValidationException ex)
{
response.SetErrors(ex.Errors);
response.SetStatus(System.Net.HttpStatusCode.PreconditionFailed);
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">return</span> response;
}
}
}
</pre>
<div style="line-height: normal; margin-left: 40px;">
I think the code is rather simple. From controller we call "GetRoles" of the appropriated service interface and get the list of roles (dto).</div>
<div style="line-height: normal; margin-left: 40px;">
IoC will return the concrete instance of that service.</div>
<div style="line-height: normal; margin-left: 40px;">
In App.Service.Impl, we have boostrap.cs file, this is the place for registering the service interface and its concrete implementation.</div>
<div class="pre-action-link" id="premain77037" style="border: 0px; color: #999999; font-size: 11px; margin: 0px; padding: 0px; position: relative; text-align: right; width: 700px;">
<span id="prehide77037" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Hide</span> <span id="copycode77037" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Copy Code</span></div>
<pre class="notranslate" id="pre77037" style="background-color: #fbedbb; border: 1px solid rgb(251, 237, 187); color: black; font-family: Consolas, "Courier New", Courier, mono; font-size: 9pt; font-stretch: normal; line-height: normal; margin-left: 40px; overflow: auto; padding: 6px; tab-size: 4; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;"><span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Service.Impl
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">class</span> Bootstrap : App.Common.Tasks.BaseTask<IBaseContainer>, IBootstrapper
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> Bootstrap():<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">base</span>(App.Common.ApplicationType.All)
{
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">void</span> Execute(IBaseContainer context)
{
context.RegisterSingleton<App.Service.Security.IRoleService, App.Service.Impl.Security.RoleService>();
}
}
}
</pre>
<ol start="3" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Add IRoleService and RoleService for getting the list of Roles (I use multi-layers architecture in this case)</li>
</ol>
<div class="pre-action-link" id="premain314332" style="border: 0px; color: #999999; font-size: 11px; margin: 0px; padding: 0px; position: relative; text-align: right; width: 700px;">
<span id="prehide314332" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Hide</span> <span id="copycode314332" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Copy Code</span></div>
<pre class="notranslate" id="pre314332" style="background-color: #fbedbb; border: 1px solid rgb(251, 237, 187); color: black; font-family: Consolas, "Courier New", Courier, mono; font-size: 9pt; font-stretch: normal; line-height: normal; margin-left: 40px; overflow: auto; padding: 6px; tab-size: 4; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;"><span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Service.Security
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">interface</span> IRoleService
{
System.Collections.Generic.IList<RoleListItemSummary> GetRoles();
}
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Service.Impl.Security
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">internal</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">class</span> RoleService : IRoleService
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> IList<RoleListItemSummary> GetRoles()
{
IRoleRepository repository = IoC.Container.Resolve<IRoleRepository>();
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">return</span> repository.GetItems<RoleListItemSummary>();
}
}
}</pre>
<div style="line-height: normal; margin-left: 40px;">
<strong style="border: 0px; margin: 0px; padding: 0px;">Note:</strong></div>
<ul style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">We should define appropriate DTOs for each action, as most cases, we just get some properties of entity and this will help the code easier for mantaince in future.</li>
<li style="border: 0px; line-height: normal; margin: 0px 0px 0px 40px; padding: 0px;">The RoleService class was delared as internal, not a public class. So outside of this dll can not create instance of this class</li>
</ul>
<div style="line-height: normal; margin-left: 40px;">
<br /></div>
<ol start="4" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Add IRoleRepository and RoleRepository for getting the list of Roles</li>
</ol>
<div class="pre-action-link" id="premain696795" style="border: 0px; color: #999999; font-size: 11px; margin: 0px; padding: 0px; position: relative; text-align: right; width: 700px;">
<span id="prehide696795" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Hide</span> <span id="copycode696795" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Copy Code</span></div>
<pre class="notranslate" id="pre696795" style="background-color: #fbedbb; border: 1px solid rgb(251, 237, 187); color: black; font-family: Consolas, "Courier New", Courier, mono; font-size: 9pt; font-stretch: normal; line-height: normal; margin-left: 40px; overflow: auto; padding: 6px; tab-size: 4; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;"><span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Repository.Secutiry
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">interface</span> IRoleRepository: App.Common.Data.IBaseContentRepository<Role>
{
}
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Repository.Impl.Security
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">internal</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">class</span> RoleRepository: BaseContentRepository<Role>, IRoleRepository
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> RoleRepository() : <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">base</span>(<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">new</span> App.Context.AppDbContext(App.Common.IOMode.Read))
{
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> RoleRepository(IUnitOfWork uow) : <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">base</span>(uow.Context <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">as</span> IMSSQLDbContext)
{
}
}
}</pre>
<div style="line-height: normal; margin-left: 40px;">
<strong style="border: 0px; margin: 0px; padding: 0px;">Note</strong>: The same as RoleService, RoleRepository class also was delared as internal. So only the interface can be used outside of this project.</div>
<ol start="5" style="border: 0px; margin: 10px 0px; padding: 0px 0px 0px 40px;">
<li style="border: 0px; line-height: normal; margin: 0px; padding: 0px;">Add entity into appropriated DbContext:</li>
</ol>
<div class="pre-action-link" id="premain952914" style="border: 0px; color: #999999; font-size: 11px; margin: 0px; padding: 0px; position: relative; text-align: right; width: 700px;">
<span id="prehide952914" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Hide</span> <span id="preShrink952914" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Shrink</span> <img id="preimg952914" src="https://www.codeproject.com/images/arrow-up-16.png" style="border: 0px; height: 16px; margin: 0px; max-width: 100%; opacity: 0.5; overflow: auto; padding: 0px; transition: opacity 0.1s linear 0ms; vertical-align: text-top; width: 16px;" /> <span id="copycode952914" style="border: 0px; cursor: pointer; margin: 0px; padding: 0px; transition: color 0.1s linear;">Copy Code</span></div>
<pre class="notranslate" id="pre952914" processed="true" style="background-color: #fbedbb; border: 1px solid rgb(251, 237, 187); color: black; font-family: Consolas, "Courier New", Courier, mono; font-size: 9pt; font-stretch: normal; line-height: normal; margin-left: 40px; overflow: auto; padding: 6px; tab-size: 4; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;"><span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Entity.Security
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">class</span> Role:BaseContent
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> IList<Permission> Permissions { <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">get</span>; <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">set</span>; }
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> Role():<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">base</span>()
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">this</span>.Permissions = <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">new</span> List<Permission>();
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> Role(<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">string</span> name, <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">string</span> desc, IList<Permission> permissions): <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">this</span>() {
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">this</span>.Name = name;
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">this</span>.Key = App.Common.Helpers.UtilHelper.ToKey(name);
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">this</span>.Description = desc;
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">if</span> (permissions == <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">null</span>) { <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">return</span>; }
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">this</span>.Permissions = permissions;
}
}
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">namespace</span> App.Context
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">class</span> AppDbContext : App.Common.Data.MSSQL.MSSQLDbContext
{
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> AppDbContext(IOMode mode = IOMode.Read) : <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">base</span>(<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">new</span> App.Common.Data.MSSQL.MSSQLConnectionString(), mode)
{
}
<span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">public</span> System.Data.Entity.DbSet<Role> Roles { <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">get</span>; <span class="code-keyword" style="border: 0px; color: blue; margin: 0px; padding: 0px;">set</span>; }
}
}
</pre>
<div style="line-height: normal;">
<br /></div>
<h2 style="color: #ff9900; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
Summary</h2>
<div style="line-height: normal;">
In this article, I provider you an overview about how to get the list of roles and display them on the ui.</div>
<div style="line-height: normal;">
In next article, we continue with how to create and update roles, and go into more detail of framework (such as: project structure, directives, ....).</div>
</div>
<div class="float-right" style="background-color: white; border: 1px solid rgb(204, 204, 204); color: #111111; float: right; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 20px 0px 0px 10px; padding: 0px;">
<div class="msg-300x250" data-format="300x250" data-loadonview="true" data-publisher="lqm.codeproject.site" data-tags="C#, ASP.NET, Javascript, CSS, .NET, Visual-Studio, HTML, Mobile, Architect, DBA, Dev, ADO, ADO.NET, Ajax, Design, LINQ, Beginner, MVC, jQuery, T-SQL,rating4.5" data-type="ad" data-zone="Web-Development/Applications-Tools/Applications" style="border: 0px; margin: 0px; padding: 0px;">
<div data-google-query-id="CMSs4srahdECFcd0AQodnYcDFQ" id="div-gpt-ad-lqm.codeproject.site/web-development/applications-tools/applications-2" style="border: 0px; box-sizing: border-box; font-size: 0px; height: 250px; margin: 0px; padding: 0px; width: 300px;">
<div id="google_ads_iframe_/6839/lqm.codeproject.site/web-development/applications-tools/applications_2__container__" style="border: 0pt none; margin: 0px; padding: 0px;">
<iframe data-integralas-id-213efab1-7c38-cd96-fbb1-6216dae2bc02="" frameborder="0" height="250" id="google_ads_iframe_/6839/lqm.codeproject.site/web-development/applications-tools/applications_2" marginheight="0" marginwidth="0" name="google_ads_iframe_/6839/lqm.codeproject.site/web-development/applications-tools/applications_2" scrolling="no" style="border-style: initial; border-width: 0px; margin: 0px; padding: 0px; vertical-align: bottom;" title="3rd party ad content" width="300"></iframe></div>
</div>
</div>
</div>
<h2 style="background-color: white; color: #ff9900; font-family: "Segoe UI", Arial, sans-serif; font-size: 29px; font-weight: 200; line-height: normal; margin: 20px 0px 11px; padding: 0px 0px 10px;">
License</h2>
<div id="LicenseTerms" style="background-color: white; border: 0px; color: #111111; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; margin: 0px; padding: 0px;">
<div style="line-height: normal;">
This article, along with any associated source code and files, is licensed under <a href="http://www.codeproject.com/info/cpol10.aspx" rel="license" style="border: 0px; color: purple; margin: 0px; padding: 0px; text-decoration: none;">The Code Project Open License (CPOL)</a></div>
</div>
</div>
</div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-4408475811913043852016-12-09T09:41:00.004-08:002016-12-09T09:41:41.070-08:00Hu Family Worship Team South Troy Wesleyan Church Minnesota Nov 2016<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
Hu Family Worship Team South Troy Wesleyan Church Minnesota Nov 2016</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-20zBujbfI88/WErsiWH7DAI/AAAAAAAACl8/jAtsTzNPVAkMEaooNgu-Vcw2CTSlotvBwCLcB/s1600/DSC00868.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://4.bp.blogspot.com/-20zBujbfI88/WErsiWH7DAI/AAAAAAAACl8/jAtsTzNPVAkMEaooNgu-Vcw2CTSlotvBwCLcB/s320/DSC00868.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-IJAmiLm0G0A/WErsoxZZJ8I/AAAAAAAACmA/UdUpszbMGEYas0Vy87bgHSUgCJKMbmznACLcB/s1600/DSC00888.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://2.bp.blogspot.com/-IJAmiLm0G0A/WErsoxZZJ8I/AAAAAAAACmA/UdUpszbMGEYas0Vy87bgHSUgCJKMbmznACLcB/s320/DSC00888.JPG" width="320" /></a></div>
<br /></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0tag:blogger.com,1999:blog-8878501298548928127.post-73687108276731352912016-12-06T20:34:00.002-08:002016-12-06T20:34:48.361-08:00Crud Operation using Angular JS and Web API<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://www.codeproject.com/Articles/1158439/Crud-Operation-using-Angular-JS-and-Web-API">https://www.codeproject.com/Articles/1158439/Crud-Operation-using-Angular-JS-and-Web-API</a></div>
BlArthurHuhttp://www.blogger.com/profile/09298660883025641858noreply@blogger.com0