<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-4763239387887280849</id><updated>2026-10-09T14:37:55.533+10:30</updated><title type='text'>Tips for Microsoft Developers</title><subtitle type='html'>A collection of tips and general info for Microsoft Developers</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default?start-index=26&amp;max-results=25&amp;redirect=false'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>126</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-2749839727889977199</id><published>2024-05-17T15:25:00.000+09:30</published><updated>2024-05-17T15:25:04.200+09:30</updated><title type='text'>AI skills needed for today&#39;s jobs</title><content type='html'>&lt;p&gt;&amp;nbsp;I searched the seek.com.au site today for all jobs advertised in Australia with the keyword &quot;AI&quot;. It showed total of 836 jobs. The interesting part was that they were not just &quot;Information &amp;amp; Communication Technology&quot; jobs but all other sorts of job. The screenshot below shows the top of the list:&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/a/AVvXsEhxCymauiw3OtKRuNtVHrGsUqIkU72U9TDWMh5VjUOJcHK-oZMclMPyXoJsAyA4R3-bdwQuBwTDe3TnxDXNQI3vvHDCq9LDFTTLUkro6m-Olr4fJnanFTVGeHbpAS1kdmU8UblEZgza9nLzoK1nb9u_URJDxG1IGu4wJh39HBOMJIdr9JoEixt9awSQ6L5o&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img alt=&quot;&quot; data-original-height=&quot;468&quot; data-original-width=&quot;676&quot; height=&quot;222&quot; src=&quot;https://blogger.googleusercontent.com/img/a/AVvXsEhxCymauiw3OtKRuNtVHrGsUqIkU72U9TDWMh5VjUOJcHK-oZMclMPyXoJsAyA4R3-bdwQuBwTDe3TnxDXNQI3vvHDCq9LDFTTLUkro6m-Olr4fJnanFTVGeHbpAS1kdmU8UblEZgza9nLzoK1nb9u_URJDxG1IGu4wJh39HBOMJIdr9JoEixt9awSQ6L5o&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;Thinking about a new accounting job? You need to know AI!&amp;nbsp;&lt;/p&gt;&lt;p&gt;Of course the sector with highest number was &quot;Information &amp;amp; Communication Technology&quot; with total of 359 jobs.&lt;/p&gt;&lt;p&gt;The list below shows where these 359 jobs are mostly located:&lt;/p&gt;&lt;p&gt;Sydney: 154&lt;/p&gt;&lt;p&gt;Melbourne: 89&lt;/p&gt;&lt;p&gt;Brisbane: 39&lt;/p&gt;&lt;p&gt;Perth: 27&lt;/p&gt;&lt;p&gt;Adelaide: 15&lt;/p&gt;&lt;p&gt;For my home town Adelaide, out of 15 jobs advertised these were subcategories:&lt;/p&gt;&lt;p&gt;Developer/Programmer: 5&lt;/p&gt;&lt;p&gt;Engineering -Software: 3&lt;/p&gt;&lt;p&gt;Management: 2&lt;/p&gt;&lt;p&gt;Consultant: 2&lt;/p&gt;&lt;p&gt;Architect: 1&lt;/p&gt;&lt;p&gt;Business/System Analysis: 1&lt;/p&gt;&lt;p&gt;Program &amp;amp; project Management: 1&lt;/p&gt;&lt;p&gt;For the top category of &quot;Developer/Programmer&quot; these were places that advertised for work:&lt;/p&gt;&lt;p&gt;NovaWorks - $95,000-$129,999&lt;/p&gt;&lt;p&gt;Expert Ease AI - $95 per hour&lt;/p&gt;&lt;p&gt;Neo Analytics $180,000- $200,000&lt;/p&gt;&lt;p&gt;MyOSH - (not declared)&lt;/p&gt;&lt;p&gt;Comunet (not declared)&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;The job offered by &quot;Expert Ease AI&quot; which was titled: &quot;Full-Stack Developer/ AI Prompt Programmer for Conversational AI Platform&quot; had these requirements:&lt;/p&gt;&lt;p&gt;&lt;i&gt;We Are Seeking:&lt;/i&gt;&lt;/p&gt;&lt;p&gt;&lt;i&gt;Experienced Full-Stack Developer with a strong background in Python, Django, React, Prompt Programming, Large Language Models (LLMs), storage and retrieval of vector embeddings, Machine Learning, Few-shot prompting, In-context learning, and AI automations.&amp;nbsp;&lt;/i&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p style=&quot;-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; background-color: white; border: 0px; box-sizing: border-box; color: #2e3849; font-family: SeekSans, &amp;quot;SeekSans Fallback&amp;quot;, Arial; font-size: 16px; margin-bottom: var(--_1wlodeg3); margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; text-align: left; vertical-align: baseline;&quot;&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/2749839727889977199/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/2749839727889977199' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/2749839727889977199'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/2749839727889977199'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2024/05/ai-skills-needed-for-todays-jobs.html' title='AI skills needed for today&#39;s jobs'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/a/AVvXsEhxCymauiw3OtKRuNtVHrGsUqIkU72U9TDWMh5VjUOJcHK-oZMclMPyXoJsAyA4R3-bdwQuBwTDe3TnxDXNQI3vvHDCq9LDFTTLUkro6m-Olr4fJnanFTVGeHbpAS1kdmU8UblEZgza9nLzoK1nb9u_URJDxG1IGu4wJh39HBOMJIdr9JoEixt9awSQ6L5o=s72-c" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8797827951958229324</id><published>2020-11-18T09:33:00.002+10:30</published><updated>2020-11-18T09:33:51.918+10:30</updated><title type='text'>Internationalization of .NET applications</title><content type='html'>&lt;p&gt;&amp;nbsp;NGettext Nuget package is used to add internationalization (i18n) support to your .NET application, i.e. translating labels and strings used in your application to other languages. You can use Poedit application to mange translations to different languages. For each language you would have a different po file which Poedit can save as mo file which is used by your application.&amp;nbsp;&lt;/p&gt;&lt;p&gt;The code example below uses NGettext package to provide translation service:&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;using NGettext;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;using System.Globalization;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;using System.IO;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;namespace YourApp&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;{&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; public static class Translate&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; {&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; static Catalog catalog;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; static CultureInfo currentCulture;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; public static void SetTranslationLocale(string locale = &quot;&quot;)&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; {&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; string fileName = &quot;en_GB.mo&quot;;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; switch (locale.ToLower())&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; {&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; case &quot;de&quot;:&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; fileName = &quot;de_DE.mo&quot;;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; break;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; case &quot;en&quot;:&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; fileName = &quot;en_GB.mo&quot;;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; break;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; case &quot;es&quot;:&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; fileName = &quot;es_ES.mo&quot;;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; break;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; case &quot;fr&quot;:&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; fileName = &quot;fr_FR.mo&quot;;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; break;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; case &quot;pt&quot;:&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; fileName = &quot;pt_PT.mo&quot;;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; break;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; case &quot;it&quot;:&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; fileName = &quot;it_IT.mo&quot;;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; break;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; currentCulture = new CultureInfo(locale);&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; FileStream moFileStream = File.OpenRead(Path.Combine(@&quot;..\..\Resources\Translations&quot;, fileName));&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; catalog = new Catalog(moFileStream, currentCulture);&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; public static string TranslateToCurrentLocale(string stringToTranslate)&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; {&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; return catalog.GetString(stringToTranslate);&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;&amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style=&quot;font-family: courier;&quot;&gt;}&lt;/span&gt;&lt;/p&gt;</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8797827951958229324/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8797827951958229324' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8797827951958229324'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8797827951958229324'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2020/11/internationalization-of-net-applications.html' title='Internationalization of .NET applications'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-9151637906045170161</id><published>2020-09-04T15:25:00.003+09:30</published><updated>2021-09-27T13:49:34.820+09:30</updated><title type='text'>ML.NET Model Builder</title><content type='html'>&lt;p&gt;Today I came across ML.NET Model Builder in Visual Studio. This enables programmers using .NET to build, train and use a model in their programs for a variety of AI related projects such as classification. For example imagine you have a large number of pictures of 4 different types of flowers say roses, sun flowers, tulips and daisies. You want to build a Machine Learning model that goes through these images and after training builds a model which you can feed an image of a flower to and it tells you which type of flower it is. That is exactly what you can do by using ML.NET model builder in your application. The good news for this particular example is that the list of free pictures of flowers is already available that you can download and train your mode with.&lt;/p&gt;&lt;p&gt;This link shows you step by step how you can set up your Machine Leaning experiment using ML.NET&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://devblogs.microsoft.com/dotnet/ml-net-model-builder-is-now-a-part-of-visual-studio/&quot;&gt;https://devblogs.microsoft.com/dotnet/ml-net-model-builder-is-now-a-part-of-visual-studio/&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/9151637906045170161/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/9151637906045170161' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/9151637906045170161'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/9151637906045170161'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2020/09/mlnet-model-builder.html' title='ML.NET Model Builder'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-7185948530275187355</id><published>2020-08-14T15:12:00.000+09:30</published><updated>2020-08-14T15:12:03.344+09:30</updated><title type='text'>SQL Refresher</title><content type='html'>&lt;p&gt;Code developers rarely need to set up a SQL database and generate queries. This activity is normally done once in the early stages of a project and not performed much later on when the project enters maintenance or feature addition/enhancement phase which is like 80 to 90 percent of the time. As a result of this and because SQL query generation is not an every day activity the developers tend to forget some of the tricky parts of SQL queries, for example those involving GROUP and CASE statements. Recently I came across&amp;nbsp; sqlzoo.net site which provided a nice refresher for me for SQL queries. It comes with a number of questions that you can write your answer online in SQL and see if the query you write passes the test.&amp;nbsp;&lt;/p&gt;</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/7185948530275187355/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/7185948530275187355' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7185948530275187355'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7185948530275187355'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2020/08/sql-refresher.html' title='SQL Refresher'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-4541853579218078134</id><published>2020-08-08T16:22:00.001+09:30</published><updated>2020-08-08T16:22:22.100+09:30</updated><title type='text'>Using Docker in Windows along Virtual Box</title><content type='html'>&lt;p&gt;If you have tried to install &quot;Docket Desktop for Windows&quot; to run Docker containers on your Windows machine you might have noticed that since it enables HyperV it prevents Virtual Box from running your virtual machines. If you have some virtual machines managed by Virtual Box then you need to install &quot;Docker Toolbox&quot; instead. &quot;Docker Toolbox&quot; does not use HyperV. The other benefit of using &quot;Docket Toolbox&quot; instead of &quot;Docker Desktop&quot; is that since it does not need HyperV it can be run on Windows 10 Home edition and you do not need to have Window 10 Pro..&lt;/p&gt;</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/4541853579218078134/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/4541853579218078134' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/4541853579218078134'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/4541853579218078134'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2020/08/using-docker-in-windows-along-virtual.html' title='Using Docker in Windows along Virtual Box'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8814203937191321807</id><published>2020-02-05T14:14:00.004+10:30</published><updated>2020-02-05T14:14:30.663+10:30</updated><title type='text'>JavaScript promises do not fulfil in the order they were called</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
I learned a lesson today, or more accurately I had to remind myself of a fact on how JavaScript promises work. My front-end application was not working as expected. The tables were not populated with the data. The data was provided by a service as a promise. On the then() part of that promises I was populating my table. The promises were called in a loop, the index of the loop was passed as a parameter to the callback function. Since the loop started with zero and went up to a certain size, I assumed that the handlers are also called one by one in the same order and I was relying on the index number passed to reach the set max value. While debugging I realised that callbacks are not executed in the same order that promises are called, After all they are asynchronous operations with no guarantee of timing of their execution. The solution was to remove the check for the index and instead rely on the number of times the callback is called in total and take actions based on that.&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8814203937191321807/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8814203937191321807' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8814203937191321807'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8814203937191321807'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2020/02/javascript-promises-do-not-fulfil-in.html' title='JavaScript promises do not fulfil in the order they were called'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8699297203968456145</id><published>2020-01-15T12:26:00.003+10:30</published><updated>2020-01-15T12:30:07.619+10:30</updated><title type='text'>Using an AngularJS service in Angular</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
We had an AngularJS application that we decided to gradually add Angular components to it. This can be done using&amp;nbsp;&lt;a href=&quot;https://angular.io/guide/upgrade&quot; target=&quot;_blank&quot;&gt;Angular Upgrade&lt;/a&gt;. If an existing AngularJS service is needed in an Angular component the following steps need to be performed. Note that in this example I am going to use an AngularJS service called&lt;b&gt; &lt;span style=&quot;font-family: Courier New, Courier, monospace;&quot;&gt;EventService&lt;/span&gt;&lt;/b&gt; in my Angular framework:&lt;br /&gt;
&lt;br /&gt;
1. Create a file called &lt;span style=&quot;color: blue; font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;event-service-provider.ts&lt;/span&gt;&amp;nbsp;in yourpath with this content:&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;export function EventServiceFactory(i: any) {&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; return i.get(&#39;EventService&#39;);&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;export const EventServiceProvider = {&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; provide: &#39;EventService&#39;,&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; useFactory: EventServiceFactory,&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; deps: [&#39;$injector&#39;]&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;};&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
2. Update &lt;span style=&quot;color: blue; font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app.module.ts&lt;/span&gt; by adding sections highlighted below:&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;i&gt;import { EventServiceProvider } from &#39;yourpath/event-service.provider&#39;&lt;/i&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;.....&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;providers: [ ...&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;i&gt;EventServiceProvider,&lt;/i&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; ...&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; ]&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;br /&gt;
3. In a component that you want to use this service do the following:&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;import { Inject } from &quot;@angular/core&quot;;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;export class YourComponent {&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; private EventService: any;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; constructor(@Inject(&#39;EventService&#39;) EventService: any){&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; this.EventService = EventService;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; EventService.subscribe(null, &#39;region:updated&#39;,&amp;nbsp; (region) =&amp;gt;{ this.translateLanguage(region.id);}, false);&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; }&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
In this particular example &lt;span style=&quot;font-family: Courier New, Courier, monospace;&quot;&gt;subscribe&lt;/span&gt; is a function of &lt;span style=&quot;font-family: Courier New, Courier, monospace;&quot;&gt;EventService.&lt;/span&gt; we are subscribing to &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;region:update&lt;/span&gt;&amp;nbsp;event.&amp;nbsp; When that event happens we call a method called &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;translateLanguage()&lt;/span&gt;&amp;nbsp;in this class passing it the value of &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;region.id&lt;/span&gt;&amp;nbsp;we got from &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;EventService&lt;/span&gt;.&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8699297203968456145/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8699297203968456145' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8699297203968456145'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8699297203968456145'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2020/01/using-angularjs-service-in-angular.html' title='Using an AngularJS service in Angular'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-7009662576911459360</id><published>2019-08-15T11:20:00.000+09:30</published><updated>2019-08-15T11:20:16.251+09:30</updated><title type='text'>A template ASP.NET Core project with MVC, Web API and SignalR</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
Today I created a Visual Studio ASP.NET Core 2.2 project that includes all these items:&lt;br /&gt;
1. MVC&lt;br /&gt;
2. Web API&lt;br /&gt;
3. Entity Framework Core&lt;br /&gt;
4. SignalR&lt;br /&gt;
It is stored at&lt;br /&gt;
&lt;a href=&quot;https://github.com/mbahrami/ASP.NET-Core-with-MVC-Web-API-and-SignalR&quot;&gt;https://github.com/mbahrami/ASP.NET-Core-with-MVC-Web-API-and-SignalR&lt;/a&gt;&lt;br /&gt;
The SignalR component would broadcast a message to all clients when one client sends a message similar to a chat application. I had a Python application running on a Raspberry PI implementing a web socket client which would listen to the messages sent by web clients and would turn an LED&amp;nbsp; on or off upon receiving of those messages.&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/7009662576911459360/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/7009662576911459360' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7009662576911459360'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7009662576911459360'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2019/08/a-template-aspnet-core-project-with-mvc.html' title='A template ASP.NET Core project with MVC, Web API and SignalR'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-3995586686736117349</id><published>2019-08-04T14:45:00.005+09:30</published><updated>2019-08-09T15:01:21.072+09:30</updated><title type='text'>Raspberry PI &quot;No wireless interface found&quot;</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;span style=&quot;background-color: white; color: #666666; font-family: &amp;quot;source sans pro&amp;quot; , sans-serif; font-size: 18px;&quot;&gt;I was working on a &quot;Remote Control&quot; project in which a user would set a switch on a web site to on or off and then an application running on a Raspberry Pi constantly checking the status of that switch (from a web API)would&amp;nbsp; turn an LED on or off to reflect the status of that switch.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: white; color: #666666; font-family: &amp;quot;source sans pro&amp;quot; , sans-serif; font-size: 18px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;background-color: white; color: #666666; font-family: &amp;quot;source sans pro&amp;quot; , sans-serif; font-size: 18px;&quot;&gt;Everything was going OK until at the last minute my Raspberry Pi could not connect to the internet. It&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666666; font-family: &amp;quot;source sans pro&amp;quot; , sans-serif; font-size: 18px;&quot;&gt;&amp;nbsp;was showing&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;strong style=&quot;background-color: white; border: 0px; box-sizing: border-box; color: #666666; font-family: &amp;quot;source sans pro&amp;quot;, sans-serif; font-size: 18px; margin: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;“No wireless interface found”&lt;/strong&gt;&lt;span style=&quot;background-color: white; border: 0px; box-sizing: border-box; color: #666666; font-family: &amp;quot;source sans pro&amp;quot; , sans-serif; font-size: 18px; margin: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;. To fix that I needed to write this in /etc/network/interfaces file:&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666666; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;&quot;&gt;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: white; border: 0px; box-sizing: border-box; color: #666666; font-family: &amp;quot;source sans pro&amp;quot; , sans-serif; font-size: 18px; margin: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;br /&gt;
&lt;div class=&quot;line number1 index0 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;# Include files from /etc/network/interfaces.d:&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number2 index1 alt1&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;source-directory /etc/network/interfaces.d&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number3 index2 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;line number4 index3 alt1&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;auto lo&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number5 index4 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;iface lo inet loopback&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number6 index5 alt1&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;line number7 index6 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;auto eth0&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number8 index7 alt1&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;iface eth0 inet manual&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number9 index8 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;line number10 index9 alt1&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;allow-hotplug wlan0&lt;/code&gt;&lt;/div&gt;
&lt;span style=&quot;background-color: white; border: 0px; box-sizing: border-box; color: #666666; font-family: &amp;quot;source sans pro&amp;quot; , sans-serif; font-size: 18px; margin: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class=&quot;line number11 index10 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;iface wlan0 inet manual&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number11 index10 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;&lt;br /&gt;&lt;/code&gt;&lt;/div&gt;
&lt;div class=&quot;line number11 index10 alt2&quot; style=&quot;background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #666666; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !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; zoom: 1;&quot;&gt;
&lt;code class=&quot;php plain&quot; style=&quot;background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, &amp;quot;Bitstream Vera Sans Mono&amp;quot;, &amp;quot;Courier New&amp;quot;, Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;&quot;&gt;and reboot the Raspberry PI.&lt;/code&gt;&lt;/div&gt;
&lt;strong style=&quot;background-color: white; border: 0px; box-sizing: border-box; color: #666666; font-family: &amp;quot;Source Sans Pro&amp;quot;, sans-serif; font-size: 18px; margin: 0px; padding: 0px; vertical-align: baseline;&quot;&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/3995586686736117349/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/3995586686736117349' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/3995586686736117349'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/3995586686736117349'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2019/08/raspberry-pi-no-wireless-interface-found.html' title='Raspberry PI &quot;No wireless interface found&quot;'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-6084803054299806765</id><published>2019-07-01T11:34:00.001+09:30</published><updated>2019-07-02T15:01:51.123+09:30</updated><title type='text'>Programming Languages Frameworks</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In the last two previous posts I listed the current most
popular or used programming languages based on the IEEE investigations and the GitHub
statistics. For someone interested in becoming a software developer it might seem
that if they learn and master a programming language such as JavaScript or C++ then
they can immediately work on any project using one of these languages. That used
to be the case may be 10 years ago but these days on top of each programming
language we also have a programming language framework. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Frameworks extend a programming language and provide a
particular way of performing different tasks. Each framework has its own
structure and convention of programming which takes some time for a developer to
learn and become familiar with.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
For JavaScript we currently have &lt;b&gt;Angular.js&lt;/b&gt;, &lt;b&gt;Vue.js&lt;/b&gt;, &lt;b&gt;React.js&lt;/b&gt;,
&lt;b&gt;Ember.js&lt;/b&gt;, &lt;b&gt;Backbone.js&lt;/b&gt;, and &lt;b&gt;Aurelia.js&lt;/b&gt;&amp;nbsp;just to name a few. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In C++ we have &lt;b&gt;Qt&lt;/b&gt; and &lt;b&gt;Boost&lt;/b&gt; as probably the most widely used
frameworks.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
To be a competent software developer these days one has to not
only be proficient in a programming language but also the main frameworks used
by that programming language.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/6084803054299806765/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/6084803054299806765' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6084803054299806765'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6084803054299806765'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2019/07/software-development-frameworks.html' title='Programming Languages Frameworks'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-4067689969568666145</id><published>2019-06-19T12:38:00.001+09:30</published><updated>2019-06-21T15:05:36.380+09:30</updated><title type='text'>The top 10 programming languages (IEEE Spectrum rankings)</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
In a previous &lt;a href=&quot;https://morrisbahrami.blogspot.com/2019/06/the-top-10-most-used-programming.html&quot; target=&quot;_blank&quot;&gt;post&lt;/a&gt; I listed the top 10 programming languages based on GitHub usage. The IEEE Spectrum has a different ranking based on search, social media, job listing trends,&lt;br /&gt;
&amp;nbsp;GitHub repositories, and mentions in journal articles. Details are at&lt;br /&gt;
&lt;a href=&quot;https://spectrum.ieee.org/at-work/innovation/the-2018-top-programming-languages&quot; target=&quot;_blank&quot;&gt;IEEE 2018 Top Programming Languages&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
The IEEE ranking is shown below:&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDoT0msVTNF4sLJGY6-LZi7dejaaudBDmjcBxOEMFyPRDlWhP66_f-OpssRIqeP2GycyZJPNAtu-hLKPAvNp8SUa6ejpisRnodznt1akE_xsUrYf3XGoXfTd1Lp9djCLztWvhfq4Ib-KWN/s1600/Capture.PNG&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;314&quot; data-original-width=&quot;534&quot; height=&quot;376&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDoT0msVTNF4sLJGY6-LZi7dejaaudBDmjcBxOEMFyPRDlWhP66_f-OpssRIqeP2GycyZJPNAtu-hLKPAvNp8SUa6ejpisRnodznt1akE_xsUrYf3XGoXfTd1Lp9djCLztWvhfq4Ib-KWN/s640/Capture.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
Javascript is the top language in the GitHub listing but is ranked 8th in IEEE listing. Probably a Javascript piece of code is more likely to be deposited to the GitHub than a Python or C++ piece of code.&lt;br /&gt;
&lt;br /&gt;
The IEEE listing also indicates the domain a language is used in (being web, mobile, desktop or embedded).&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/4067689969568666145/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/4067689969568666145' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/4067689969568666145'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/4067689969568666145'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2019/06/the-top-10-programming-languages-ieee.html' title='The top 10 programming languages (IEEE Spectrum rankings)'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDoT0msVTNF4sLJGY6-LZi7dejaaudBDmjcBxOEMFyPRDlWhP66_f-OpssRIqeP2GycyZJPNAtu-hLKPAvNp8SUa6ejpisRnodznt1akE_xsUrYf3XGoXfTd1Lp9djCLztWvhfq4Ib-KWN/s72-c/Capture.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8020758395098319520</id><published>2019-06-16T13:27:00.000+09:30</published><updated>2019-06-16T13:27:32.149+09:30</updated><title type='text'>The top 10 most used programming languages</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
The top 10 most used programming languages based on Github statistics is shown below:&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysRWpZ0eAHwK1tGi9cXFHvt_-qGxeVWZUPnVAXNBX-S6Yl7pRLo1x61oCr6clpN2G2HokcxhkI2TlvDDN_mUQ4zfzuCQRSmBu1dUEAYRG9d50CjUjo_k781dFtq1EWThs9MIXDh4MIq2d/s1600/Capture1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;604&quot; data-original-width=&quot;713&quot; height=&quot;542&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysRWpZ0eAHwK1tGi9cXFHvt_-qGxeVWZUPnVAXNBX-S6Yl7pRLo1x61oCr6clpN2G2HokcxhkI2TlvDDN_mUQ4zfzuCQRSmBu1dUEAYRG9d50CjUjo_k781dFtq1EWThs9MIXDh4MIq2d/s640/Capture1.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
As the above graph shows Javascript, Java, Python and PHP have been the top 4 languages used in the last 4 years.&lt;br /&gt;
&lt;br /&gt;
I imagine in the future we would see PHP declining in usage as I don&#39;t see any good reason these days for using it in a new application. Client side frameworks such as Angular and React are the architecture of choice these days.&lt;br /&gt;
&lt;br /&gt;
Typescript would continue to increase in usage, partly because of Angular now being Typescript based.&lt;br /&gt;
&lt;br /&gt;
Objective C has lost its top 10 position in last 2 years. New mobile application are more likely to be Cordova (Javascript) or Xamarin(C#) based. Even for iOS specific systems Swift has replaced Objective C but Swift is still not a top 10 programming language.&lt;br /&gt;
&lt;br /&gt;
Shell and C++ have received more attention lately which I think is due to wider usage of Linux based systems in recent years.&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8020758395098319520/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8020758395098319520' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8020758395098319520'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8020758395098319520'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2019/06/the-top-10-most-used-programming.html' title='The top 10 most used programming languages'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgysRWpZ0eAHwK1tGi9cXFHvt_-qGxeVWZUPnVAXNBX-S6Yl7pRLo1x61oCr6clpN2G2HokcxhkI2TlvDDN_mUQ4zfzuCQRSmBu1dUEAYRG9d50CjUjo_k781dFtq1EWThs9MIXDh4MIq2d/s72-c/Capture1.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-6974426341379530937</id><published>2018-12-04T12:50:00.000+10:30</published><updated>2018-12-04T12:52:18.193+10:30</updated><title type='text'>Increasing the size of DatePicker icon in WPF</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11.0pt; line-height: 107%;&quot;&gt;The
default DatePicker control in WPF looks like this:&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11.0pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11.0pt; line-height: 107%;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iiuHY4mcz31ydEMo8ej2T45LvMD-bnbJEkiX5OnPuQ5UqO9S7x29rqzFZTcdnqLC5YPaWH1pM-nv2J6PXjRjhSZbxzvO0t0t3tMMGo_AP_ezqTrwisRJYTrDL3eaYjpqOlqn7uQSil7E/s1600/1.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iiuHY4mcz31ydEMo8ej2T45LvMD-bnbJEkiX5OnPuQ5UqO9S7x29rqzFZTcdnqLC5YPaWH1pM-nv2J6PXjRjhSZbxzvO0t0t3tMMGo_AP_ezqTrwisRJYTrDL3eaYjpqOlqn7uQSil7E/s400/1.PNG&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11pt;&quot;&gt;In a desktop application you can click on the icon (which has number 15 on it) to get the calendar to pick a date. That works OK on a desktop application with a mouse but on a touch screen device the default icon is too small for easy touch which would annoy the user.&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif;&quot;&gt;&lt;span style=&quot;font-size: 14.6667px;&quot;&gt;When you add a DatePicker to your WPF application the code that you get is the following:&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif;&quot;&gt;&lt;span style=&quot;font-size: 14.6667px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif;&quot;&gt;&lt;span style=&quot;font-size: 14.6667px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;&quot;&gt;
&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #a31515; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;Grid&lt;/span&gt;&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&quot;color: #a31515; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;DatePicker&lt;/span&gt;&lt;span style=&quot;color: red; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt; HorizontalAlignment&lt;/span&gt;&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;=&quot;Left&quot;&lt;/span&gt;&lt;span style=&quot;color: red; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&amp;nbsp;Margin&lt;/span&gt;&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;=&quot;145,114,0,0&quot;&lt;/span&gt;&lt;span style=&quot;color: red; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&amp;nbsp;VerticalAlignment&lt;/span&gt;&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;=&quot;Top&quot;/&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span style=&quot;color: #a31515; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;Grid&lt;/span&gt;&lt;span style=&quot;color: blue; font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&amp;gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11pt;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11.0pt; line-height: 107%;&quot;&gt;You cannot change the size of the icon in this code. You need the extended code behind for the template used by DatePicker.&amp;nbsp; To get that you need to right click on the DatePicker control in Visual Studio and select &lt;i&gt;Edit Templates -&amp;gt; Edit a Copy ...&lt;/i&gt; as shown below:&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11.0pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11.0pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11.0pt; line-height: 107%;&quot;&gt;&amp;nbsp;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh106d-F0zjhyxVCnqswPI8NN9UvqzT_2YdIpw91_T6fKZHF3lWcBQwVBQD_3ToicsD8HANa8ecSqvkEkB_LzZBGoaK36evhneEVDR0tnDIhgGhldE-uxamFqMBgQW1xOLPHjk1mVjcxhy0/s1600/2.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;400&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh106d-F0zjhyxVCnqswPI8NN9UvqzT_2YdIpw91_T6fKZHF3lWcBQwVBQD_3ToicsD8HANa8ecSqvkEkB_LzZBGoaK36evhneEVDR0tnDIhgGhldE-uxamFqMBgQW1xOLPHjk1mVjcxhy0/s400/2.PNG&quot; width=&quot;365&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This will first bring up a dialog as shown below&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHY0QyjZIJE_hUsh06LuJtvZ2YcNv2LJrq4V1fX3D938xG4KChiAaSr2KqfYIRdyOndwWwmqfzdtax6pNy6N8tdbJST1YnpnJOPN2K89CIf5evlBqIWfo63yZrcYygLZsdlC2zemF6cXMn/s1600/3.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;201&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHY0QyjZIJE_hUsh06LuJtvZ2YcNv2LJrq4V1fX3D938xG4KChiAaSr2KqfYIRdyOndwWwmqfzdtax6pNy6N8tdbJST1YnpnJOPN2K89CIf5evlBqIWfo63yZrcYygLZsdlC2zemF6cXMn/s320/3.PNG&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
It will then add the template code to your file. In the extended code the line highlighted below represents the button containing the icon.&lt;br /&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjXzYNDRJeQAnHt5u7Gm7qwlRWtnATN3BhYQJhV5MpOkE-4SJBmu0JS81O2-fVJeRxYB_IDBoon2B2O9F3RTk6yPdMTfxqQR0e6NcwF3YkxaknTOilq__LJkuNNvf0isJ8wF0_YTIia7RZ/s1600/4.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;72&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjXzYNDRJeQAnHt5u7Gm7qwlRWtnATN3BhYQJhV5MpOkE-4SJBmu0JS81O2-fVJeRxYB_IDBoon2B2O9F3RTk6yPdMTfxqQR0e6NcwF3YkxaknTOilq__LJkuNNvf0isJ8wF0_YTIia7RZ/s640/4.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
You can extend the width in this line from default 20 pixel
to say 30. Also find the Grid that contains this button and change its width and
Height values.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cPW1g65SNIyTGHPf9rZxn10cw48dYoP-6V8Gz-6-EXjlZHQ0pQzZJw9WPENnHrfY5yVhZz9mmyC1-RPk5YimdprGBmgyzjdPGZ0bq2xeplpCVqB_jINxOqjJzl2i_3RhyphenhyphenbFmb-ou4eg8/s1600/5.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;126&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cPW1g65SNIyTGHPf9rZxn10cw48dYoP-6V8Gz-6-EXjlZHQ0pQzZJw9WPENnHrfY5yVhZz9mmyC1-RPk5YimdprGBmgyzjdPGZ0bq2xeplpCVqB_jINxOqjJzl2i_3RhyphenhyphenbFmb-ou4eg8/s640/5.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The default values are Height =”18” and Width=19” that you
can increase (to say 30) for better usability on touch screen devices.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/6974426341379530937/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/6974426341379530937' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6974426341379530937'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6974426341379530937'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2018/12/increasing-size-of-datepicker-icon-in.html' title='Increasing the size of DatePicker icon in WPF'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iiuHY4mcz31ydEMo8ej2T45LvMD-bnbJEkiX5OnPuQ5UqO9S7x29rqzFZTcdnqLC5YPaWH1pM-nv2J6PXjRjhSZbxzvO0t0t3tMMGo_AP_ezqTrwisRJYTrDL3eaYjpqOlqn7uQSil7E/s72-c/1.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8528172666106318022</id><published>2018-10-05T09:14:00.005+09:30</published><updated>2018-10-05T09:16:14.920+09:30</updated><title type='text'>Electron Framework</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YKYwF2kn-ZOFylvxjaFh3SRypU_Wzb4JOnY1NxfSmv9ScteIMuYV0KCd372Enl-XHdRcJ1CmhchAxC3-bkG4yUwVO3VOMPuzzwJcXkYwOeMjQHCjvCEc4y5okxA406WFjiqRcAd6mV_c/s1600/1.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;120&quot; data-original-width=&quot;120&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YKYwF2kn-ZOFylvxjaFh3SRypU_Wzb4JOnY1NxfSmv9ScteIMuYV0KCd372Enl-XHdRcJ1CmhchAxC3-bkG4yUwVO3VOMPuzzwJcXkYwOeMjQHCjvCEc4y5okxA406WFjiqRcAd6mV_c/s1600/1.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
You might have heard of Cordova framework where languages
and tools used for developing web sites (i.e. HTML, Javascript and CSS) are
used to make mobile phone native applications. This concept can be extended further
to desktop application using Electron framework.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Electron framework allows you to develop native Window,
Linux or Mac application using the same tools that are used in developing web
applications. By using this approach, the development team only need to learn
and master one way of developing UI. The other benefit is that applications
developed for desktop can easily be adjusted to be displayed on web instead of whole
new rewrite. As you would expect an Electron application feels like a web site
although being a desktop application.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
You can think of Electron framework as a web server and a browser
combined in one application. The web server side is a slightly modified Node.js
and the browser is a slightly modified Chromium. Chromium is the open source version
of Chrome that the developer community can use. &lt;span style=&quot;color: #222222; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 10.5pt; line-height: 107%;&quot;&gt;The two browsers
share the majority of code and features&lt;/span&gt;. Node.js is also open source so
the whole Electron framework is based on open source.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
To run Electron, make sure you have installed Git and Node.js.
Then follow these to get a skeleton Electron based application working on your
computer.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;background: #F6F8FA; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;&quot;&gt;
&lt;span style=&quot;color: #6a737d; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;# Clone this repository&lt;/span&gt;&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;background: #F6F8FA; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;&quot;&gt;
&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;git clone https://github.com/electron/electron-quick-start&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;background: #F6F8FA; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;&quot;&gt;
&lt;span style=&quot;color: #6a737d; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;# Go into the repository&lt;/span&gt;&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;background: #F6F8FA; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;&quot;&gt;
&lt;span style=&quot;color: #005cc5; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;cd&lt;/span&gt;&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt; electron-quick-start&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;background: #F6F8FA; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;&quot;&gt;
&lt;span style=&quot;color: #6a737d; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;# Install dependencies&lt;/span&gt;&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;background: #F6F8FA; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;&quot;&gt;
&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;npm install&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot; style=&quot;background: #F6F8FA; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;&quot;&gt;
&lt;span style=&quot;color: #6a737d; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;# Run the app&lt;/span&gt;&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt;&quot;&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt; line-height: 107%;&quot;&gt;npm start&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
Electron is developed and maintained by Github and is used in many well-known desktop applications such as Slack, Spotify and Visual Studio Code to name a few.&lt;br /&gt;
&lt;br /&gt;
The initial release was 2013 and the latest version is 3.0.0. For more info go to https://github.com/electron/electron&amp;nbsp; and https://electronjs.org/&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;color: #24292e; font-family: &amp;quot;consolas&amp;quot;; font-size: 10.0pt; line-height: 107%;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8528172666106318022/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8528172666106318022' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8528172666106318022'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8528172666106318022'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2018/10/electron-framework.html' title='Electron Framework'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YKYwF2kn-ZOFylvxjaFh3SRypU_Wzb4JOnY1NxfSmv9ScteIMuYV0KCd372Enl-XHdRcJ1CmhchAxC3-bkG4yUwVO3VOMPuzzwJcXkYwOeMjQHCjvCEc4y5okxA406WFjiqRcAd6mV_c/s72-c/1.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-1238649877060756477</id><published>2018-05-31T11:24:00.003+09:30</published><updated>2018-05-31T11:24:34.939+09:30</updated><title type='text'>Enabling Remote Access to SQL Server </title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
When you install SQL Server on a server, remote access to that is disabled by default as a security measure. To enable remote access to a SQL Server you need to perform the following steps:&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
1.&amp;nbsp;&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;When installing SQL Server on a machine,&amp;nbsp; tick the box to install&amp;nbsp; “Client Tools Connectivity” too . With that you get “SQL Server Configuration Manager” that you need later.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;2. In “SQL Server Configuration Manager” under connections select “TCP/IP enable”. Then restart SQL Server service.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;3.&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;In “SQL Server Configuration Manager” start “SQL Server Browser” service.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;4.&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #26282a; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 13px;&quot;&gt;In Windows fire walls settings open Inbound and Outbound channels for (SQL Server – port 14343 TCP/IP)&amp;nbsp; and (SQL Server Browser – port 1434 &amp;nbsp;UDP).&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/1238649877060756477/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/1238649877060756477' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/1238649877060756477'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/1238649877060756477'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2018/05/enabling-remote-access-to-sql-server.html' title='Enabling Remote Access to SQL Server '/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-805927191411959286</id><published>2017-12-19T16:46:00.000+10:30</published><updated>2017-12-19T16:46:17.082+10:30</updated><title type='text'>New Angular Template Project in Visual Studio 2017</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The latest update of Visual Studio 2017 (version 15.5.2) has
new template projects for ASP.NET Core applications.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&amp;nbsp;In Visual Studio 2017 when
you select File &amp;gt; New &amp;gt; Project, you now get this&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRiqTVNQBkGnQ5nkop7IjUxXtW9C_JbYkiqVZUex4IU_TjGOtjfqrIbjTn6zNXb_0wzyGb2Sd2ImOqEEcMZ4VmxImqIMAK0cAaabIUR8I3aWHmXQb6XMkDUH1vzCdtiaEuXn0RubGW8Eve/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;579&quot; data-original-width=&quot;938&quot; height=&quot;393&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRiqTVNQBkGnQ5nkop7IjUxXtW9C_JbYkiqVZUex4IU_TjGOtjfqrIbjTn6zNXb_0wzyGb2Sd2ImOqEEcMZ4VmxImqIMAK0cAaabIUR8I3aWHmXQb6XMkDUH1vzCdtiaEuXn0RubGW8Eve/s640/1.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
If you select the subcategory Web Site then you get the following:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjG5INjMZ4t3Z5uosQIBpmkoKDmd5_QSXoGUvf_owT-kfrVUcrFzlGh97MrVKB0P1-wadNHkZhFIjd5a8l2zsvNeDe7dtNysxb7xo99a8TTyEGnuW2zXgf7TZzGKh7O1Howhj0EE-DIfln/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;573&quot; data-original-width=&quot;939&quot; height=&quot;390&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjG5INjMZ4t3Z5uosQIBpmkoKDmd5_QSXoGUvf_owT-kfrVUcrFzlGh97MrVKB0P1-wadNHkZhFIjd5a8l2zsvNeDe7dtNysxb7xo99a8TTyEGnuW2zXgf7TZzGKh7O1Howhj0EE-DIfln/s640/2.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In the original screen if we select &quot;ASP.NET Core Web Application&quot; as shown below:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFC8BWUp8tyRGmY0Ol-eTCy5t9xCUe2AKo-m-4uevCGHsm0hXWtYXsIaJs2ZHX4OFUK6ItwZjSIB-nBnFmbeWUyzoqWlpyuCe7bOzBpo0V2rXbEVeyufuNuoSgsJK1xmZ-HE6aYw_s1-g/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;570&quot; data-original-width=&quot;938&quot; height=&quot;388&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFC8BWUp8tyRGmY0Ol-eTCy5t9xCUe2AKo-m-4uevCGHsm0hXWtYXsIaJs2ZHX4OFUK6ItwZjSIB-nBnFmbeWUyzoqWlpyuCe7bOzBpo0V2rXbEVeyufuNuoSgsJK1xmZ-HE6aYw_s1-g/s640/3.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
We will be given the following choices:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhtu78fXaYMVwALUC3whyphenhyphendzjzr28bpn1xQAvlY-A19FlZCnpnfiL-RkXW4E1CBvG2-R5Z6cODw82IfMRtvDmU6C3F85Np_zywgtji6HQHChB7gG9HcVMA8mwh57zLn1RyuDRunkYd1c4i/s1600/4.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;509&quot; data-original-width=&quot;787&quot; height=&quot;412&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhtu78fXaYMVwALUC3whyphenhyphendzjzr28bpn1xQAvlY-A19FlZCnpnfiL-RkXW4E1CBvG2-R5Z6cODw82IfMRtvDmU6C3F85Np_zywgtji6HQHChB7gG9HcVMA8mwh57zLn1RyuDRunkYd1c4i/s640/4.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
As you see in above screenshot you can now choose between a number of options including Web API, React.js and Angular. If you choose Angular you will get a project template that can run without any modifications and will bring this web page:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAVeKRvMx0xqknKrllrha7RPVgm8W6qlvOT1-0UR_cmSMK22AvokT4wuBQDVvqFEzx4sliRJXAT2X8mLYd85_L1-2LkHHzG-3ZYOl5DPD3hqmFqPuTO6rwUdttNA1V28bphokqw-G_Aqc/s1600/5.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;480&quot; data-original-width=&quot;976&quot; height=&quot;314&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAVeKRvMx0xqknKrllrha7RPVgm8W6qlvOT1-0UR_cmSMK22AvokT4wuBQDVvqFEzx4sliRJXAT2X8mLYd85_L1-2LkHHzG-3ZYOl5DPD3hqmFqPuTO6rwUdttNA1V28bphokqw-G_Aqc/s640/5.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
As the template indicates, this application uses ASP.NET Core for the back end and Angular for the front end. It also uses Webpack for the front end building and bundling and Bootstrap for layout and styling.&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The solution in the Solution Explorer looks like this:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGPKpmXHekxnlE4shlx3P53PNtG2IZjt50Quggg1qZ6d0p-Dt6fKygwKabJYsFHM2YgLsSr8Mvw2tVDjJL3olXSgA-Oevs5rLAKbmcsLVZc2wMhNRwFP9H67tBILrp6lrsGfPILvpGseL/s1600/6.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;561&quot; data-original-width=&quot;359&quot; height=&quot;400&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGPKpmXHekxnlE4shlx3P53PNtG2IZjt50Quggg1qZ6d0p-Dt6fKygwKabJYsFHM2YgLsSr8Mvw2tVDjJL3olXSgA-Oevs5rLAKbmcsLVZc2wMhNRwFP9H67tBILrp6lrsGfPILvpGseL/s400/6.PNG&quot; width=&quot;255&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/805927191411959286/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/805927191411959286' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/805927191411959286'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/805927191411959286'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/12/new-angular-template-project-in-visual.html' title='New Angular Template Project in Visual Studio 2017'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRiqTVNQBkGnQ5nkop7IjUxXtW9C_JbYkiqVZUex4IU_TjGOtjfqrIbjTn6zNXb_0wzyGb2Sd2ImOqEEcMZ4VmxImqIMAK0cAaabIUR8I3aWHmXQb6XMkDUH1vzCdtiaEuXn0RubGW8Eve/s72-c/1.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-4787119111326403668</id><published>2017-12-13T13:40:00.002+10:30</published><updated>2020-06-10T12:38:06.433+09:30</updated><title type='text'>Software Technology Jobs in Australian Capital Cities</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
seek.com.au is the most popular job hunting site in Australia. I did a search on the number of jobs that are advertised for Australia capital cities on 12/12/2017 on this site using different technologies as key words. The result is shown below:&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivd7MU8ugxW0zEGttXCefVWFieJPS-vcbvAiGgu0Ag_Yi3BNhx3Dqw-i9e-pPRqkgW_C6dF-4wMeAAPv5ot7_ao6p7eIV-mjHRiVw4AxqWfS2wg8ogzhTTlJtThajKd_f8r5W-YeI76Q-q/s1600/Software+Technologies.PNG&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;395&quot; data-original-width=&quot;674&quot; height=&quot;374&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivd7MU8ugxW0zEGttXCefVWFieJPS-vcbvAiGgu0Ag_Yi3BNhx3Dqw-i9e-pPRqkgW_C6dF-4wMeAAPv5ot7_ao6p7eIV-mjHRiVw4AxqWfS2wg8ogzhTTlJtThajKd_f8r5W-YeI76Q-q/s640/Software+Technologies.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Two things to note from this chart:&lt;br /&gt;
&lt;br /&gt;
Firstly, availability of software jobs is very much dependent on the city. For example there are a lot more jobs available in Sydney than any other city in Australia. That is expected as Sydney has the highest population but even when you take into account the population the advertised software engineering positions in Sydney are a lot more than a city like Adelaide. Sydney has a population of 5 million compared with Adelaide which is only 1.2 million so you expect Sydney to have 5 times more jobs than Adelaide but as you can see from the above graph the ratio is 14 times for Java and 15 times for HTML.&lt;br /&gt;
&lt;br /&gt;
The other point to notice is the the technology mix in demand and whether it is worth your time to learn and master a technology which compared with other technologies has a lower level of demand in the job market at the moment.&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/4787119111326403668/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/4787119111326403668' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/4787119111326403668'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/4787119111326403668'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/12/software-technology-jobs-in-australian.html' title='Software Technology Jobs in Australian Capital Cities'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivd7MU8ugxW0zEGttXCefVWFieJPS-vcbvAiGgu0Ag_Yi3BNhx3Dqw-i9e-pPRqkgW_C6dF-4wMeAAPv5ot7_ao6p7eIV-mjHRiVw4AxqWfS2wg8ogzhTTlJtThajKd_f8r5W-YeI76Q-q/s72-c/Software+Technologies.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8068333136445484169</id><published>2017-11-29T16:26:00.002+10:30</published><updated>2017-12-16T09:19:06.871+10:30</updated><title type='text'>Web API with Angular – Part 6 – Angular Service Connection to Back End</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In the previous posts we created an Angular service with a
method called &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson()&lt;/span&gt;. That method was returning a fixed text. At this post
we connect that angular service to the back end so &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson()&lt;/span&gt;gets its data from the back end.&lt;o:p&gt;&lt;/o:p&gt;&lt;br /&gt;
&lt;br /&gt;
Our Web API and the angular project are running on different port numbers (50135 for Web API in this example vs 4200 for angular). This constitute a Cross Origin Resource Sharing (CORS) situation. For this to work we need to modify our Web API to enable CORS. First we need to install CORS package by typing:&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Install-Package Microsoft.AspNet.WebApi.Cors&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Then in file &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;App_Start/WebApiConfig.cs&lt;/span&gt; add the following code to the &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;WebApiConfig.Register&lt;/span&gt; method.&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;config.EnableCors();&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
And add the following&amp;nbsp;attribute to the &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;PeopleController&lt;/span&gt; class:&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp;&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;[EnableCors(origins: &quot;http://localhost:4200&quot;, headers: &quot;*&quot;, methods: &quot;*&quot;)]&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp;This will allow any ajax request from localhost:4200 to go through.&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
A service method like &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson()&lt;/span&gt;&amp;nbsp;in angular cannot be a synchronous one. It takes time for a request
to get to the back end and the result be returned back.
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson()&lt;/span&gt; can take a callback, or it can turn a &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Promise&lt;/span&gt; or an &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Observable&lt;/span&gt;. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Callbacks generally result in messy code with limited
error handling. &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Promises &lt;/span&gt;and &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Observables &lt;/span&gt;provides an alternative to callbacks
resulting in a cleaner code. They both create an abstractions that help us deal
with the asynchronous nature of our applications. AngularJS is based on &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Promises&lt;/span&gt; but Angular 2 uses &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Observables&lt;/span&gt; because
they can define both the setup and tear-down steps and they can be cancelled or re-tried.&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
To use &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Observable&lt;/span&gt; in &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;PersonService&lt;/span&gt; we first need to define a Person class (in &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.ts&lt;/span&gt;). The structure of this class would be similar to&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt; Person.c&lt;/span&gt; model in our back end:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaZMHsik2MLueBfgDQ1HA4gIOIJQIZuhQknTl_01N6QZKaCela6wz7kJ1eeZGXRnk1xqlFWyzMBtaNNCP_ySoR7BK6zTpy3gqEmO3Of9hyphenhypheneu6rhXXyXkuBEsesJYh_1MS7r3_lQ8N2UFi/s1600/1.png&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;100&quot; data-original-width=&quot;209&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaZMHsik2MLueBfgDQ1HA4gIOIJQIZuhQknTl_01N6QZKaCela6wz7kJ1eeZGXRnk1xqlFWyzMBtaNNCP_ySoR7BK6zTpy3gqEmO3Of9hyphenhypheneu6rhXXyXkuBEsesJYh_1MS7r3_lQ8N2UFi/s1600/1.png&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
Now we need to import that and &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;Observable&lt;/span&gt;
and &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;of &lt;/span&gt;symbols from RxJS to&amp;nbsp;&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.service.ts&lt;/span&gt;&amp;nbsp;:&lt;br /&gt;
&lt;br /&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;import { Person } from &#39;./person&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;import { Observable } from &#39;rxjs/Observable&#39;;&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;import { of } from &#39;rxjs/observable/of&#39;;&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Also replace the &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson&lt;/span&gt; method with this one.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson(): Observable&amp;lt;Person[]&amp;gt; {&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; return of(Persons);&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;}&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
We need to reflect this change in &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.component.ts&lt;/span&gt;.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
From this:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp; getPerson(): void {&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; this.person =
this.personService.getPerson();&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; }&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
To this:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson(): void {&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp;
this.personService.getPerson()&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
.subscribe(person =&amp;gt; this.person = person);&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;}&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Angular communicates with the back end server through
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;HttpClient&lt;/span&gt;. To make &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;HttpClient &lt;/span&gt;available we need to import it into &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;AppModule&lt;/span&gt; and&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;and add it to the &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;@NgModule&lt;/span&gt;.imports array.The result &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app.module.ts&lt;/span&gt; is shown below:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72WgRjGzY37M7-vGMGhGEMW-iiWGw9W3ZXWo-t5dFlFQiy6_XxWqe5gjdEzoIA-aW2VDUlZ4tX_MB4Ym1nUdpIuzN8O6oh1KlCSqrxAJITYlnHTxEsDNk8zsB8uKN8NjEor-nlbVytg_r/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;405&quot; data-original-width=&quot;506&quot; height=&quot;320&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72WgRjGzY37M7-vGMGhGEMW-iiWGw9W3ZXWo-t5dFlFQiy6_XxWqe5gjdEzoIA-aW2VDUlZ4tX_MB4Ym1nUdpIuzN8O6oh1KlCSqrxAJITYlnHTxEsDNk8zsB8uKN8NjEor-nlbVytg_r/s400/3.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Then import &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;httpClient&lt;/span&gt; to &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.service.ts,&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;inject it into constructor and modify the &lt;/span&gt;&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson()&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;method. The result is shown below:&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSNOQVV4ZzDg-GGz-6EGO-GgZzHVqr1Brl3sdLte6duuFkP7GOozuw8snhGRAMkkJaOgIX5_HDaGMexNEEv6eg7ooHqW5UGQgi9UOO-8WBacMBrINDdWkRHiW_TqQMQtgGJ_FkOjw1iYD/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;352&quot; data-original-width=&quot;700&quot; height=&quot;320&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSNOQVV4ZzDg-GGz-6EGO-GgZzHVqr1Brl3sdLte6duuFkP7GOozuw8snhGRAMkkJaOgIX5_HDaGMexNEEv6eg7ooHqW5UGQgi9UOO-8WBacMBrINDdWkRHiW_TqQMQtgGJ_FkOjw1iYD/s640/2.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
With these modifications in place the angular service can use the Web API as its data source as shown below, note the name Fred Green comes form Web API:&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS19MqJ4VE5R97pZE6jT6g377zHD4TA_VqQMM8nhlyd8U4zm63y1U7anwfmB5-0nbaha-CcEBIjCg2BERTaMfoDAp3krIX9EvQTWnzj5kon_FcOXI8QRRIRcxVkdDs5TI79h6HF9mC2y1r/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;404&quot; data-original-width=&quot;620&quot; height=&quot;416&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS19MqJ4VE5R97pZE6jT6g377zHD4TA_VqQMM8nhlyd8U4zm63y1U7anwfmB5-0nbaha-CcEBIjCg2BERTaMfoDAp3krIX9EvQTWnzj5kon_FcOXI8QRRIRcxVkdDs5TI79h6HF9mC2y1r/s640/1.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
The latest version of files are shown below:&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.ts&lt;/span&gt;:&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpiuIx1-Ih2hewK0cMEOPZIhvemeAQhhqM8-WjqxzuxjeOb6f_TUbpCxZLo9qpU2tHi1VP-pe_KGl6HAk519on9fccFCCWYOG0kSvEF03YmbUvpvzhL95L-GY08hoIesZBJ5sLVl_khvHL/s1600/4.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;105&quot; data-original-width=&quot;220&quot; height=&quot;95&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpiuIx1-Ih2hewK0cMEOPZIhvemeAQhhqM8-WjqxzuxjeOb6f_TUbpCxZLo9qpU2tHi1VP-pe_KGl6HAk519on9fccFCCWYOG0kSvEF03YmbUvpvzhL95L-GY08hoIesZBJ5sLVl_khvHL/s200/4.PNG&quot; width=&quot;200&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.service.ts:&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDtI11WpAUErnAQAnmkY71J6P_TyV2iwmXM4wU5xhEG4E7SCH5R-rzpcOWQ9xDLVji1E75FZHfY8ublzbMqVHcF-U4hyphenhyphenDDE6vMGMFxTRuZkjIxEwEvrP4GPMzTXfgCISPxgeA5uBLQa0Q/s1600/5.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;359&quot; data-original-width=&quot;553&quot; height=&quot;412&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDtI11WpAUErnAQAnmkY71J6P_TyV2iwmXM4wU5xhEG4E7SCH5R-rzpcOWQ9xDLVji1E75FZHfY8ublzbMqVHcF-U4hyphenhyphenDDE6vMGMFxTRuZkjIxEwEvrP4GPMzTXfgCISPxgeA5uBLQa0Q/s640/5.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.component.html&lt;/span&gt;:&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8X1hutumbyli_Z6mMBecyJX-ejKi-f2VqcKdm4JskcmfMu4lb_o7KoAWOxDCPXnNMa78lbunsmZV8GA-E_6dBKTv_RwNCcdJoDVZ0ivSvnPrJmpm4N9Jx-h0ubMaq-0II9oQCv2czGkh/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;90&quot; data-original-width=&quot;360&quot; height=&quot;80&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8X1hutumbyli_Z6mMBecyJX-ejKi-f2VqcKdm4JskcmfMu4lb_o7KoAWOxDCPXnNMa78lbunsmZV8GA-E_6dBKTv_RwNCcdJoDVZ0ivSvnPrJmpm4N9Jx-h0ubMaq-0II9oQCv2czGkh/s320/2.PNG&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.component.ts:&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZs6TzUWKaeDoBivJ7dOEQYEMoFAYakgcnS_VROoXv-EYswTB66TpwHj7g-6Vx8TKyqrp_joRrC4_2PwC6iaxtao-zWYm6QtTrEUe9pR0U8SGMkZtBafoLTFTv1z6e65WgPfMmjTBN5_9H/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;438&quot; data-original-width=&quot;479&quot; height=&quot;365&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZs6TzUWKaeDoBivJ7dOEQYEMoFAYakgcnS_VROoXv-EYswTB66TpwHj7g-6Vx8TKyqrp_joRrC4_2PwC6iaxtao-zWYm6QtTrEUe9pR0U8SGMkZtBafoLTFTv1z6e65WgPfMmjTBN5_9H/s400/3.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app.module.ts:&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhahoClCJIXHezGO2GGxJKhDXIO6pPcH_CDaehORtxxLhuLyJ2z6jCHyeCFC58-YCMAizPVi_TEp55LqgkuQDEM_2K-4NbvGVi9jaFWLZPCBFPTKwj9JAz1NigjYnd2FZQjIrUE0BZMu1ca/s1600/6.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;422&quot; data-original-width=&quot;521&quot; height=&quot;323&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhahoClCJIXHezGO2GGxJKhDXIO6pPcH_CDaehORtxxLhuLyJ2z6jCHyeCFC58-YCMAizPVi_TEp55LqgkuQDEM_2K-4NbvGVi9jaFWLZPCBFPTKwj9JAz1NigjYnd2FZQjIrUE0BZMu1ca/s400/6.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app.component.html:&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKeRrLyv_GCzUfgrWZ-GC0SxtfYuBpUdm19sNVHB4WdKO5vDf5Uzc26H6uI_4Cexkfdyqn41W6H4TbK-4LB4f5KLHuKsPf1sw5nA6QUkhBeFCFPTfqCIBM2zNgP1_qA73Cy9h4u6gTJYRT/s1600/7.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;390&quot; data-original-width=&quot;977&quot; height=&quot;158&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKeRrLyv_GCzUfgrWZ-GC0SxtfYuBpUdm19sNVHB4WdKO5vDf5Uzc26H6uI_4Cexkfdyqn41W6H4TbK-4LB4f5KLHuKsPf1sw5nA6QUkhBeFCFPTfqCIBM2zNgP1_qA73Cy9h4u6gTJYRT/s400/7.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8068333136445484169/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8068333136445484169' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8068333136445484169'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8068333136445484169'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/11/web-api-with-angular-part-6-angular.html' title='Web API with Angular – Part 6 – Angular Service Connection to Back End'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaZMHsik2MLueBfgDQ1HA4gIOIJQIZuhQknTl_01N6QZKaCela6wz7kJ1eeZGXRnk1xqlFWyzMBtaNNCP_ySoR7BK6zTpy3gqEmO3Of9hyphenhypheneu6rhXXyXkuBEsesJYh_1MS7r3_lQ8N2UFi/s72-c/1.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8777452770252137631</id><published>2017-11-28T10:21:00.000+10:30</published><updated>2017-11-29T11:30:56.941+10:30</updated><title type='text'>Web API with Angular – Part 5 – OData Query</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In this section of series of related posts we perform OData
query on our Web API. Fiddler is the tool we will use for this exercise.&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
We have added two persons to our database by updating our Seed()
function as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKyuQJtLM4lgUeHgn4SZKxB1owi4AwicF2oZah6o14IGeAHxnl91RZqB91A6Qkpo8B5kR6ebHgm9P3n8yjmw7ifk7ocPkhzEGGF9puLCb_ri_DfjWQdoUrRKvJgDPqaBpojEFDOaGbbnk/s1600/0.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;318&quot; data-original-width=&quot;637&quot; height=&quot;316&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKyuQJtLM4lgUeHgn4SZKxB1owi4AwicF2oZah6o14IGeAHxnl91RZqB91A6Qkpo8B5kR6ebHgm9P3n8yjmw7ifk7ocPkhzEGGF9puLCb_ri_DfjWQdoUrRKvJgDPqaBpojEFDOaGbbnk/s640/0.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
After updating this function we need to run &lt;span style=&quot;font-family: Courier New, Courier, monospace;&quot;&gt;update-database&lt;/span&gt; command&amp;nbsp; in package manager console so the database gets updated.&lt;br /&gt;
&lt;br /&gt;
When we perform&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp;GET /odata/People &lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The result would be as shown in the screenshot below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifsGc2mHkEXNdTnrJ9AB3gfYKA-5N-0zjaoq2WlKCwHQEntgGABMEtwR_3o64D8tVE3n6lLhU7rEa7uhOiRWyZF9ZMzBK3LftIiTvAfwwuFV9OJ_tBkw0q0J9-Ak89j9UN3GfVNb_evUYW/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;589&quot; data-original-width=&quot;1070&quot; height=&quot;352&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifsGc2mHkEXNdTnrJ9AB3gfYKA-5N-0zjaoq2WlKCwHQEntgGABMEtwR_3o64D8tVE3n6lLhU7rEa7uhOiRWyZF9ZMzBK3LftIiTvAfwwuFV9OJ_tBkw0q0J9-Ak89j9UN3GfVNb_evUYW/s640/1.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Now say we want to get only the top 1 of the list, then according to
OData convention that would be&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;GET /odata/People?$top=1 &lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The result is shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCbhMnNChXplsEYsIqg_5hYPWfRlBuyX0cCNxPeGiw_Cw1Tla9wBMzniqEQcWdRbmG59nxgRPA4FktqqpDbfjW4oEzULmmBSJzvyhyLpLJrjrGYE3LaOUGLsjKgOQ47_JD-caZ4BT4CMir/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;465&quot; data-original-width=&quot;678&quot; height=&quot;438&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCbhMnNChXplsEYsIqg_5hYPWfRlBuyX0cCNxPeGiw_Cw1Tla9wBMzniqEQcWdRbmG59nxgRPA4FktqqpDbfjW4oEzULmmBSJzvyhyLpLJrjrGYE3LaOUGLsjKgOQ47_JD-caZ4BT4CMir/s640/2.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
To order the list by LastName the message would be&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;nbsp;GET /odata/People?$orderby=LastName&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
And result would be as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunDTIO5dmD1KVwHs6EV3dl0MCEc_LYS0H8j8njgFBfXRYyFzhWHtKoPT8Nn9k-WsFd5iCE-Nw5TrfPJDvmF-uQYcGEl3YPOKI3uMVG6HrIPDj7p3bfUB0k3wyTPanX5Lxz4INZNTpWWsW/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;474&quot; data-original-width=&quot;648&quot; height=&quot;468&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunDTIO5dmD1KVwHs6EV3dl0MCEc_LYS0H8j8njgFBfXRYyFzhWHtKoPT8Nn9k-WsFd5iCE-Nw5TrfPJDvmF-uQYcGEl3YPOKI3uMVG6HrIPDj7p3bfUB0k3wyTPanX5Lxz4INZNTpWWsW/s640/3.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Please refer to OData references for other conventions used for
query.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8777452770252137631/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8777452770252137631' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8777452770252137631'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8777452770252137631'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/11/web-api-with-angular-part-5-odata-query.html' title='Web API with Angular – Part 5 – OData Query'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKyuQJtLM4lgUeHgn4SZKxB1owi4AwicF2oZah6o14IGeAHxnl91RZqB91A6Qkpo8B5kR6ebHgm9P3n8yjmw7ifk7ocPkhzEGGF9puLCb_ri_DfjWQdoUrRKvJgDPqaBpojEFDOaGbbnk/s72-c/0.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-6981197979902282614</id><published>2017-11-27T19:52:00.004+10:30</published><updated>2017-12-16T09:20:45.597+10:30</updated><title type='text'>Web API with Angular – Part 4 – Adding Angular Component and Service</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In other sections of these series we created a Web API using
OData and Entity Framework and tested that on a sample data. We also installed
angular-cli and created a project in our Visual Studio containing files generated by that installation. In
this part we add a component and a service to the angular project. In another post we will make this new angular service use our Web API for it data.&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Using Windows Explorer go to the location of angular-project
then open a command window by pressing shift and doing a&amp;nbsp; right click then select “Open PowerShell
Window here”. In the window that comes up type&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;ng generate component person&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This will generate a component called &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person&lt;/span&gt; which will be in a folder with that name. That folder will&amp;nbsp;&amp;nbsp;contain 4 files: &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.component.ts, person.component.html, person.component.css
&lt;/span&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;and&lt;/span&gt;&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt; person.component.spec.ts. &lt;/span&gt;The last file is used for testing.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The content of &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.component.ts &lt;/span&gt;is as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkOqXUnbujgQASkMg_riQq3MOsKDj2A8XsBhmew6nUPaizO0Js8hgcajDPKF4fgd6Tf0v6xD6IU-Z4ijLVZ-8bD4PG6vTDAQN6bUO2dPHMVCiLDGsMR-3lw6IfUp7bF8se3_hNSptly6T/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;257&quot; data-original-width=&quot;417&quot; height=&quot;246&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkOqXUnbujgQASkMg_riQq3MOsKDj2A8XsBhmew6nUPaizO0Js8hgcajDPKF4fgd6Tf0v6xD6IU-Z4ijLVZ-8bD4PG6vTDAQN6bUO2dPHMVCiLDGsMR-3lw6IfUp7bF8se3_hNSptly6T/s400/3.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Note that the selector for this component is &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app-person&lt;/span&gt; that we will use in &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app.componenet.html&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;later.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.component.html&lt;/span&gt;&amp;nbsp;at this stage is as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienwL4-RWBj7fxv6nyH8pd3tXxa69gS-hEWnMTOasbXI4Vn-jedJAqjouJtKjER5D2JPpENGZ4zNegUXIvATQ35SC06sBk96d6H_aAi6ln-CN00NvL1ia9wHZ1UjGwoH4XuKpyMEIKEYg7/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;65&quot; data-original-width=&quot;161&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienwL4-RWBj7fxv6nyH8pd3tXxa69gS-hEWnMTOasbXI4Vn-jedJAqjouJtKjER5D2JPpENGZ4zNegUXIvATQ35SC06sBk96d6H_aAi6ln-CN00NvL1ia9wHZ1UjGwoH4XuKpyMEIKEYg7/s1600/2.PNG&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;br /&gt;
In the same folder type the following to generate person
service &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;ng generate service person&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;georgia&amp;quot; , &amp;quot;times new roman&amp;quot; , serif;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This will generate two files in that folder:&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;
person.service.ts&lt;/span&gt; and &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.service.spec.ts&lt;/span&gt;. The second file is used
for testing.&amp;nbsp; &lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.service.ts &lt;/span&gt;will look like this:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwK88HfmHJziH8lBQ8kX5zNrLS1wNbCNHRalEW18LVRwaZS4jamlvB_deCCaW0ADAnp8fLgzzI5BEpjo0qgMkFYnMRP4Gi9V2a2VHajWwAIBNv2EWpXXuPne4-y460HTUe2lh88nnqE87F/s1600/4.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;145&quot; data-original-width=&quot;354&quot; height=&quot;163&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwK88HfmHJziH8lBQ8kX5zNrLS1wNbCNHRalEW18LVRwaZS4jamlvB_deCCaW0ADAnp8fLgzzI5BEpjo0qgMkFYnMRP4Gi9V2a2VHajWwAIBNv2EWpXXuPne4-y460HTUe2lh88nnqE87F/s400/4.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
After including these files into Visual studio the Solution
Explorer looks like the following where newly added files are highlighted:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxQsrTz-E9qi93lJyxGUy7liyd37MdSnPnjGR5F0ONrVHHg-mcVzTrbNt-kka27Q8L-hWZOFdrWuJjaWv8k3RPnsc0kaHms7qDpeRenEU5ZG2D56ZLAYWw_YSDIuEr2dnHrqC5jFYTJRM/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;445&quot; data-original-width=&quot;307&quot; height=&quot;400&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxQsrTz-E9qi93lJyxGUy7liyd37MdSnPnjGR5F0ONrVHHg-mcVzTrbNt-kka27Q8L-hWZOFdrWuJjaWv8k3RPnsc0kaHms7qDpeRenEU5ZG2D56ZLAYWw_YSDIuEr2dnHrqC5jFYTJRM/s400/1.PNG&quot; width=&quot;275&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
We modify &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.service.ts &lt;/span&gt;by adding a &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson()&lt;/span&gt; method to it:&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjdANO-voNgV0-JHw_YJ91ATK8SCpSSZ61o3o6IS5fTGNbynNFUEzn6_PRI7ZS0Gknqh2UFzwZO1ZN5RVh6srqdCAL1Kk7uhdDP-ZJWHsyTUZVuEiDD8bk8su0Z39F5uAvLDRC_jDNJtu_/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;230&quot; data-original-width=&quot;407&quot; height=&quot;225&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjdANO-voNgV0-JHw_YJ91ATK8SCpSSZ61o3o6IS5fTGNbynNFUEzn6_PRI7ZS0Gknqh2UFzwZO1ZN5RVh6srqdCAL1Kk7uhdDP-ZJWHsyTUZVuEiDD8bk8su0Z39F5uAvLDRC_jDNJtu_/s400/2.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
To make person component use person service we need to modify it. We first import the service and then call its &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;getPerson(&lt;/span&gt;) method in &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;ngOnInit(). &lt;/span&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Note the injection of the service in the constructor:&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9Ps9-vSVAUaNHjGJcVCqdnNqaxk3SPn6eRqqTHKm68ZRVLd6T0U8cAw2koYy1CgGz83RtN4VDb8C00GPBpYPkJqsX6zZZAFIxSB3ci0rlBDYff3LvQEsa7yiTWv8eCga6uT0_PICNu6e/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;397&quot; data-original-width=&quot;474&quot; height=&quot;335&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9Ps9-vSVAUaNHjGJcVCqdnNqaxk3SPn6eRqqTHKm68ZRVLd6T0U8cAw2koYy1CgGz83RtN4VDb8C00GPBpYPkJqsX6zZZAFIxSB3ci0rlBDYff3LvQEsa7yiTWv8eCga6uT0_PICNu6e/s400/1.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
We need to register new component and service in &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app.mudule.ts &lt;/span&gt;as shown below&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZlgisfNrt2YBPfybEofrw_epqDSq-XooG2ndwgN4d9DMySlJFp01gTRl5RSMCOBRoiWq5IObJKTdemZoQ9Aib_1BO8WaidCFoymozfNBph9sDJ3l7RFxDxWJ6KPdlL6OZVnpxzKw-C79h/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;353&quot; data-original-width=&quot;501&quot; height=&quot;281&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZlgisfNrt2YBPfybEofrw_epqDSq-XooG2ndwgN4d9DMySlJFp01gTRl5RSMCOBRoiWq5IObJKTdemZoQ9Aib_1BO8WaidCFoymozfNBph9sDJ3l7RFxDxWJ6KPdlL6OZVnpxzKw-C79h/s400/3.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
No if we modify &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;person.component.htm&lt;/span&gt;l like below&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;lt;p&amp;gt;{{person}&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;
And add this to &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;app.component.html&lt;/span&gt;:&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp;&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&amp;lt;app-person&amp;gt;&amp;lt;/app-person&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
Then the web page will look like this.&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhilHEsKSwKGYU9TOMNYG7BnmQs37RSf_MURGoMM-CMFUsFmRL0y_eJK84t5X29ddsU4Wnp3QvJfyH2t9bLu9yO8pU4CSjwtMqB7zuZouQOjRgWSpxN0Aw7n5z1CCX9toScZfpB2ZH2nCYM/s1600/4.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;407&quot; data-original-width=&quot;414&quot; height=&quot;314&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhilHEsKSwKGYU9TOMNYG7BnmQs37RSf_MURGoMM-CMFUsFmRL0y_eJK84t5X29ddsU4Wnp3QvJfyH2t9bLu9yO8pU4CSjwtMqB7zuZouQOjRgWSpxN0Aw7n5z1CCX9toScZfpB2ZH2nCYM/s320/4.PNG&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Note the text &quot;Person Service returned This!&quot; is coming from the person service.&lt;br /&gt;
&lt;br /&gt;
In subsequent post we will change the person service to get its data from Web API instead of returning this fixed text.&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/6981197979902282614/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/6981197979902282614' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6981197979902282614'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6981197979902282614'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/11/web-api-with-angular-part-4-angular.html' title='Web API with Angular – Part 4 – Adding Angular Component and Service'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkOqXUnbujgQASkMg_riQq3MOsKDj2A8XsBhmew6nUPaizO0Js8hgcajDPKF4fgd6Tf0v6xD6IU-Z4ijLVZ-8bD4PG6vTDAQN6bUO2dPHMVCiLDGsMR-3lw6IfUp7bF8se3_hNSptly6T/s72-c/3.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-6476587561690468111</id><published>2017-11-27T10:40:00.001+10:30</published><updated>2017-11-29T10:19:31.309+10:30</updated><title type='text'>Web API with Angular – Part 3 - OData with Entity Framework </title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In Part 1 and 2 of these series of posts we created two projects in a Visual Studio
solution one to provide data (Web API) and one to display the web page using
angular-cli. In this post we create a web API controller using Open Data protocol (OData) and Entity Framework. &amp;nbsp;By
selecting this option we allow the front end to query the data using OData
standards. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The first step is creating an Entity Framework model as an
example. For this, we create Person model which we will store in Person.cs in the Model folder as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYt6N_BhhsziMnmMSWufJd3D87LYcCA4jjwbtII4NbTb2XYebZ1P74HflvmL7E1BvB0ooHAtBX_0wIPjMVlRMfcaQ53wUlOSvWZq9qPbrlAzaWzZrWciDOyVQlT-bTsWxxFdsmrxdkG87/s1600/0.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;223&quot; data-original-width=&quot;377&quot; height=&quot;236&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYt6N_BhhsziMnmMSWufJd3D87LYcCA4jjwbtII4NbTb2XYebZ1P74HflvmL7E1BvB0ooHAtBX_0wIPjMVlRMfcaQ53wUlOSvWZq9qPbrlAzaWzZrWciDOyVQlT-bTsWxxFdsmrxdkG87/s400/0.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
We need to include this model in ApplicationDbContext:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijwIVStNUDUBHehH2tL3i-Kv2PTX0NQ9MrwtnIwW6JFevwX6jRXLZh1dQPRtZRCjk4b3uiENVdXsTu8NJJYQoPdtb05VwNqTDKe7q6NJAoJ_78Bd8HvAdUML_DjsYW1Q8rbn0T9-VEIC5Z/s1600/01.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;238&quot; data-original-width=&quot;542&quot; height=&quot;280&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijwIVStNUDUBHehH2tL3i-Kv2PTX0NQ9MrwtnIwW6JFevwX6jRXLZh1dQPRtZRCjk4b3uiENVdXsTu8NJJYQoPdtb05VwNqTDKe7q6NJAoJ_78Bd8HvAdUML_DjsYW1Q8rbn0T9-VEIC5Z/s640/01.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
We seed the application with some data for testing. To do
that first enable migration by typing the following command in the Command Window&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;enable-migration&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Then &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;add-Migration “Initial&lt;/span&gt;”&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This will create Migrations folder with config.cs file in
it. That file has a method called Seed which we modify to seed one person to the
database as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kSiVpAljcEvO0Hcv-R9oPyD35-Att-BJ_pXD4ivghcH7mlJm4AWZ9zuTceLkFsa9SG7-mV6zX95-8k9UT-PLkTALGbTppc5jmcg8UU3PNb-xGW5FjiRPKhnEnMbKrpeM_rWI7LUzri1Y/s1600/02.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;222&quot; data-original-width=&quot;670&quot; height=&quot;211&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kSiVpAljcEvO0Hcv-R9oPyD35-Att-BJ_pXD4ivghcH7mlJm4AWZ9zuTceLkFsa9SG7-mV6zX95-8k9UT-PLkTALGbTppc5jmcg8UU3PNb-xGW5FjiRPKhnEnMbKrpeM_rWI7LUzri1Y/s640/02.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Next we create a controller by right clicking on the Controller folder and selecting&amp;nbsp; &amp;nbsp;Add -&amp;gt; Controller as shown below:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsuH_Jc8DfyWorD6OC1WVwJbqYxM8mafRNKoRrYNQz9zKtmXNgQ8FkF5xqOTicp7IGw8LKHBaJwjKt6h2Dx0fLOJJb9Z-7BHb9BzfWi4d4M9UG1yR2c9CPq50t166vE3c7uRMSzySlDYJ/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;470&quot; data-original-width=&quot;712&quot; height=&quot;263&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsuH_Jc8DfyWorD6OC1WVwJbqYxM8mafRNKoRrYNQz9zKtmXNgQ8FkF5xqOTicp7IGw8LKHBaJwjKt6h2Dx0fLOJJb9Z-7BHb9BzfWi4d4M9UG1yR2c9CPq50t166vE3c7uRMSzySlDYJ/s400/1.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In the window that comes up we select “Web API 2 OData v3
Controller with actions using Entity Framework”:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjys_1UusodeB1OuRN4jtSZJHKK9KRSc9nMjONt1g71fDlUwuFyFRh09IqUV9brpiVpfWmIG1VZq_9NMUe0gRJN96XIlHUXoCGfpxcoiSpt3zfaovXLGITEj9haqMz5xTYSTfuhXZi4SD6R/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;437&quot; data-original-width=&quot;927&quot; height=&quot;299&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjys_1UusodeB1OuRN4jtSZJHKK9KRSc9nMjONt1g71fDlUwuFyFRh09IqUV9brpiVpfWmIG1VZq_9NMUe0gRJN96XIlHUXoCGfpxcoiSpt3zfaovXLGITEj9haqMz5xTYSTfuhXZi4SD6R/s640/2.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Then in subsequent window we select Person as the model:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9N1tV2FVRk4PJ4R57lDWaAo9wPhCazMU4Th26KH8Iy9GznkbR88lcEhNbm3c8ejTtDvbZkr0MW3dMNU-HFlOgL1g-9qWDzGlpgc8CmB_qfygkbCmY2Qv8ggwLxkuuzlc2ABK9jn-xlZz/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;239&quot; data-original-width=&quot;587&quot; height=&quot;260&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil9N1tV2FVRk4PJ4R57lDWaAo9wPhCazMU4Th26KH8Iy9GznkbR88lcEhNbm3c8ejTtDvbZkr0MW3dMNU-HFlOgL1g-9qWDzGlpgc8CmB_qfygkbCmY2Qv8ggwLxkuuzlc2ABK9jn-xlZz/s640/3.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
v&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This will scaffold PeopleController.cs file. The top section of this file is shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4NZLl1WVJ157UazP9DyALCRVioWECmwfnAjr234CxreOoXgEttPVlZyTfvFMdQWm0OJC1ycbS_m2Lu7jGM-IPsigUlRN73Fv7ETpQZtDQBG1yc0btMmSZ_XVl9vH6ISztG5saNxOFS9vX/s1600/4.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;369&quot; data-original-width=&quot;848&quot; height=&quot;278&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4NZLl1WVJ157UazP9DyALCRVioWECmwfnAjr234CxreOoXgEttPVlZyTfvFMdQWm0OJC1ycbS_m2Lu7jGM-IPsigUlRN73Fv7ETpQZtDQBG1yc0btMmSZ_XVl9vH6ISztG5saNxOFS9vX/s640/4.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The comment in the auto-generated code indicates that for OData
routing to take effect you need to update WebApiConfig.cs. Below I have applied
that update:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmoLwJ044kEFqp97OWhmvTfH2cE-ZjoyITeszvJC3VdvFt5n2Mc3bqqDGNpqw5uWmh8e5jAemyoJdxWe8dj68GWvkhCC9tXQqA1B7hrcp2BCGMtNRY3Sk4TX91a-MxL8sZTNLCQkToNCW/s1600/5.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;421&quot; data-original-width=&quot;853&quot; height=&quot;314&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmoLwJ044kEFqp97OWhmvTfH2cE-ZjoyITeszvJC3VdvFt5n2Mc3bqqDGNpqw5uWmh8e5jAemyoJdxWe8dj68GWvkhCC9tXQqA1B7hrcp2BCGMtNRY3Sk4TX91a-MxL8sZTNLCQkToNCW/s640/5.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
I have also commented out the section that requires authentication to simplify testing at this stage.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
There are different tools available to test Web API. One of
these is Fiddler which is free. &amp;nbsp;It can
be used to create and run different HTTP requests to Web API and check the HTTP
response. Please refer to &lt;a href=&quot;http://www.tutorialsteacher.com/webapi/test-web-api&quot;&gt;http://www.tutorialsteacher.com/webapi/test-web-api&lt;/a&gt;
to see how Fiddler can be used to Test Web API.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Below I have used Fiddler to send a GET odata/People&amp;nbsp;&amp;nbsp; request.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3CkZGaYIh5bPW34PRCPzYd7qr_dXjrU9-Gtfr9U4tiqObL1z7KkRpXhNjgcEkYbCirxw9DTwP4pT614-eVX9gy-6UfBTqbySoYMOVKLdG2zsBTyBsgZw7ZIGrl2hWrNA2fLdCbybkxOpu/s1600/6.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;504&quot; data-original-width=&quot;1070&quot; height=&quot;300&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3CkZGaYIh5bPW34PRCPzYd7qr_dXjrU9-Gtfr9U4tiqObL1z7KkRpXhNjgcEkYbCirxw9DTwP4pT614-eVX9gy-6UfBTqbySoYMOVKLdG2zsBTyBsgZw7ZIGrl2hWrNA2fLdCbybkxOpu/s640/6.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The result is highlighted below which shows the Web API for
odata/people route works.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS6I9Cw64o9m4FPwMxhD6j9WcJbZ-pukp8I4Oq85_xISO32MAVKe_BeaUY1IM4ix2YN23NAI5nXENgiOWw1jMgljqhRTGMbp6-DRJZC6ACg5msoVyo2XJufDwNEJSPCLbyXTGgo9njJxUY/s1600/7.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;587&quot; data-original-width=&quot;1072&quot; height=&quot;350&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS6I9Cw64o9m4FPwMxhD6j9WcJbZ-pukp8I4Oq85_xISO32MAVKe_BeaUY1IM4ix2YN23NAI5nXENgiOWw1jMgljqhRTGMbp6-DRJZC6ACg5msoVyo2XJufDwNEJSPCLbyXTGgo9njJxUY/s640/7.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
Now that we have created a sample Web API and tested it we can update the Angular application to use this Web API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/6476587561690468111/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/6476587561690468111' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6476587561690468111'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/6476587561690468111'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/11/using-aspnet-web-api-with-angular-2_27.html' title='Web API with Angular – Part 3 - OData with Entity Framework '/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYt6N_BhhsziMnmMSWufJd3D87LYcCA4jjwbtII4NbTb2XYebZ1P74HflvmL7E1BvB0ooHAtBX_0wIPjMVlRMfcaQ53wUlOSvWZq9qPbrlAzaWzZrWciDOyVQlT-bTsWxxFdsmrxdkG87/s72-c/0.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8070842112366303319</id><published>2017-11-26T16:22:00.001+10:30</published><updated>2017-12-16T09:22:43.594+10:30</updated><title type='text'>Web API with Angular – Part 2 - Installing angular-cli</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In Part 1 of this&amp;nbsp; post we created a project to provide Web API for
our solution. In this part we generate an angular-cli (Command Line Interface) project to include in the original
solution. For downloading and installing angular-cli you need to have installed &lt;b&gt;node.js&lt;/b&gt; and &lt;b&gt;npm&lt;/b&gt; on your computer.&lt;/div&gt;
&lt;h1&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/h1&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Using Windows Explorer go to where the newly created empty project
is stored, An example is shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAqQCbZUyawk5r5pLdF4_0Wc0gmfNZlGwVa5OboUza_S7joKpP2rI36biAbHpFpHW3TmgGdWn2qkEEBKoZIhA8-jttb0uEQ45L_9BXgbHqh5cKhZ-jDMZNA_BsmIvkMSZTyORzZeaQxhyQ/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;261&quot; data-original-width=&quot;391&quot; height=&quot;213&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAqQCbZUyawk5r5pLdF4_0Wc0gmfNZlGwVa5OboUza_S7joKpP2rI36biAbHpFpHW3TmgGdWn2qkEEBKoZIhA8-jttb0uEQ45L_9BXgbHqh5cKhZ-jDMZNA_BsmIvkMSZTyORzZeaQxhyQ/s320/1.PNG&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
While pressing Shift key, right click at this location and
choose “Open PowerShell window here” as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU4iudUcbiv7CiHM_VghJzm3ZdyZFrfaUPSNxOg9d0MyRqcepn_zpsjMVvSbdEpEX1Ul65SPinqv4E4STfPaK5uwugk5uswedM4BXVQMt3YzLAdS4gQ9NQ5G_mi7IPFeisnrR_mF2giTKy/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;406&quot; data-original-width=&quot;310&quot; height=&quot;400&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU4iudUcbiv7CiHM_VghJzm3ZdyZFrfaUPSNxOg9d0MyRqcepn_zpsjMVvSbdEpEX1Ul65SPinqv4E4STfPaK5uwugk5uswedM4BXVQMt3YzLAdS4gQ9NQ5G_mi7IPFeisnrR_mF2giTKy/s400/2.PNG&quot; width=&quot;305&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Then type the following command:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;npm install -g @angular/cli&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
when installation is complete type the follwing command. In this example &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;angular-project&lt;/span&gt; is an arbitrary name for the project.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;ng new angular-project&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
this will create&amp;nbsp; a
new project for you in &lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;angular-project&lt;/span&gt; folder. Change directory to that folder&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;cd angular-project&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
and type&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;npm install&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This command would download and install all necessary files and packages.&lt;br /&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In Visual Studio we include these files into the project we
recently created. You do not need to include nodes_module folder.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
To run this project at the angular-project folder type&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;ng serve&lt;/span&gt;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;courier new&amp;quot; , &amp;quot;courier&amp;quot; , monospace;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
which will result in&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePH585I98TYEZGr6rBgVZJ_D70nNAQRzsGBKuQWB9m-uOtGUIzJNAoUdUpaB3heGtl5xJnCNrU5lU3XFLFLPs-geFZOe_ofnPvytFpF9JQ7SgRxEmeDsFZuJjgmkdRRNhR9UjYhB0Cl7G/s1600/4.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;158&quot; data-original-width=&quot;800&quot; height=&quot;78&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePH585I98TYEZGr6rBgVZJ_D70nNAQRzsGBKuQWB9m-uOtGUIzJNAoUdUpaB3heGtl5xJnCNrU5lU3XFLFLPs-geFZOe_ofnPvytFpF9JQ7SgRxEmeDsFZuJjgmkdRRNhR9UjYhB0Cl7G/s400/4.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
As the message indicates the page is served at localhost:4200 as shown
below:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSuYcsRKnRvJWxjqdWb6T29Z5_54918rjMZ2KCXlOBgqrNaKA0BYU2ECpTFf9_MJT1B114qMhsU0rkNrYXcnkf4A_9WINmsCe3j5XvoPMkfG1jjhwXK1qKjIa4HJiONxjh-ASghOrPOUco/s1600/5.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;659&quot; data-original-width=&quot;734&quot; height=&quot;358&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSuYcsRKnRvJWxjqdWb6T29Z5_54918rjMZ2KCXlOBgqrNaKA0BYU2ECpTFf9_MJT1B114qMhsU0rkNrYXcnkf4A_9WINmsCe3j5XvoPMkfG1jjhwXK1qKjIa4HJiONxjh-ASghOrPOUco/s400/5.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This will provide the web page for us. We will use the
WebAPI project only to get or store data for this web page.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6oA6mb36B8-AUsQMpGfXmEn-26vI00VEWEMwJburp8Qxiuhd9zhE3vdWPYWW4HKYPaaAhIrh4ZsKF6K5TazlWjSU3_YUHuwOOd9K1b7y1BkBJSX_en9g0EOcVNhxJoF7l2Rlacc9EnL8/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6oA6mb36B8-AUsQMpGfXmEn-26vI00VEWEMwJburp8Qxiuhd9zhE3vdWPYWW4HKYPaaAhIrh4ZsKF6K5TazlWjSU3_YUHuwOOd9K1b7y1BkBJSX_en9g0EOcVNhxJoF7l2Rlacc9EnL8/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6oA6mb36B8-AUsQMpGfXmEn-26vI00VEWEMwJburp8Qxiuhd9zhE3vdWPYWW4HKYPaaAhIrh4ZsKF6K5TazlWjSU3_YUHuwOOd9K1b7y1BkBJSX_en9g0EOcVNhxJoF7l2Rlacc9EnL8/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6oA6mb36B8-AUsQMpGfXmEn-26vI00VEWEMwJburp8Qxiuhd9zhE3vdWPYWW4HKYPaaAhIrh4ZsKF6K5TazlWjSU3_YUHuwOOd9K1b7y1BkBJSX_en9g0EOcVNhxJoF7l2Rlacc9EnL8/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6oA6mb36B8-AUsQMpGfXmEn-26vI00VEWEMwJburp8Qxiuhd9zhE3vdWPYWW4HKYPaaAhIrh4ZsKF6K5TazlWjSU3_YUHuwOOd9K1b7y1BkBJSX_en9g0EOcVNhxJoF7l2Rlacc9EnL8/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6oA6mb36B8-AUsQMpGfXmEn-26vI00VEWEMwJburp8Qxiuhd9zhE3vdWPYWW4HKYPaaAhIrh4ZsKF6K5TazlWjSU3_YUHuwOOd9K1b7y1BkBJSX_en9g0EOcVNhxJoF7l2Rlacc9EnL8/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6oA6mb36B8-AUsQMpGfXmEn-26vI00VEWEMwJburp8Qxiuhd9zhE3vdWPYWW4HKYPaaAhIrh4ZsKF6K5TazlWjSU3_YUHuwOOd9K1b7y1BkBJSX_en9g0EOcVNhxJoF7l2Rlacc9EnL8/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;br /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8070842112366303319/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8070842112366303319' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8070842112366303319'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8070842112366303319'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/11/using-aspnet-web-api-with-angular-2_26.html' title='Web API with Angular – Part 2 - Installing angular-cli'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAqQCbZUyawk5r5pLdF4_0Wc0gmfNZlGwVa5OboUza_S7joKpP2rI36biAbHpFpHW3TmgGdWn2qkEEBKoZIhA8-jttb0uEQ45L_9BXgbHqh5cKhZ-jDMZNA_BsmIvkMSZTyORzZeaQxhyQ/s72-c/1.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-7474210676554105236</id><published>2017-11-26T14:26:00.001+10:30</published><updated>2017-11-29T09:42:16.288+10:30</updated><title type='text'>Web API with Angular - Part 1 - Creating a Web API project</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Angular has become a widely used front end framework for
modern web applications. It is an open-source platform with built in features
such as dependency injection and declarative template. ASP.NET Web API provides
a back end RESTful web interface for data access.&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This post is about creating a Visual Studio project using
Angular and Web API.&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
I will be using Visual Studio 2017 Community Edition in this
exercise.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;h2 style=&quot;text-align: left;&quot;&gt;
Creating a Web API project&lt;/h2&gt;
&lt;h1&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/h1&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Using Visual Studio create a new Single Page ASP.NET project
with Web API as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Select New -&amp;gt; Project/Solution and the sellect&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11pt;&quot;&gt;&amp;nbsp;ASP.NET Web Application:&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;calibri&amp;quot; , sans-serif; font-size: 11pt;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8Zw7lulZjGITBu_QqqLSRSRknM0VQKfK71cHVFSuMHkh79GmSPjhGeusEhVh6S8-suQiz9IPJkyzFAGhNMUfiuZ1KFAwMguSJDCRHwlhbXZLoBf83Ekkk1Msod36G-KgCGI6cI0-ua1R/s1600/1.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;574&quot; data-original-width=&quot;947&quot; height=&quot;241&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8Zw7lulZjGITBu_QqqLSRSRknM0VQKfK71cHVFSuMHkh79GmSPjhGeusEhVh6S8-suQiz9IPJkyzFAGhNMUfiuZ1KFAwMguSJDCRHwlhbXZLoBf83Ekkk1Msod36G-KgCGI6cI0-ua1R/s400/1.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
Then select “Single Page Application” with MVC and Web API
ticked as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheHzmJq5qVbVEejRZyxtdSE6yyTnhRKhgrFfUL89dsjUyaRheIedGChVont452zsRbOaRt459eSOBT7kERpwI-GmUXPxmjOEBMCRrZGPPL-40lxuS7DM3qkolHdgCjyNDOSvhLib3LkbBP/s1600/2.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;509&quot; data-original-width=&quot;788&quot; height=&quot;257&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheHzmJq5qVbVEejRZyxtdSE6yyTnhRKhgrFfUL89dsjUyaRheIedGChVont452zsRbOaRt459eSOBT7kERpwI-GmUXPxmjOEBMCRrZGPPL-40lxuS7DM3qkolHdgCjyNDOSvhLib3LkbBP/s400/2.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
This creates a template application that can run as shown
below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbL3xO1V7wEustJI6XcTi24ZgyQV_eWYHcK7jaCEWylQemY9rEbtpen93TlycpjGZwDY_2J2WlfpD8ECUQEO5RfiRizdvf0ZMcMq-A7Jx9cbtAEcWmnTwSfAenQphoGn0bDsWO3QweWcBK/s1600/3.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;483&quot; data-original-width=&quot;1142&quot; height=&quot;168&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbL3xO1V7wEustJI6XcTi24ZgyQV_eWYHcK7jaCEWylQemY9rEbtpen93TlycpjGZwDY_2J2WlfpD8ECUQEO5RfiRizdvf0ZMcMq-A7Jx9cbtAEcWmnTwSfAenQphoGn0bDsWO3QweWcBK/s400/3.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Note that by doing the above steps the project would also
contain a Web API interface and Entity Framework. Entity Framework provides an abstraction layer for
developers so they can work with data objects and not be concerned with how
that data gets stored or retrieved form a storage entity such as SQL Server. &lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The default connection in this configuration is localDB as
indicated in web.config.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The structure of the solution at this stage is as shown
below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhLqQQRQbxamr36sb0UX3VnOIw8LqhARVO9i6CnT6BhHKYZIMsoewyMJsqxQSCQ_0jYzQ2ktxq4C2UQgk1e1luKQQ8x_VXYt3qqhRtlX2s96USZeyABJA6KSnHXobtZU1S-IbORnA4RlLB/s1600/4.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;426&quot; data-original-width=&quot;334&quot; height=&quot;400&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhLqQQRQbxamr36sb0UX3VnOIw8LqhARVO9i6CnT6BhHKYZIMsoewyMJsqxQSCQ_0jYzQ2ktxq4C2UQgk1e1luKQQ8x_VXYt3qqhRtlX2s96USZeyABJA6KSnHXobtZU1S-IbORnA4RlLB/s400/4.PNG&quot; width=&quot;312&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The Controller folder contains the Web API end points.&amp;nbsp;&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;h2 style=&quot;text-align: left;&quot;&gt;
Creating a placeholder project for Angular&lt;/h2&gt;
&lt;h1&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/h1&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
The next step is to add another project to the solution
which will work as a place holder for Angular code as shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-02e7Nhl2FKHZD_ytyivMymEF7vM8HMWkwMR7I7xHt_sN4279GcuF5SCKXHHT3QhoQ8dKw97PUAL0GUI3AANZaoobSRnV4z_f61SL1KupKUN10oI4BzjaQ6TyFOiMHP7AXQ95_JnnuCI/s1600/5.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;501&quot; data-original-width=&quot;690&quot; height=&quot;288&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-02e7Nhl2FKHZD_ytyivMymEF7vM8HMWkwMR7I7xHt_sN4279GcuF5SCKXHHT3QhoQ8dKw97PUAL0GUI3AANZaoobSRnV4z_f61SL1KupKUN10oI4BzjaQ6TyFOiMHP7AXQ95_JnnuCI/s400/5.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
And then select&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeeNiGSMSlegMAcGHmbgL0y5dDy6qEgWLIpO0DtYImyM73gCOq5Kn9A8c9uN0GvnLjCllzm_IJlo-ZcPvcCBpjfhc40XBjpoFcAcai_hOrxvypf7WvN5ydpCnUqqGjeE5cbeQULIkS3KtK/s1600/6.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;580&quot; data-original-width=&quot;935&quot; height=&quot;247&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeeNiGSMSlegMAcGHmbgL0y5dDy6qEgWLIpO0DtYImyM73gCOq5Kn9A8c9uN0GvnLjCllzm_IJlo-ZcPvcCBpjfhc40XBjpoFcAcai_hOrxvypf7WvN5ydpCnUqqGjeE5cbeQULIkS3KtK/s400/6.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Then select an empty project:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRSP8NHEs2OGxDkVhe8d6_AFtQXe1KrazI19wU83XFXgq4H9xR7tYaYvUi08QjvDdh5f6W6S7KN98q_zu90cS65Wnxx0XIxYt10qnyOuN9JPGKu29vEj8qXRScFO9GfoDrGN4N23B4KKdo/s1600/7.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;512&quot; data-original-width=&quot;773&quot; height=&quot;263&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRSP8NHEs2OGxDkVhe8d6_AFtQXe1KrazI19wU83XFXgq4H9xR7tYaYvUi08QjvDdh5f6W6S7KN98q_zu90cS65Wnxx0XIxYt10qnyOuN9JPGKu29vEj8qXRScFO9GfoDrGN4N23B4KKdo/s400/7.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
At this stage the Solution Explorer will look like this:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySaEF30qnmryTOLbV31alkb7GcfHUVqJdXSkM-d_cNYNoM9DszgD4zI3mtA9gRogB3iH0DY2rDbMLiYIWZHCedBXnaeKKsT0Iekd9msYRD4pV9hOywwr76NVwIbvcsVaG_egrLFmrWtfn/s1600/8.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;480&quot; data-original-width=&quot;272&quot; height=&quot;400&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySaEF30qnmryTOLbV31alkb7GcfHUVqJdXSkM-d_cNYNoM9DszgD4zI3mtA9gRogB3iH0DY2rDbMLiYIWZHCedBXnaeKKsT0Iekd9msYRD4pV9hOywwr76NVwIbvcsVaG_egrLFmrWtfn/s400/8.PNG&quot; width=&quot;226&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In the next post we populate the new project with angular-cli.&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/7474210676554105236/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/7474210676554105236' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7474210676554105236'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7474210676554105236'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2017/11/using-aspnet-web-api-with-angular-2.html' title='Web API with Angular - Part 1 - Creating a Web API project'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8Zw7lulZjGITBu_QqqLSRSRknM0VQKfK71cHVFSuMHkh79GmSPjhGeusEhVh6S8-suQiz9IPJkyzFAGhNMUfiuZ1KFAwMguSJDCRHwlhbXZLoBf83Ekkk1Msod36G-KgCGI6cI0-ua1R/s72-c/1.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-8336463408829789837</id><published>2016-07-25T14:02:00.000+09:30</published><updated>2017-12-16T09:23:49.716+10:30</updated><title type='text'>Using Elastic Search in Visual Studio</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
These days customers wan t to be able to search their
document repository efficiently, like the way they search the web. The response
should come quickly, most relevant results should come first and the source should not be limited to text documents.&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
If you were using SQL Server as the source of your data you could achieve some of these by using &amp;nbsp;&lt;a href=&quot;https://msdn.microsoft.com/en-us/library/ms142571.aspx&quot; target=&quot;_blank&quot;&gt;SQL Server Full-Text Search&lt;/a&gt;&amp;nbsp;feature. &amp;nbsp;It would create a full-text index on the tables containing data which you want to search. This would allow you to perform a text search on binary files such as Word documents or PDF
files but it would still lack ranking of search results based on their relevance .&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://www.elastic.co/&quot; target=&quot;_blank&quot;&gt;Elastic&lt;/a&gt;&amp;nbsp;Search&amp;nbsp;provides
an alternative with built in scalability, redundancy and ranking in search results. Elastic runs as a service in your server and you can scale it out to use many other servers
if you need to. Elastic by itself cannot
search binary files (such as Word and PDF documents) but with &amp;nbsp;&lt;a href=&quot;https://tika.apache.org/&quot; target=&quot;_blank&quot;&gt;Tika&lt;/a&gt;&amp;nbsp; plugin you
can extract meta data and text from these files and then feed those to Elastic for index and search.&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Here I show how you can use Elastic in a .NET project
in Visual Studio. First download and install &lt;a href=&quot;https://www.elastic.co/&quot; target=&quot;_blank&quot;&gt;Elastic&lt;/a&gt;&amp;nbsp;. Since Elastic uses&amp;nbsp;&lt;a href=&quot;https://java.com/en/download/&quot; target=&quot;_blank&quot;&gt;Java&lt;/a&gt;&amp;nbsp;you need to have installed &amp;nbsp;&lt;a href=&quot;https://java.com/en/download/&quot; target=&quot;_blank&quot;&gt;Java&lt;/a&gt;&amp;nbsp;on your computer first. After installation configure ElasticSearch windows service to run automatically. To ensure ElasticSearch is
running on your computer go to &lt;a href=&quot;http://localhost:9200/&quot;&gt;http://localhost:9200&lt;/a&gt;
(9200 is the port that is used by elastic search by default). You would see a JSON formatted response as shown below:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mHawGE9s5ZasEPjqq7xW295vrkrKWUvnZ7pOwtJRI7BWZpH1-oCKiovpXxF2mvSnjfepyJ0dOdu3L_vkv_pPkBbTRyfzrWF33vT11j3CGsWnrtyLjbLPVX6MYNJBFFn5S5uAcVTo75qt/s1600/ES1.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;264&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mHawGE9s5ZasEPjqq7xW295vrkrKWUvnZ7pOwtJRI7BWZpH1-oCKiovpXxF2mvSnjfepyJ0dOdu3L_vkv_pPkBbTRyfzrWF33vT11j3CGsWnrtyLjbLPVX6MYNJBFFn5S5uAcVTo75qt/s640/ES1.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In Visual Studio
create a ASP.NET MVC solution. I have called this solution ElasticSearch1 in
this example. Install “Nest” NuGet Package &lt;i&gt;(Tools -&amp;gt; “NuGet Package Manager”
-&amp;gt; “Manage NuGet Packages for Solution” and Search for “Nest”)&lt;/i&gt;. This package
provides a high level interface to ElasticSearch.&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In Models directory create a Person.cs file with this
content:&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGSPTj7VJYLgje_0wyuWtNeW4irhaWA9zw24PqkHIUgh1G26L6bJBYVWjtJ8d_5PsMZGEN6el_u7p4eytHAR9K88cm6W-OmakvKZq82L0zW30zVTTRIf3jthMlmkPrn7236nYmrQWV_Za1/s1600/ES2.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;217&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGSPTj7VJYLgje_0wyuWtNeW4irhaWA9zw24PqkHIUgh1G26L6bJBYVWjtJ8d_5PsMZGEN6el_u7p4eytHAR9K88cm6W-OmakvKZq82L0zW30zVTTRIf3jthMlmkPrn7236nYmrQWV_Za1/s400/ES2.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
In home controller add a reference to Nest then add the
following to your code:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglERq3BvqZ343cq-nFCyB-UThhku62i31D5FSnfBGlnlbTarQiTyw-_upyJNYakh8dXM4qYWImpfG5g5kQpaRxpcRe1vBwtgxxm02TB05C3reW90aXclqjq2mdB6vZ61-4mRflRnFAEL2u/s1600/ES3.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;320&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglERq3BvqZ343cq-nFCyB-UThhku62i31D5FSnfBGlnlbTarQiTyw-_upyJNYakh8dXM4qYWImpfG5g5kQpaRxpcRe1vBwtgxxm02TB05C3reW90aXclqjq2mdB6vZ61-4mRflRnFAEL2u/s400/ES3.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;Create ElasticIndex action method
as shown below&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43lEGW3IG-ZNe715-P_Vdr6P0YnHk6ErEhdiIW6APIUya1ZA6DPbZQwiyIPfpPoNfpcLmeYDxoYldMQ4nE2_QvOtHiuLCZ2lLA7uWnyYEigPxkTbq9EcMB4HClIXktw51Aj8NXO1VRuAf/s1600/ES4.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;311&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43lEGW3IG-ZNe715-P_Vdr6P0YnHk6ErEhdiIW6APIUya1ZA6DPbZQwiyIPfpPoNfpcLmeYDxoYldMQ4nE2_QvOtHiuLCZ2lLA7uWnyYEigPxkTbq9EcMB4HClIXktw51Aj8NXO1VRuAf/s400/ES4.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;And ElsticSearch action method as
shown below:&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiau9yOEZlAEqLzriW9iD3zs4S5cNAXEr6lIi-mV0mNe1VlnIpd3mleaRVGLkXHEmd8q-OcvCtkENhiYaLZ5AuWtHXmlmRmtIL8IZipPmkWpbtlO0dLQYWGhN3JsmnahtPA3BLupoImAG1v/s1600/Capture1.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;247&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiau9yOEZlAEqLzriW9iD3zs4S5cNAXEr6lIi-mV0mNe1VlnIpd3mleaRVGLkXHEmd8q-OcvCtkENhiYaLZ5AuWtHXmlmRmtIL8IZipPmkWpbtlO0dLQYWGhN3JsmnahtPA3BLupoImAG1v/s400/Capture1.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;You need to create the
corresponding view ElasticIndex.cshtml:&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswVs3CGxBN1Ji7XjWlnrD5zX7zUpd3R_ISAdqGDWU4v02_AQQqdo1Y2r8bJLF23G18cg4T0fC0nWUgeU57xdZJ0fvI_QUWv8o65GsecJCVJvagol9O7vvrM-XXtZ8zd8YL-hSIRp34GV-/s1600/ES6.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;105&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswVs3CGxBN1Ji7XjWlnrD5zX7zUpd3R_ISAdqGDWU4v02_AQQqdo1Y2r8bJLF23G18cg4T0fC0nWUgeU57xdZJ0fvI_QUWv8o65GsecJCVJvagol9O7vvrM-XXtZ8zd8YL-hSIRp34GV-/s320/ES6.PNG&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 13.5533px;&quot;&gt;and ElasticSearch.cshtml:&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRA0GrxLfmM-B2GQKNGZA6fgN7DldGqRxxys8R01n_cEvp53dBunD3JGl6g2LCW1cggW8k3tnidVwKcUenUDFm0aRodx5invBug6ZuMJADvp_uP8UjaX9F3sNgrZHe8WzkVayQEQHA97L/s1600/Capture2.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;212&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRA0GrxLfmM-B2GQKNGZA6fgN7DldGqRxxys8R01n_cEvp53dBunD3JGl6g2LCW1cggW8k3tnidVwKcUenUDFm0aRodx5invBug6ZuMJADvp_uP8UjaX9F3sNgrZHe8WzkVayQEQHA97L/s400/Capture2.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 13.5533px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 13.5533px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;You need to give access to
these two action by modifying _Layout.cshtml and adding the following:&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 107%;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENHf3MKZVP64BiZg-bMKW-jU3HnWu5cbh7oCSxWvIgyJbQdpi8PMhuPvlqgXVhXCW6IrqbSHnTivcXyBkFkNgBwmdkrkgjEjle0E3p1oDOgv2lMCgkoRAO2yRl5-05VckAsM5X3Pjt1ei/s1600/ES8.PNG&quot; imageanchor=&quot;1&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;123&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENHf3MKZVP64BiZg-bMKW-jU3HnWu5cbh7oCSxWvIgyJbQdpi8PMhuPvlqgXVhXCW6IrqbSHnTivcXyBkFkNgBwmdkrkgjEjle0E3p1oDOgv2lMCgkoRAO2yRl5-05VckAsM5X3Pjt1ei/s640/ES8.PNG&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
Now run the application, select Elastic Index from the menu first. Then select Elastic Search from menu. You will get the following:&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIUPVbY7gv15EibnzzD3RguGcsjTNJsJrP0wuwk_cXkznsrPwa2P4wQqahJiU_R7VNG5ZMv_L-v36Zu35QqAQX-AcnpFx5Mnj1x13Ti6yg3qW7sXk9RhNGUPKu_dhH4YTgcKvRUWJ9FNJh/s1600/ES9.PNG&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; float: left; margin-bottom: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;135&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIUPVbY7gv15EibnzzD3RguGcsjTNJsJrP0wuwk_cXkznsrPwa2P4wQqahJiU_R7VNG5ZMv_L-v36Zu35QqAQX-AcnpFx5Mnj1x13Ti6yg3qW7sXk9RhNGUPKu_dhH4YTgcKvRUWJ9FNJh/s400/ES9.PNG&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;span style=&quot;font-family: &amp;quot;consolas&amp;quot;; font-size: 9.5pt; line-height: 13.5533px;&quot;&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
This provides a basic platform to test different settings of Elastic Search.&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;MsoNormal&quot;&gt;
&lt;o:p&gt;&lt;/o:p&gt;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/8336463408829789837/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/8336463408829789837' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8336463408829789837'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/8336463408829789837'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2016/07/using-elastic-search-in-visual-studio.html' title='Using Elastic Search in Visual Studio'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mHawGE9s5ZasEPjqq7xW295vrkrKWUvnZ7pOwtJRI7BWZpH1-oCKiovpXxF2mvSnjfepyJ0dOdu3L_vkv_pPkBbTRyfzrWF33vT11j3CGsWnrtyLjbLPVX6MYNJBFFn5S5uAcVTo75qt/s72-c/ES1.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-4763239387887280849.post-7861112714171207353</id><published>2016-07-21T13:12:00.001+09:30</published><updated>2016-07-21T13:12:35.758+09:30</updated><title type='text'>Content Type for xls and xlsx files</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
Exporting a web page data grid into Excel is a common functionality provided by some web applications. If these applications were written in old xls days they would have a line like:&lt;div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&amp;nbsp;Response.ContentType = &quot;application/vnd.ms-excel&quot;;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
with Excel 2007 and above when the file extension changed from xls to xlsx the Content Type is:&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Response.ContentType = &quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&quot;;&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://morrisbahrami.blogspot.com/feeds/7861112714171207353/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/4763239387887280849/7861112714171207353' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7861112714171207353'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/4763239387887280849/posts/default/7861112714171207353'/><link rel='alternate' type='text/html' href='http://morrisbahrami.blogspot.com/2016/07/content-type-for-xls-and-xlsx-files.html' title='Content Type for xls and xlsx files'/><author><name>Morris Bahrami</name><uri>http://www.blogger.com/profile/01738881990530035716</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtXN6c89_O0sNqcb2GPVbQoIEOT0O-LLY18KSHPMs-16jR2lKWcwyMA-FrOK55ogYD4utfqZ6Ya6Vlwg2QGAmBKak0ZrohtxlZ2W5svbeIMlhyBECSv5wZZRZSlfKTh4/s220/IMG_1777.JPG'/></author><thr:total>0</thr:total></entry></feed>