tag:blogger.com,1999:blog-47029501523279767062024-03-19T03:37:01.137-07:00Just geeksBrent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.comBlogger549125tag:blogger.com,1999:blog-4702950152327976706.post-268394112928241482020-05-22T21:09:00.001-07:002020-05-22T21:20:35.414-07:00Inside Microsoft Photos App<a href="https://www.microsoft.com/en-us/p/microsoft-photos/9wzdncrfjbh4?activetab=pivot:overviewtab" rel="nofollow" target="_blank">Microsoft Photos App </a>is the App that comes with Windows 10.<br />
<br />
I turns out you can back it up or move it to another user if you copy the following directory:<br />
<br />
<span style="color: cyan;">C:\Users\<your_username>\AppData\Local\Packages\Microsoft.Windows.Photos_8wekyb3d8bbwe-av.zip\Microsoft.Windows.Photos_8wekyb3d8bbwe</span><br />
<br />
Where <your_username> is your username. This contains things like the photos, albums, face recognition data, tags, etc.<br />
<br />
Microsoft has conveniently placed all this information in a SQLite database which is located at:<br />
<span style="color: cyan;">C:\Users\<your_username>\AppData\Local\Packages\Microsoft.Windows.Photos_8wekyb3d8bbwe\LocalState\MediaDb.v1.sqlite</span><br />
<br />
To view the data you can easily do so using <a href="https://sqlitebrowser.org/dl/" rel="nofollow" target="_blank">DB Browser for SQLite</a>.<br />
<br />
If you are a developer this gives you a lot of information along with a pretty nice UI backed by <a href="https://azure.microsoft.com/en-us/services/cognitive-services/face/" rel="nofollow" target="_blank">Cognitive Services Face API</a> (or so I assume). The difference is you don't have to pay for use of it because Microsoft is giving it to you for free with the Photos App (indirectly). All you have to do is query the SQLite database for any data you might want. Pretty nice. Thanks Microsoft.<br />
<br />
Some tables you might find useful are:<br />
<br />
TagVarient - the name of the tag (airplane, ocean, house, etc)<br />
Tag - related to TagVarient and<br />
Item - your photo or video name, size, location, duration, metadata, etc <br />
ItemTags - joins the Tag and Item tables includes confidence score<br />
Folder - the folders that contain your pictures and their sub folders.<br />
Location - cities where the photos / videos were taken <br />
Person - the people that it tagged and you grouped or it grouped. Represents the items on the People tab in the app. Includes count of people that match that face.<br />
Face - information of where the faces are in each picture<br />
Album - albums (generated). Not sure if self-created ones are here, but I assume they are.Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com25tag:blogger.com,1999:blog-4702950152327976706.post-36635160088672713002019-02-15T10:24:00.001-07:002019-02-15T10:24:44.912-07:00Accessing web site running in Visual Studio 2017 using an alternative hostnameAssumptions:<br />
<br />
<ul>
<li>Running in Visual Studio 2017</li>
<li>Running an application on port 8888</li>
<li>Url used to access the application is http://localhost:8888</li>
</ul>
<div>
<br /></div>
<div>
If you want to access the web site using http://somenamehere:8888 you can do this by doing the following.</div>
<div>
<br /></div>
<div>
<ol>
<li>Open your .vs/config/applicationhost.config file in a text editor</li>
<li>Find the binding for your application.<br /><span style="color: #38761d;"><binding protocol="http" bindingInformation="*:8888:localhost" /></span></li>
<li>In the same <bindings> section, add another <binding><br /><span style="color: #38761d;"><binding protocol="http" bindingInformation="*:8888:" /></span></li>
<li>Optional: If you are using https you will need to do the same. The key is that you match the ports.</li>
</ol>
<div>
You should be able to launch your web site in Visual Studio (Control-F5, etc). This will bring it up as it always have.</div>
</div>
<div>
<br /></div>
<div>
Now you need to hack your dns so that it can resolve your new made up hostname. In this example, it is somenamehere. The easiest way to do this is to open up your hosts file (C:\Windows\System32\drivers\etc\hosts) in a text editor and add the following line to the bottom of it.</div>
<div>
<br /></div>
<div>
127.0.0.1 somenamehere</div>
<div>
<br /></div>
<div>
You should now be able to ping that hostname and see that 127.0.0.1 is responding.</div>
<div>
<br /></div>
<div>
Now open up the browser and go to http://somenamehere:8888 and you should get your application again.</div>
<div>
<br /></div>
<div>
NOTE: If VS2017 gives you any issues, it may be helpful to run it as administrator.</div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com27tag:blogger.com,1999:blog-4702950152327976706.post-28123673623063859822019-02-14T09:36:00.002-07:002019-02-14T09:36:41.518-07:00Changing Styles for print media queryI had a situation where I needed to change what would be printed based on what button on the web page the user clicked. Here is an easy way to do that.<br />
<br />
<br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"><style type="text/css" media="print" id="printStyles"></span><br />
<span style="color: #38761d;"></style></span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"><script></span><br />
<span style="color: #38761d;"> function printOptionA() {</span><br />
<span style="color: #38761d;"> var styles = "#optionA {display: block;} #optionB {display:none;}";</span><br />
<span style="color: #38761d;"> $('#printStyles').text(styles);</span><br />
<span style="color: #38761d;"> window.print();</span><br />
<span style="color: #38761d;"> }</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> function printOptionB() {</span><br />
<span style="color: #38761d;"> var styles = "#optionB {display: block;} #optionA {display:none;}";</span><br />
<span style="color: #38761d;"> $('#printStyles').text(styles);</span><br />
<span style="color: #38761d;"> window.print();</span><br />
<span style="color: #38761d;"> }</span><br />
<span style="color: #38761d;"></script></span><br />
<br />
The two functions can be called from button, hyperlinks, etc.<br />
<br />
If the user just does a Control-P to print in the browser it will print the page as expected (neither of these changes). There is no need to undo these changes after printing.Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com2tag:blogger.com,1999:blog-4702950152327976706.post-78668238740502834682019-02-13T09:51:00.003-07:002019-02-13T09:51:57.449-07:00Changing the first line preview in email clientsIn many email clients it will now show you the first line of the email body before you open it. If you are a developer creating this email sometimes it shows things like a url of a header image instead of something more useful. The good news is you can trick the email clients into displaying whatever you want. Just make sure the first thing in your body tag (can be after the style tag, etc) is the following:<div>
<br /></div>
<div>
<div>
<!-- HIDDEN PREHEADER TEXT --></div>
<div>
<div style="display: none; mso-hide: all; width: 0px; height: 0px; max-width: 0px; max-height: 0px; font-size: 0px; line-height: 0px;"></div>
<div>
Whatever you want to see in the preview here</div>
<div>
</div></div>
</div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-36759233917119218612018-11-20T16:36:00.000-07:002018-11-29T16:29:50.997-07:00Keeping Secrets out of the web.configSee <a href="https://docs.microsoft.com/en-us/aspnet/identity/overview/features-api/best-practices-for-deploying-passwords-and-other-sensitive-data-to-aspnet-and-azure" target="_blank">here </a>for Microsofts official recommendations on best practices to keep secrets out of the web config.<br />
<br />
I am mostly concerned about appSettings and connectionStrings sections in the web.config<br />
<br />
The Microsoft article says everything I am going to say below, but they are some important points to consider.<br />
<br />
<h3>
appSettings</h3>
<div>
To keep your appSettings secret, put them in another file that is not checked into source control. The contents of this file will be merged with what is in the web.config so this works well to allow developers to override values in appSettings.</div>
<div>
<br /></div>
<div>
The syntax is basically</div>
<div>
<br /></div>
<div>
<span class="hljs-tag" style="box-sizing: inherit; color: #0101fd; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;"> <<span class="hljs-name" style="box-sizing: inherit;">appSettings</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">file</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"..\..\AppSettingsSecrets.config"</span>></span><span style="background-color: #fafafa; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;">
</span><span class="hljs-tag" style="box-sizing: inherit; color: #0101fd; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;"><<span class="hljs-name" style="box-sizing: inherit;">add</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">key</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"webpages:Version"</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">value</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"3.0.0.0"</span> /></span><span style="background-color: #fafafa; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;">
</span><span class="hljs-tag" style="box-sizing: inherit; color: #0101fd; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;"><<span class="hljs-name" style="box-sizing: inherit;">add</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">key</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"webpages:Enabled"</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">value</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"false"</span> /></span><span style="background-color: #fafafa; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;">
</span><span class="hljs-tag" style="box-sizing: inherit; color: #0101fd; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;"><<span class="hljs-name" style="box-sizing: inherit;">add</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">key</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"ClientValidationEnabled"</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">value</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"true"</span> /></span><span style="background-color: #fafafa; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;">
</span><span class="hljs-tag" style="box-sizing: inherit; color: #0101fd; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;"><<span class="hljs-name" style="box-sizing: inherit;">add</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">key</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"UnobtrusiveJavaScriptEnabled"</span> <span class="hljs-attr" style="box-sizing: inherit; color: #0451a5;">value</span>=<span class="hljs-string" style="box-sizing: inherit; color: #a31515;">"true"</span> /></span><span style="background-color: #fafafa; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;">
</span><span class="hljs-tag" style="box-sizing: inherit; color: #0101fd; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; font-size: 14px; white-space: pre;"></<span class="hljs-name" style="box-sizing: inherit;">appSettings</span>></span></div>
<div>
<br /></div>
<div>
The file attribute accepts paths that are relative or absolve and the file does not have to exist. This is useful when deploying to different environments that may not use this file and instead use VSTS / replacing of tokens to manage values per environment.</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
connectionStrings</h3>
<div>
The connectionStrings section isn't as nice as the appSettings. The tags between connectionString tags are replaced by the contents of the external file. The file referenced MUST be in the same directory as the web.config that is referencing it. This means the secret file is per project. The other thing that makes it not work as easily is that it MUST exist otherwise you will get a build error because the project file will try to find the file. You can edit the project file and tell it to only include the file in the project for particular environments, but that is tedious and must be done on each project file.</div>
<br />
<br />Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com5tag:blogger.com,1999:blog-4702950152327976706.post-64036595508043310822018-11-08T08:05:00.000-07:002018-11-08T08:05:22.560-07:00Save objects in Visual Studio for reuse laterOne easy way to save an object while debugging in Visual Studio so that you can use it later for troubleshooting, or maybe use in LINQPad is to serialize the object to disk.<br />
<br />
All the libraries you need are built into .NET and can be done in the Immediate Prompt in Visual Studio.<br />
<br />
<h3>
Save the Object to disk</h3>
<span style="color: #38761d;">string json = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(myObject);</span><br />
<span style="color: #38761d;">System.IO.File.WriteAllText($@"c:\dev\{nameof(myObject)}.json", json);</span><br />
<h3>
Read the Object from disk</h3>
string json = System.IO.File.ReadAllText(@"c:\dev\myObject.json");<br />
<br />
var company = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<MyClass>(json);<br />
<br />
The caveat to this is that you will need the MyClass available when you bring it back to life.You can also pass Object instead of MyClass if you don't have it.Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com5tag:blogger.com,1999:blog-4702950152327976706.post-5901005344735524062018-08-22T10:49:00.002-07:002018-08-27T14:49:41.936-07:00Running IISExpress from the command line or PowershellYou don't need to open up Visual Studio just to run another project. You can run IISExpress via the command line instead.<br />
<div>
<br /></div>
<div>
Here is the same example, once for the command prompt and again for Powershell. The name of the site can be found in the applicationhost.config file. You'll see a <site> tag and the name attribute is the siteName. This is also the name that shows up in the system tray when you launch the site in Visual Studio itself.<br />
<br />
You can use the system tray IIS Express icon to quit instances started using Powershell or command prompt. You can also type a the letter Q at the command prompt that gets spawned.<br />
<br />
<h4>
Command Prompt</h4>
</div>
<div>
<span style="color: #38761d;">"C:\Program Files (x86)\IIS Express\iisexpress.exe" /config:"C:\dev\MyMvcApp\.vs\config\applicationhost.config" /site:"MyMvcApp"</span></div>
<div>
<br /></div>
<div>
You'll need to tweak this to match your paths, etc.<br />
<br />
<h4>
Powershell</h4>
</div>
<div>
<br /></div>
<div>
<div>
<span style="color: #38761d;">$scriptDir = Split-Path $script:MyInvocation.MyCommand.Path</span></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;">function Start-IisExpress($config, $siteName) {</span></div>
<div>
<span style="color: #38761d;"> Start-Process -FilePath 'C:\Program Files (x86)\IIS Express\iisexpress.exe' -ArgumentList "/config:$config /site:$siteName"</span></div>
<div>
<span style="color: #38761d;">}</span></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;">Start-IisExpress -config "$scriptDir\.vs\config\applicationhost.config" -siteName: "MyMvcApp"</span></div>
<div>
<br /></div>
<div>
NOTE: This assumes that you have put this in a Powershell (.ps1) file and placed it next to your solution and more importantly that the .vs directory is in the same directory as the .ps1 file. If not, you'll need to adjust the path or hard code the full path.</div>
<div>
<br /></div>
</div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com1tag:blogger.com,1999:blog-4702950152327976706.post-139418842083439592018-06-19T07:48:00.004-07:002018-06-19T07:48:47.344-07:00Fixing build issues<br />
<span style="color: black; font-family: "Calibri","sans-serif";">It can be hard
to work out exactly where the problem is via visual studio directly. You can use the following to leverage msbuild and get more accurate
information.<o:p></o:p></span><br />
<br />
<span style="color: black; font-family: "Calibri","sans-serif";">From a
cmd prompt run:<o:p></o:p></span><br />
<br />
<span style="color: black; font-family: "Calibri","sans-serif";">msbuild
/verbosity:d > build.txt<o:p></o:p></span><br />
<br />Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com6tag:blogger.com,1999:blog-4702950152327976706.post-56182348725202684102018-06-14T00:39:00.000-07:002018-06-14T00:39:51.562-07:00Testing XPathIf you write XPath it is helpful to have a quick way to test what you are doing. You can give it a try using an online tool <a href="http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm" target="_blank">XPathTestBed</a>. This is pretty easy to use.<br />
<br />
If you are doing XPath on page source you can use the Console built into Chrome or Firefox and get immediate results. Just F12 to get into the developer tools. Go to the Console, and enter the following to get all div tags for example.<br />
<br />
$x('//div')<br />
<br />
Very useful and easy to use.Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com1tag:blogger.com,1999:blog-4702950152327976706.post-6260569578901795732018-06-11T08:49:00.000-07:002018-06-12T03:38:41.040-07:00How to use Google to find unsecured web.configsI can't believe how easy it is to find web.config that are not secured. Put this into Google and you will be amazed at what you will get back.<br />
<br />
inurl:ftp inurl:web.config filetype:config<br />
<br />
or<br />
<br />
inurl:http inurl:web.config filetype:config<br />
<br />
Imagine if any of them have passwords in them.<br />
<br />
inurl:ftp inurl:web.config password<br />
<br />
or<br />
<br />
inurl:http inurl:web.config password<br />
<div>
<br /></div>
<br />
<br />Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-35463540957108691992018-05-23T05:45:00.001-07:002018-05-23T05:45:16.262-07:00Angular - Creating a Component using Angular CLI<h3>
Install Angular CLI</h3>
<div>
If you don't have Angular CLI you will need to install it using npm</div>
<div>
<br /></div>
<span style="color: #38761d;">npm install -g @angular/cli</span><br />
<h3>
<br />Usage</h3>
<br />
<span style="color: #38761d;">ng g c products/product-detail.component --flat</span><br />
<br />
ng = Angular CLI<br />
g = generate<br />
c = component<br />
--flat = no folder will be created<br />
<br />
This will create 4 files:<br />
<br />
<span style="color: #b45f06;"> src\app\products\product-detail\product-detail.component.css</span><br />
<span style="color: #b45f06;"> src\app\products\product-detail\product-detail.component.html</span><br />
<span style="color: #b45f06;"> src\app\products\product-detail\product-detail.component.spec.ts</span><br />
<span style="color: #b45f06;"> src\app\products\product-detail\product-detail.component.ts</span><br />
<br />
It will update the file which will register the component in the app.module.ts:<br />
src\app\app.module.ts<br />
<br />
It will also wire the components together putting some useful code in<br />
<span style="color: #b45f06;">src\app\products\product-detail\product-detail.component.ts</span><br />
<div>
<br /></div>
<br />Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com2tag:blogger.com,1999:blog-4702950152327976706.post-86469166948507352012018-05-09T06:33:00.002-07:002018-05-09T06:33:35.507-07:00Angular - Retrieving data using http and observables<h3>
Import HttpClientModule</h3>
Add HttpClientModule to the imports array of one of the application's Angular Modules<br />
<br />
The items in bold are the ones that are specific to adding http.<br />
<h4>
app.module.ts</h4>
<div>
<div>
<span style="color: #38761d;">import { BrowserModule } from '@angular/platform-browser';</span></div>
<div>
<span style="color: #38761d;">import { NgModule } from '@angular/core';</span></div>
<div>
<span style="color: #38761d;">import { FormsModule } from '@angular/forms';</span></div>
<div>
<span style="color: #38761d;">import { AppComponent } from './app.component';</span><br />
<span style="color: #38761d;"><b>import { HttpClientModule } from '@angular/common/http';</b></span></div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;">@NgModule({</span></div>
<div>
<span style="color: #38761d;"> declarations: [ AppComponent, ],</span></div>
<div>
<span style="color: #38761d;"> imports: [ <b>HttpClientModule</b>, BrowserModule, FormsModule ],</span></div>
<div>
<span style="color: #38761d;"> providers: [],</span></div>
<div>
<span style="color: #38761d;"> bootstrap: [AppComponent]</span></div>
<div>
<span style="color: #38761d;">})</span></div>
<div>
<span style="color: #38761d;">export class AppModule { }</span></div>
</div>
<br />
<h3>
Adding Http to Service</h3>
<b>my.service.ts</b><br />
<br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;">import { Injectable } from "@angular/core";</span><br />
<span style="color: #38761d;">import { IProduct } from "./product";</span><br />
<span style="color: #38761d;">import { HttpClient } from "@angular/common/http";</span><br />
<span style="color: #38761d;">import { Observable } from 'rxjs/Observable';</span><br />
<span style="color: #38761d;">import 'rxjs/add/Observable/throw'</span><br />
<span style="color: #38761d;">import 'rxjs/add/operator/catch'</span><br />
<span style="color: #38761d;">import 'rxjs/add/operator/do'</span><br />
<span style="color: #38761d;">import { HttpErrorResponse } from "@angular/common/http";</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;">@Injectable()</span><br />
<span style="color: #38761d;">export class ThingService {</span><br />
<span style="color: #38761d;"> </span><br />
<span style="color: #38761d;"> private _thingUrl = 'www.myWebApi.com/api/myThings';</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> constructor (private _http: HttpClient){ }</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> getMyThings(): Observable<IThing[]> {</span><br />
<span style="color: #38761d;"> return this._http.get<IThing[]>(this._thingUrl)</span><br />
<span style="color: #38761d;"> .do(data => console.log('data: ' + JSON.stringify(data)))</span><br />
<span style="color: #38761d;"> .catch(this.handleError);</span><br />
<span style="color: #38761d;"> }</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> private handleError(err: HttpErrorResponse) {</span><br />
<span style="color: #38761d;"> return Observable.throw(err.message);</span><br />
<span style="color: #38761d;"> }</span><br />
<span style="color: #38761d;">}</span><br />
<div>
<br /></div>
TIP: The url can be to a local JSON file that has the desired response. This can be useful for mocking out the web service you are calling when testing or rapidly developing.<br />
<h3>
Using Service / Subscribing</h3>
Call the subscribe method of the returned observable<br />
<br />
In your component you could have something like this.<br />
<br />
<span style="color: #38761d;">ngOnInit(): void {</span><br />
<span style="color: #38761d;"><span style="white-space: pre;"> </span>this._productService.myThings()</span><br />
<span style="color: #38761d;"><span style="white-space: pre;"> </span>.subscribe(things => {</span><br />
<span style="color: #38761d;"><span style="white-space: pre;"> </span>this.things = things;</span><br />
<span style="color: #38761d;"><span style="white-space: pre;"> </span>}, </span><br />
<span style="color: #38761d;"><span style="white-space: pre;"> </span>error => {</span><br />
<span style="color: #38761d;"> /// handle error here...</span><br />
<span style="color: #38761d;"><span style="white-space: pre;"> </span>});</span><br />
<span style="color: #38761d;">}</span><br />
<br />Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-24696519831435950972018-05-02T08:52:00.001-07:002018-05-02T08:52:09.099-07:00Kill all instances of a process using PowershellSometimes it is just too tedious to click on and kill all the processes in Task Manager in Windows.<br />
<br />
If you have a PowerShell prompt open and several instances to kill the following command will do the trick.<br />
<br />
<h3>
Kill the processes</h3>
One of my favorite examples:<br />
<br />
<span style="color: #38761d;">stop-process -name phantomjs</span><br />
<br />
<h3>
Get List of Processes</h3>
If you don't know the name, use the following command to get a list of all processes running<br />
<br />
<span style="color: #38761d;">Get-Process</span><br />
<br />
<br />Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-78856839647052306312018-05-01T05:30:00.000-07:002018-05-09T05:41:01.332-07:00Angular - Services<h3>
What is a service</h3>
Simply put it is a class with a focused purpose. Generally it is not specific to any component, and thus provides logic that can be used for different components. Useful for encapsulating external interactions such as web api calls, etc.<br />
<br />
<h3>
Dependency Injection</h3>
We can use Angular and Dependency Injection to inject the service into the component. This makes testing much easier by allowing for Mocks. Luckily, Angular has a built in injector.<br />
<br />
In order for a component to use the service it just needs to add a parameter to the constructor of the component.<br />
<br />
<h4>
Example:</h4>
<b>my.service.ts</b><br />
<br />
import { Injectable } from '@angular/core'<br />
<br />
@Injectable()<br />
export class MyService {<br />
getMyThings() : IThing[] { ... }<br />
}<br />
<br />
export class MyComponent {<br />
private _myService;<br />
constructor(myService: MyService) {<br />
_myService = myService<br />
}<br />
}<br />
<br />
Tip: Here is the same MyComponent class, but in shorter syntax<br />
<br />
export class MyComponent {<br />
<br />
constructor(private _myService: MyService) {<br />
}<br />
}<br />
<br />
<h3>
Registering the Service</h3>
<div>
<br /></div>
<div>
A service can be registered at with different scope. Choose the right method to get the right scope.</div>
<h4>
Method 1: Registering a Provider</h4>
<div>
To make the service available to a component and its children add it to the array of providers where the component is defined.</div>
<div>
<br /></div>
<div>
import { MyService } from './my.service';</div>
<div>
<br /></div>
<div>
@Component({</div>
<div>
selector: ...,</div>
<div>
template: ..., </div>
<div>
providers: [MyService]</div>
<div>
})</div>
<div>
export class MyComponent {<br />
constructor(private _myService) {}<br />
}</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com23tag:blogger.com,1999:blog-4702950152327976706.post-6063614246471671582018-04-25T07:00:00.003-07:002018-04-25T07:00:44.918-07:00Angular - TypeScript Basic Syntax<h3>
Common Data Types</h3>
string<br />
number<br />
boolean<br />
any - when we don't care what the type is<br />
<br />
<h3>
Using Data Types</h3>
<div>
export class MyClass {</div>
<div>
name: string = "Test";</div>
<div>
}</div>
<div>
<br /></div>
<h3>
Functions</h3>
<div>
<div>
export class MyClass {</div>
<div>
doSomething(name: string) : void {<br />
}</div>
<div>
}</div>
</div>
<div>
<br />
<h3>
Interface</h3>
</div>
<div>
export interface IMyClass {</div>
<div>
name: string;</div>
<div>
code: string;</div>
<div>
doSomething(name: string) : void</div>
<div>
}</div>
<div>
<br /></div>
<div>
<div>
<h3>
Class Inheriting from Interface</h3>
</div>
<div>
import { IMyClass } from './myClass';</div>
<div>
export class MyClass implements IMyClass {</div>
<div>
constructor(name: string, code: string) {</div>
<div>
}<br />
<br /></div>
<div>
doSomething(name: string) : void { ... }</div>
<div>
}</div>
</div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-15517672309858590762018-04-25T07:00:00.001-07:002018-04-25T07:00:20.089-07:00Angular - Interactive Nested ComponentsNow we want to extend our Display-Only nested component to take input from the user. If the user clicks the stars then notify the parent component.<br />
<h3>
In the Parent component</h3>
<h4>
Using the nested component</h4>
We use it just as you would any component. To get data from the nested component we use the banana in the box [()] syntax.<br />
<br />
<span style="color: #38761d;"><myApp-star [rating]='product.starRating' </span><br />
<span style="color: #38761d;"> <b>[(notify)]='onRatingClicked($event)'</b>></myApp-star></span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;">$event</span> passes along the appropriate information associated with the event.<br />
<br />
<h4>
Handle the event in the parent component</h4>
<div>
Add this to the parent component class (.ts file).</div>
<div>
<div>
<br /></div>
<div>
<div>
<span style="color: #38761d;"> onRatingClicked(message: string) : void {</span></div>
<div>
<span style="color: #38761d;"> // do something with the data sent to us via the message parameter</span></div>
<div>
<span style="color: #38761d;"> }</span></div>
</div>
</div>
<h2>
Implementing the Nested Component</h2>
<div style="font-size: medium; font-weight: 400;">
<h3>
star.component.ts</h3>
</div>
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;">import { Component, OnChanges, Input } from "@angular/core";</span></span><br />
<span style="color: #38761d;">import { Component, OnChanges, Input, Output, <b>EventEmitter </b>} from "@angular/core";</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;">@Component({</span><br />
<span style="color: #38761d;"> selector: 'pm-star',</span><br />
<span style="color: #38761d;"> templateUrl: './star.component.html',</span><br />
<span style="color: #38761d;"> styleUrls: ['./star.component.css']</span><br />
<span style="color: #38761d;">})</span><br />
<span style="color: #38761d;">export class StarComponent implements OnChanges {</span><br />
<span style="color: #38761d;"> @Input() rating: number;</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> starWidth: number;</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> <b>@Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>();</b></span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> ngOnChanges(): void {</span><br />
<span style="color: #38761d;"> this.starWidth = this.rating * 86/5;</span><br />
<span style="color: #38761d;"> }</span><br />
<span style="color: #38761d;"><br /></span>
<span style="color: #38761d;"> <b> onClick() : void {</b></span><br />
<span style="color: #38761d;"><b> this.ratingClicked.emit('The rating ' + this.rating + ' was clicked');</b></span><br />
<span style="color: #38761d;"><b> } </b></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;"></span></span><br />
<span style="color: #38761d;">}</span><br />
<div>
<h4>
Passing data from the nested container to the parent component</h4>
<div>
The only way to pass data to the parent component is using an event. It needs to be decorated with the @Output for this to work. In this example we are passing a type string, but it could be any object for more complex data. </div>
<h3>
star.component.html</h3>
</div>
<div>
<span style="color: #38761d;"><div class="crop" </span><br />
<span style="color: #38761d;"> [style.width.px]="starWidth"</span><br />
<span style="color: #38761d;"> [title]="rating"</span><br />
<span style="color: #38761d;"> <b> (click)='onClick()'</b>></span><br />
<span style="color: #38761d;"> <div style="width: 86px"></span><br />
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span><br />
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span><br />
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span><br />
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span><br />
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span><br />
<span style="color: #38761d;"> </div></span><br />
<span style="color: #38761d;"></div></span></div>
<div>
<br /></div>
<div>
Notice that rating is a property in the star component and so is title</div>
<div>
<br />
<h3>
<br /></h3>
</div>
<div>
<br /></div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-32152133335574408882018-04-25T06:26:00.000-07:002018-05-01T05:25:59.648-07:00Angular - Display-Only Nested Components<br />
<h3>
Using the nested component</h3>
If we assume the source below is from some parent component html file it might look like this if we are showing a numeric value for the rating of a product.<br />
<br />
<span style="color: #38761d;">{{product.startRating}}</span><br />
<br />
If we then want to use a custom component (nested component) to show a nice graphical star rating instead of the numeric value we would use the syntax (property binding syntax) below assuming our component has a selector of myApp-star and has an input property called rating.<br />
<br />
<span style="color: #38761d;"><myApp-star [rating]='product.starRating'></myApp-star></span><br />
<br />
<h2>
Implementing the Nested Component</h2>
<div style="font-size: medium; font-weight: 400;">
Typically nested components are kept in the shared directory of the project.</div>
<div style="font-size: medium; font-weight: 400;">
Use the component by adding it to the module as a declaration.</div>
<div style="font-size: medium; font-weight: 400;">
Input is sent from the parent component to the child (nested) component using a property on the nested component. </div>
<h3>
star.component.ts</h3>
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;">import { Component, OnChanges, Input } from "@angular/core";</span></span><br />
<span style="color: #38761d;"><span style="font-size: small;"><span style="font-weight: 400;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: 400;">@Component({</span></span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;"> selector: 'myApp-star',</span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;"> templateUrl: './star.component.html',</span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;"> styleUrls: ['./star.component.css']</span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;">})</span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;">export class StarComponent implements OnChanges {</span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;"> @Input() rating: number;</span></span><br />
<span style="color: #38761d;"><span style="font-size: small;"><span style="font-weight: 400;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: 400;"> starWidth: number;</span></span></span><br />
<span style="color: #38761d;"><span style="font-size: small;"><span style="font-weight: 400;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: 400;"> ngOnChanges(): void {</span></span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;"> this.starWidth = this.rating * 86/5;</span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;"> }</span></span><br />
<span style="font-size: small;"><span style="color: #38761d; font-weight: 400;">}</span></span><br />
<div>
<br />
<h4>
Passing data from parent to nested component</h4>
Notice the <b>@Input</b> decorator. It is required to expose a property to a parent component in the html file. The starWidth is recalculated whenever the rating property changes.<br />
<br />
<h4>
star.component.html</h4>
</div>
<div>
<div>
<span style="color: #38761d;"><div class="crop" </span></div>
<div>
<span style="color: #38761d;"> [style.width.px]="starWidth"</span></div>
<div>
<span style="color: #38761d;"> [title]="rating"></span></div>
<div>
<span style="color: #38761d;"> <div style="width: 86px"></span></div>
<div>
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span></div>
<div>
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span></div>
<div>
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span></div>
<div>
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span></div>
<div>
<span style="color: #38761d;"> <span class="glyphicon glyphicon-star"></span></span></div>
<div>
<span style="color: #38761d;"> </div></span></div>
<div>
<span style="color: #38761d;"></div></span></div>
</div>
<div>
<br /></div>
<div>
Notice that rating is a property in the star component and so is title</div>
<div>
<br /></div>
<h3>
star.component.css</h3>
<div>
<div>
.crop {</div>
<div>
overflow: hidden;</div>
<div>
}</div>
<div>
div {</div>
<div>
cursor: pointer;</div>
<div>
}</div>
</div>
<div>
<br /></div>
<h3>
app module</h3>
<div>
Tell the module that contains the parent component where to find our star component be adding it to the declarations in the module. In the most basic of cases this is the app.modules.ts.</div>
<div>
<br /></div>
<h4>
app.module.ts</h4>
<div>
<div>
<span style="color: #38761d;">import { BrowserModule } from '@angular/platform-browser';</span></div>
<div>
<span style="color: #38761d;">import { NgModule } from '@angular/core';</span></div>
<div>
<span style="color: #38761d;">import { FormsModule } from '@angular/forms';</span></div>
<div>
<span style="color: #38761d;">import { AppComponent } from './app.component';</span></div>
<div>
<span style="color: #38761d;">import { StarComponent } from './shared/star.component';</span></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;">@NgModule({</span></div>
<div>
<span style="color: #38761d;"> declarations: [ AppComponent, <b>StarComponent</b> ],</span></div>
<div>
<span style="color: #38761d;"> imports: [ BrowserModule, FormsModule ],</span></div>
<div>
<span style="color: #38761d;"> providers: [],</span></div>
<div>
<span style="color: #38761d;"> bootstrap: [AppComponent]</span></div>
<div>
<span style="color: #38761d;">})</span></div>
<div>
<span style="color: #38761d;">export class AppModule { }</span></div>
</div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-61610196829219242782018-04-23T05:02:00.001-07:002018-04-25T07:00:53.867-07:00Angular - Component Life Cycle Hooks<h3>
Common Lifecycle Hooks</h3>
<h4>
OnInit</h4>
<div>
Perform component initialization and retrieve data</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;">import { Component, OnInit } from '@angular/core';</span></div>
<div>
<span style="color: #38761d;">export class MyComponent implements OnInit {</span></div>
<div>
<span style="color: #38761d;"> ngOnInit(): void {</span></div>
<div>
<span style="color: #38761d;"> console.log('In OnInit');</span></div>
<div>
<span style="color: #38761d;"> }</span></div>
<div>
<span style="color: #38761d;">}</span></div>
<div>
<br /></div>
<h4>
OnChanges</h4>
<div>
Perform action after change to input properties</div>
<div>
<br /></div>
<h4>
OnDestroy</h4>
<div>
Perform cleanup for the component</div>
<div>
<br /></div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com1tag:blogger.com,1999:blog-4702950152327976706.post-11584815420678019632018-04-19T06:08:00.000-07:002018-04-25T07:01:34.819-07:00Angular - Transforming Data with PipesSometimes we need to transform bound properties before it is displayed. Such is the case with formatting dates, currency, decimals, etc. Pipes can be chained.<br />
<h3>
Built-in Pipes</h3>
<br />
<ul>
<li>date</li>
<li>number, decimal, percent, currency</li>
<li>json, slice, etc</li>
</ul>
<div>
The complete list and more information can be found <a href="https://angular.io/api?type=pipe" rel="nofollow" target="_blank">here</a>.</div>
<h4>
Examples (no parameters):</h4>
<div>
<span style="color: #38761d;">{{ product.productCode | lowercase }}</span></div>
<div>
<span style="color: #38761d;"><img [src]='product.imageUrl' [title]='product.productName | uppercase'></span></div>
<div>
<span style="color: #38761d;">{{ product.price | currency | lowercase }}</span></div>
<div>
<br /></div>
<h4>
Examples (with parameters)</h4>
<div>
NOTE: Parameters are separated by colons</div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;">{{ product.price | currency: 'USD' : true : '1.2-2' }}</span><br />
<span style="color: #38761d;"><br /></span>
<br />
<h4>
Custom Pipe</h4>
</div>
<div>
<span style="color: #38761d;">import { Pipe, PipeTransform } from '@angular/core';</span></div>
<div>
<span style="color: #38761d;">@Pipe({name: 'myTransform'})</span></div>
<div>
<span style="color: #38761d;">export class MyTransform implements PipeTransform {</span></div>
<div>
<span style="color: #38761d;"> transform(value: string, customParam1: string): string { ... }</span></div>
<div>
<span style="color: #38761d;">}</span></div>
<div>
<br /></div>
<div>
Add it to your module (i.e. app.module.ts) as shown here:</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;">@NgModule({</span></div>
<div>
<span style="color: #38761d;">imports: ...</span></div>
<div>
<span style="color: #38761d;">declarations: [ AppComponent, MyTransform ],</span></div>
<div>
<span style="color: #38761d;">bootstrap: ...</span></div>
<div>
<span style="color: #38761d;">})</span></div>
<div>
<br /></div>
<div>
Use it just like the built in pipes</div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-47718409423678063562018-04-19T05:51:00.000-07:002018-04-25T07:02:00.737-07:00Angular - Property and Event Bindings<h2>
Binding with Interpolation</h2>
<h2>
<div style="font-size: medium; font-weight: 400;">
Use <span style="color: #38761d;">{{expression}}</span> to pull (only one way binding) in content from the component class. The expression can have many forms.</div>
<div style="font-size: medium; font-weight: 400;">
<br /></div>
<div style="font-size: medium; font-weight: 400;">
For example:</div>
<div style="font-size: medium; font-weight: 400;">
<span style="color: #38761d;">{{propertyName}}</span></div>
<div style="font-size: medium; font-weight: 400;">
<span style="color: #38761d;">{{'ABC' + functionName()}}</span></div>
<div style="font-size: medium; font-weight: 400;">
<span style="color: #38761d;">{{'Answer is ' + 3*2}}</span><br />
<span style="color: #38761d;">{{showImage ? 'Hide' : 'Show'}} Image</span><br />
<br />
<span style="color: #38761d;"><img src={{product.imageUrl}}></span><br />
<br />
Notice that it does not use quotes!</div>
</h2>
<h2>
Property Binding</h2>
<div>
Property Binding is one way just like interpolation.</div>
<div>
<br /></div>
<div>
We could use interpolation to set the src url for an image using:</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"><img src={{product.imageUrl}}></span></div>
<div>
<br /></div>
<div>
or </div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"><img src='http://someUrl/{{product.imageUrl}}'></span></div>
<div>
<br /></div>
<div>
We can use Property binding to do the first case, but not the second case.</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"><img [src]='product.imageUrl'></span></div>
<div>
<br /></div>
<div>
The syntax for Property Binding has a two parts:</div>
<div>
<ul>
<li>Binding Target - Is always in surrounded by []</li>
<li>Binding Source - Is Surrounded by '' (two single quotes).</li>
</ul>
<div>
Generally, Property Binding is preferred instead of interpolation.</div>
</div>
<div>
<br /></div>
<h2>
Event Binding</h2>
<div>
When the user clicks something an event is generated. We can listen for these events using Event Binding. Here is the syntax.</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"><button (click)='doSomething()'></span></div>
<div>
<br /></div>
<div>
<div>
The syntax for Property Binding has a two parts:</div>
<div>
<ul>
<li>Target Event - Is always in surrounded by ()</li>
<li>Template Statement - Is Surrounded by '' (two single quotes).</li>
</ul>
<div>
In this example, when the button is clicked the doSomething() method in our component class is executed.</div>
</div>
</div>
<div>
<br /></div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/Events" rel="nofollow" target="_blank">List of Events</a></div>
<div>
<br /></div>
<h2>
Two-way Binding</h2>
<div>
This is useful for having the component and dom in sync such as in the case of an input field on a form.</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"><input [(ngModel)]='someProperty'></span></div>
<div>
<br /></div>
<div>
The Banana in a Box metaphor can be used to remember the order of the parenthesis. Imagine the [()] to have a banana as () in a box as [].</div>
<div>
<br /></div>
<div>
The class for the component would be something like this.</div>
<div>
<span style="color: #38761d;">export class MyComponent {</span></div>
<div>
<span style="color: #38761d;"> someProperty: string = 'abc';</span></div>
<div>
<span style="color: #38761d;">}</span></div>
<div>
<br /></div>
<div>
ngModel is a keyword defined in the FormsModule. The FormsModule will need to be added to the AppModule. To do this open your app.module.ts and add to the top of the file the following:</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;">import { FormsModule } from '@angular/forms';</span></div>
<div>
<br /></div>
<div>
Next, in the same app.module.ts file add FormsModule to the array of imports in the <span style="color: #38761d;">@NgModule()</span>.</div>
<div>
<br /></div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-32408613103284033442018-04-18T04:55:00.000-07:002018-04-25T07:02:12.110-07:00Angular - Page Layout syntax<h3>
Built-in Structural Directives</h3>
<h4>
*ngIf</h4>
<div>
This adds control flow to the page for hiding and showing content based on conditional logic.</div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;"><div *ngIf='someLogic()'></span></div>
<div>
<span style="color: #38761d;"> Some content to show</span></div>
<div>
<span style="color: #38761d;"></div></span></div>
<div>
<br /></div>
<div>
<h4>
*ngFor</h4>
<div>
This adds control flow to the page for looping over content like a for loop.</div>
<div>
<br /></div>
<div>
<span style="color: #38761d;"><div *ngFor='let obj of objects'></span></div>
<div>
<span style="color: #38761d;"> <div>{{obj.PropertyHere}}</div></span></div>
<div>
<span style="color: #38761d;"></div></span></div>
</div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-27079540370650855582018-04-17T05:31:00.000-07:002018-05-01T05:25:43.206-07:00Angular - Creating a Component in Angular<h2>
Component</h2>
A Component has 3 parts<br />
<br />
<ul>
<li>Template</li>
<ul>
<li>View layout</li>
<li>Created with HTML</li>
<li>Includes binding and directives</li>
</ul>
<li>Class</li>
<ul>
<li>Code supporting the view</li>
<li>Created with TypeScript (.ts file)</li>
<li>Properties for data</li>
<li>Methods for logic</li>
</ul>
<li>CSS</li>
<ul>
<li>A CSS file for the styling needed for the component</li>
</ul>
<li>Metadata</li>
<ul>
<li>Extra data for Angular</li>
<li>Defined with a decorator</li>
</ul>
</ul>
<div>
<br /></div>
<h2>
Example</h2>
<h3>
app.component.ts file</h3>
<div>
<div>
<br /></div>
<div>
<span style="color: #38761d;">import { Component } from '@angular/core';</span></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;">@Component({</span></div>
<div>
<span style="color: #38761d;"> selector: 'myApp-root',</span></div>
<div>
<span style="color: #38761d;"> templateUrl: './app.component.html',</span></div>
<div>
<span style="color: #38761d;"> styleUrls: ['./app.component.css']</span></div>
<div>
<span style="color: #38761d;">})</span></div>
<div>
<span style="color: #38761d;">export class AppComponent {</span></div>
<div>
<span style="color: #38761d;"> title = 'Hello World';</span></div>
<div>
<span style="color: #38761d;">}</span></div>
</div>
<div>
<br /></div>
<div>
<ul>
<li>The import pulls in dependency references</li>
<li><b>@Component</b> is the metadata / decorator that says the class is a component. This is similar to an [Attribute] in C#</li>
<li><b>export</b> makes the class definition available for user elsewhere.</li>
<li>The <b>selector </b>is a unique value for this component in the application. It is suggested you prefix selectors with something that identifies it as part of your app. This is also what is used as a tag to use this component in another component. In this case it is <myApp-root><myApp-root></li>
<li>It is common to append "Component" to the name name of the class so that it is clear that it is a component.</li>
</ul>
</div>
<div>
<br /></div>
<h3>
app.component.html</h3>
<div>
<div>
<span style="color: #38761d;"><div></span></div>
<div>
<span style="color: #38761d;"> <h1></span></div>
<div>
<span style="color: #38761d;"> Hello{{title}}!!</span></div>
<div>
<span style="color: #38761d;"> </h1></span></div>
<div>
<span style="color: #38761d;"></div></span></div>
</div>
<div>
<br /></div>
<div>
This is the HTML that defines the layout. Anything in {{...}} tags are binds to properties in the class associated with this component.</div>
<div>
<br /></div>
<div>
<h3>
app.component.css</h3>
<div>
<span style="color: #38761d;">h1 { text-align:center }</span></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
This is a standard CSS file, except these styles will be unique to this component automatically. They will not affect other styles in the project.</div>
</div>
<div>
<br /></div>
<h2>
Imports</h2>
<div>
Some common Angular Modules you may need to import are:</div>
<div>
<ul>
<li>@angular/core (as we have done above)</li>
<li>@angular/animate</li>
<li>@angular/http</li>
<li>@angular/router</li>
</ul>
<h2>
Using the Component</h2>
</div>
<div>
This is how you would use it in index.html for example:</div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;"><body></span></div>
<div>
<span style="color: #38761d;"><myApp-root></myApp-root></span></div>
<div>
<span style="color: #38761d;"></body></span></div>
<div>
<br /></div>
<h2>
Telling index.html about our Component</h2>
<div>
In app.module.ts you list what angular modules should be included in our application#</div>
<div>
<br /></div>
<div>
<div>
<span style="color: #38761d;">import { BrowserModule } from '@angular/platform-browser';</span></div>
<div>
<span style="color: #38761d;">import { NgModule } from '@angular/core';</span></div>
<div>
<span style="color: #38761d;">import { </span><b><i><span style="color: #274e13;">AppComponent</span></i></b><span style="color: #38761d;"> } from './app.component';</span></div>
<div>
<span style="color: #38761d;"><br /></span></div>
<div>
<span style="color: #38761d;">@NgModule({</span></div>
<div>
<span style="color: #38761d;"> declarations: [ </span><b><i><span style="color: #274e13;">AppComponent</span></i></b><span style="color: #38761d;"> ],</span></div>
<div>
<span style="color: #38761d;"> imports: [ BrowserModule ],</span></div>
<div>
<span style="color: #38761d;"> providers: [],</span></div>
<div>
<span style="color: #38761d;"> bootstrap: [</span><b><i><span style="color: #274e13;">AppComponent</span></i></b><span style="color: #38761d;">]</span></div>
<div>
<span style="color: #38761d;">})</span></div>
<div>
<span style="color: #38761d;">export class AppModule { }</span></div>
</div>
<div>
<br /></div>
Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0tag:blogger.com,1999:blog-4702950152327976706.post-117328642391475862018-04-17T04:31:00.000-07:002018-04-25T07:02:53.799-07:00Angular - Running Angular application using npm / Visual Studio Code<h3>
Assumptions</h3>
<div>
Using Visual Studio Code (on Windows)</div>
<div>
<br /></div>
<h3>
Opening Integrated Terminal</h3>
<div>
View menu -> Integrated Terminal</div>
<div>
<br /></div>
<h3>
Install packages</h3>
<div>
Open Integrated Terminal and type:</div>
<div>
npm install</div>
<div>
<br /></div>
<h3>
Launching Angular Application</h3>
Open Integrated Terminal and type:<br />
npm start<br />
This will build app and launch in the browser.<br />
<br />
This also launches the web server. To stop the web server type control-c at the command prompt.Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com3tag:blogger.com,1999:blog-4702950152327976706.post-89556209175198210242018-03-27T01:12:00.000-07:002018-03-27T01:12:59.447-07:00Setting the Timeout for the WinRM - SQL Server DB DeployThe parameters to the <b>WinRM –SQL Sever DB Deploy </b>task in VSTS can be used do a backup using the inline sql script.It is a good idea to set the additional arguments to be<b> -ConnectionTimeout 120 -QueryTimeout 120</b> (for two minutes of timeout). Set the number of seconds to a reasonable value for your system.<br />
<br />
If you don't and your backup exceeds the default timeout (90 seconds I believe), then you will get an error like this:<br />
<br />
<div style="background-color: #fffffe; font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<span style="color: #cd3131; font-weight: bold;">##[error]Microsoft.PowerShell.Commands.WriteErrorException: Deployment on one or more machines failed. </span></div>
<div style="background-color: #fffffe; font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<span style="color: #cd3131; font-weight: bold;">System.Exception: The running command stopped because the preference variable "ErrorActionPreference" </span></div>
<div style="background-color: #fffffe; font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<span style="color: #cd3131; font-weight: bold;">or common parameter is set to Stop: Timeout expired. The timeout period elapsed prior to completion </span></div>
<div style="background-color: #fffffe; font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<span style="color: #cd3131; font-weight: bold;">of the operation or the server is not responding.</span></div>
<br />
It is actually SQL Server complaining that the time has elapsed, but it is doing so based on wht the WinRM says is the timeout.<br />
<br />
To set the timeout open your WinRM - SQL Sever DB Deploy task in VSTS and set the <b>Additional Arguments </b>to <b>-ConnectionTimeout 120 -QueryTimeout 120.</b>Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com1tag:blogger.com,1999:blog-4702950152327976706.post-46896464591620282692018-03-16T06:53:00.000-07:002018-03-16T06:53:37.948-07:00Change Windows credentials when connecting to a database using Windows AuthenticationImage you have a two accounts in Active Directory. You have one that you log into Windows (call it BasicUser1 for example). The other is one that you use for development and is the account (call it DevUser1 for example) that you need to use to access a MS SQL Server database using Windows Authentication.<br />
<br />
Now when running SSMS (SQL Server Management Studio), LINQPad, Visual Studio, etc and trying to connect to a database that requires Windows Authentication (using DevUser1), but you are logged into Windows as BasicUser1 which doesn't have permissions to the database.<br />
<br />
The problem is how do we impersonate DevUser1 when connecting to the database using Windows Authentication. The answer is actually pretty simple and seamless once configured.<br />
<br />
The answer is the Credential Manager built into Windows. You can find it in the start menu, but you can also run it directly using:<br />
<br />
control /name Microsoft.CredentialManager<br />
<br />
It looks something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKfRKj3ccLjwMLlNowd8gPp_hl38BGBrVeS10IajsZldcDkr_CVhqBOaZ5JZzXKWCldrdPHtHSAqxT-pYXqhlzdHCEwcCwysO-2S9KvOqe2oT093nhTXhmIL5Elb87twqHoHkdiiq9IAo/s1600/CredentialManager.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="556" data-original-width="885" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKfRKj3ccLjwMLlNowd8gPp_hl38BGBrVeS10IajsZldcDkr_CVhqBOaZ5JZzXKWCldrdPHtHSAqxT-pYXqhlzdHCEwcCwysO-2S9KvOqe2oT093nhTXhmIL5Elb87twqHoHkdiiq9IAo/s640/CredentialManager.png" width="640" /></a></div>
<br />
<br />
Click the Add a Windows credential link.<br />
<br />
Enter the fully qualified server name, etc AND the port for the SQL Server database (the default is 1433). The username should be in the format domain\username. The password is the password for the specified user.<br />
<br />
Now when you connect to the database with Windows Authentication Windows will automatically pass the credentials specified in the Credential Manager, not the ones you are currently logged into Windows as.Brent Vhttp://www.blogger.com/profile/15891142062380248367noreply@blogger.com0