[ng] Angular note

Angular　note
 
Angular CLI 實用指令
npm install -g angular-cli 安裝
ng --help 說明
ng new 建立新專案
ng g c 建立component
ng g p 建立pipe
...常用<schematic>：
class component directive enum guard interface module pipe service
ng serve --open 啟用網站
 
基本內容建立格式
  1. Import
  2. 修飾詞
  3. Output
 
 
資料綁定 4種
  {{}}
  [property] = "value" : 屬性綁定
  (event) = "hander"   : 事件綁定
  [(ngModel)] = "property" : 雙向綁定
 
<!-- 雙向綁定 -->
<input [(ngModel)]="property">
<!-- 屬性綁定 -->
<input [ngModel]="property">
<!-- 事件綁定 -->
<input (ngModelChange)="handler($event)">

裝飾結構說明
@Component :
@Pipes
@Directive :
結構型Structural Directives:*ngfor,
屬性型Attribute Directives:[(ngModel)]
@Injectable : Service 的裝飾器

Routing說明
forRoot
forChild
路由在查找的時候是有順序性:AppRoutingModule放後面
模組延遲載入 : ex.loadChildren: './feature/feature.module#FeatureModule'
預先載入 :頁面初始化的時候就把所有可延遲載入的模組透過背景非同步地下載
負責重新配置頁面中應該顯示哪些 Component
[routerLink]="['..', path.checkoutFlow.paymentInfo]"  回上層

其他:
Angular JIT vs AOT
Component 只負責處理畫面、資料綁定
Service 則負責像是取得資料、表單驗證等等的邏輯處理，

ref :
[Angular 深入淺出三十天] https://ithelp.ithome.com.tw/articles/10205808
custom pipes https://angular.io/guide/pipes#custom-pipes
[Angular 大師之路] https://ithelp.ithome.com.tw/articles/10203550
[Angular2速成班]用Angular CLI節省你的開發時間　https://dotblogs.com.tw/wellwind/2016/09/30/angular2-angular-cli
HTTP Cache 機制 https://blog.techbridge.cc/2017/06/17/cache-introduction/

好用擴充:
angular2-prettyjson

[C#] 推薦分析程式工具

推薦暗黑大筆記 : 重構筆記 - .NET 壞味道補充包

裡面有NDepend 套件內的依些壞味道rule

一些常見的壞味道

1.一個類別太大 200行以上
2.方法太大太複雜
3.方法參數過多

還有很多值得學習與思考的地方
強烈推薦可以去研究看看

[sql] 將特定欄位當作 column

最近遇到要把 資料庫某個欄位當作 column 使用

所以就查詢了一下,目前有兩種方式


1.使用PIVOT, 轉置table, 但是原始column name 不能跟欄位裡面的值重複, 不然會出錯

說明: 先動態取得要轉置成column的欄位, ColumnGroup , 組成需要的字串, 再用PIVOT轉置TABLE

[sql] 撈取所有DB 的 所有TABLE

最近有個需求是直接給一張table, 但卻不知道在眾多DB的哪一個DB裡面

因此股哥到列出所有DB 及其 Table 並整理如下:

[Nlog] 簡易config

<?xml version="1.0" encoding="utf-8" ?>
<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.nlog-project.org/schemas/NLog.xsd NLog.xsd"
      autoReload="true"
      throwExceptions="false"
      internalLogLevel="Off" internalLogFile="c:\temp\nlog-internal.log">

  <!-- optional, add some variables
  https://github.com/nlog/NLog/wiki/Configuration-file#variables
  -->
  <variable name="myvar" value="myvalue"/>

  <!--
  See https://github.com/nlog/nlog/wiki/Configuration-file
  for information on customizing logging rules and outputs.
   -->
  <targets>

    <!--
    add your targets here
    See https://github.com/nlog/NLog/wiki/Targets for possible targets.
    See https://github.com/nlog/NLog/wiki/Layout-Renderers for the possible layout renderers.
    -->


    <target xsi:type="File" name="f" fileName="${basedir}/logs/${shortdate}.log"
            layout="${longdate} ${uppercase:${level}} ${message}" />
  </targets>

  <rules>
    <!-- add your logging rules here -->
    <logger name="*" minlevel="Trace" writeTo="f" />
    <!--
    Write all events with minimal level of Debug (So Debug, Info, Warn, Error and Fatal, but not Trace)  to "f"
    <logger name="*" minlevel="Debug" writeTo="f" />
    -->
  </rules>
</nlog>

補充 ：

如果想要自訂參數 ex.${event-context:item=Name}

程式中記得自訂log level 與參數即可

private static void WriteLog(string msg)
{
    LogEventInfo ei = new LogEventInfo(NLog.LogLevel.Trace, "", "");
    ei.Properties["Name"] = Guid.NewGuid();
    ei.Properties["msg"] = msg;
    logger.Log(ei);
}

config 加入 event-context 參數即可

    <target xsi:type="File" name="f" fileName="${basedir}/logs/${shortdate}/${event-context:item=appName}.log"
            layout="${longdate} |${uppercase:${level}}| ${event-context:item=msg}" />
  </targets>

[pdf] [C#] 網頁匯出PDF - PuppeteerSharp

最近遇到需要將頁面轉PDF

這裡推薦一個套件,真的滿厲害的

比起自己用itext刻快多了~


參考範例 :

特別說明,如果要讓pdf完整套用跟畫面一致,請記得設定參數唷
new PdfOptions() { PrintBackground = true, PreferCSSPageSize = true }

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions()
{
    Headless = true 
}))
{
    //參考頁面 https://www.puppeteersharp.com/api/PuppeteerSharp.ScreenshotOptions.html
    using (var page = await browser.NewPageAsync())
    {
        
        var loginPath = $"https://google.com";
        await page.GoToAsync(loginPath);
        await page.EmulateMediaTypeAsync(PuppeteerSharp.Media.MediaType.Screen);
        //透過SetViewport控制視窗大小決定抓圖尺寸
        await page.SetViewportAsync(new ViewPortOptions
        {
            Width = 1024,
            Height = 768
        });
 
        var outputFile = $"test.pdf";
        await page.PdfAsync(outputFile, new PdfOptions() { PrintBackground = true, PreferCSSPageSize = true });
 
    }
}

參考

黑暗blog :https://blog.darkthread.net/blog/headless-chrome/

Api說明 : https://www.puppeteersharp.com/api/PuppeteerSharp

[deploy] 遠端發佈 error - 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler”

錯誤訊息 : 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler”

解法 : 發現結果是沒有安裝 .net 4.6, 再安裝即可

1.進windows功能 啟用 .net 4.6

2.管理者權限進入 cmd

32位元：C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i

64位位元：C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe -i


ref :https://www.cnblogs.com/mrma/p/3529859.html