Angular {{Interpolation}}(內嵌繫結)(05)

html部分

 <a href="{{url}}">{{ title }}</a>

ts部分

 export class InterpolationComponent implements OnInit {
  title = "{{內嵌繫結}}";
  url = "http://tw.yahoo.com";
  constructor() {   
  }
  ngOnInit(): void {
  }
}

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular 如何建立component(04)

Angular每一個畫面都是多個component所組成
以下會記錄如何新增component
1.首先先輸入

ctrl + `(單引號，通常在1的左邊tab上面)

2.按＋號新增終端機，預設可能是power shell，選擇終端機資料夾預設應該會在目前的專案上
3.建立component

ng generate component pages
ng generate 建立一個 簡寫 g component 哪一種範本 簡寫 cpages 頁面名稱 

未來請輸入方式如下列
ng g c pages

ng g -h 可看目前版本所有可建立的範本

4.建立起來後，會多一個資料夾及有四個檔案，然後app.module.ts 會異動

CREATE src/app/pages/pages.component.html (24 bytes) <-Html
CREATE src/app/pages/pages.component.spec.ts (621 bytes) <-測試檔
CREATE src/app/pages/pages.component.ts (265 bytes) <-程式
CREATE src/app/pages/pages.component.css (0 bytes) <-css

UPDATE src/app/app.module.ts (392 bytes) 修改了declarations
及import { PagesComponent } from './pages/pages.component';

5.如何顯示這個頁面？
找到剛新增的pages.component.ts
裡面有一個 selector: 'app-pages'
只要將app-pages加入在app.component.html即可顯示出剛剛的頁面

<app-pages></app-pages>

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular 啟動順序(03)

AngularJs只需在前端宣告ng標籤即可運行
但到了Angular的話完全不同
這次框架有自己個一個流程
所有的程式碼及html都有固定的放法
這樣程式在跑的時候才會正常運行
前篇文章所提到的方法啟動server

npm start

以下是已專案預設的程式跑起來的順序
1.進入網頁index.html
2.main.ts開始載入import
3.啟動AppModule
4.執行AppComponent元件
5.執行AppComponent class
6.執行AppComponent templateUrl
7.執行AppComponent style
8.載入完成呈現畫面
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular 新增專案+開發環境設定+常用快速鍵(02)

由於使用Visual Studio Code跟之前使用Visual Studio有點不太一樣
在Visual Studio圖形界面化的方式可新增專案很方便
Visual Studio Code中可能需要打些指令來新增在此筆記一下
1.cmd
2.建立一個資料夾來放專案用，因有些公司可能在C：無法執行所以此次在D：建立一個projects資料夾，使用Angular Cli來建立Angular的專案（請使用英文或數字命名）

cd\
d:
md projects
cd projects
ng new firstapp

3.測試是否有建置成功，至剛新增的資料夾使用npm

cd firstapp
npm start

4.開啟瀏覽器看看網站是否有成功，有跑起來會有Welcome to app!

http://localhost:4200/

5.如何發佈

一般
ng build
加參數--prod
ng build --prod
壓縮整的專案js變小

===============================================================
A.如何改變npm的Port

找到package.json
"start": "ng serve"
改
"start": "ng serve --port 8080"

B.如何關閉npm Server

ctrl + c
y

C.開啟VS Code，在專案下輸入

code .

D.如果Angular版本更新了要如何升級

專案目錄下
ng update

會出現以下表示升級完成

 We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       1.2.3 -> 6.0.2           ng update @angular/cli
      @angular/core                      4.4.7 -> 6.0.2           ng update @angular/core
      rxjs                               5.5.10 -> 6.1.0          ng update rxjs


    There might be additional packages that are outdated.
    Or run ng update --all to try to update all at the same time.

E.以述為單一專案升級，升級Global Agnular Cli版本方式

看目前版本
 npm list -g --depth=0
檢查最新版本
npm outdated -g
沒出現文字為目前最新版
有出現代表有新版
Package       Current  Wanted  Latest  Location
@angular/cli    6.0.1   6.0.3   6.0.3
若有新版可執行下列安裝最新版
npm install -g @angular/cli

===============================================================
1.格式化文件

shift + alt + f

2.ts html 快速切換

alt + o

3.註解

ctrl + /

===============================================================
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular 安裝開發環境For Windows(01)

之前寫過AngularJs目前，改成Angular還尚未寫過完整專案藉由此次機會，從開始使自己筆記一下
此次會使用到多次的命令提示字元，均請使用管理者Administrator開啟，之後都使用cmd代替
1.首先安裝Node JS套件管理工具
2.安裝Visual Studio Code開發工具
3.cmd(記得使用administrator開啟)，看版本

npm -v
node -v

4.安裝angular cli開啟命令提示字元

npm install -g @angular/cli 
ng -v

如有安裝錯誤可輸入依序

npm uninstall -g angular-cli 
npm uninstall -g @angular/cli 
npm cache clean 
npm install -g @angular/cli 

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Asp.net MVC 上傳圖片自動轉正(23)

最近常有同事說上傳到網頁圖片就會自動的90度旋轉
後來想到有一個名詞上網找了一下
可交換圖檔格式常被簡稱為Exif（Exchangeable image file format）
裡面有個選項是圖像方向於是找了發現非標準
想說是否能抓取EXif取得圖片轉的方向然後將圖片轉回來
很幸運的網路已經有人寫過將之修改

                if (file != null && file.Count() > 0)
                {
                    foreach (var item in file)
                    {
                        if (item != null)
                        {                            
                            //轉成圖片                           
                            System.Drawing.Image img = System.Drawing.Image.FromStream(item.InputStream);
                            //取得旋轉度數
                            foreach (var prop in img.PropertyItems)
                            {
                                if (prop.Id == 0x0112) //value of EXIF
                                {
                                    int orientationValue = img.GetPropertyItem(prop.Id).Value[0];
                                    RotateFlipType rotateFlipType = GetOrientationToFlipType(orientationValue);//取得轉的度數
                                    img.RotateFlip(rotateFlipType);//依度數轉成正的
                                    break;
                                }
                            }

                            //處理圖片 轉二進位 或存到路徑上
                            //byte[] byteImage = imageToByteArray(img);//轉二進位
                            //img.Save.....
                        }
                    }
                }


  public static  RotateFlipType GetOrientationToFlipType(int orientationValue)
        {
            RotateFlipType rotateFlipType = RotateFlipType.RotateNoneFlipNone;

            switch (orientationValue)
            {
                case 1:
                    rotateFlipType = RotateFlipType.RotateNoneFlipNone;
                    break;
                case 2:
                    rotateFlipType = RotateFlipType.RotateNoneFlipX;
                    break;
                case 3:
                    rotateFlipType = RotateFlipType.Rotate180FlipNone;
                    break;
                case 4:
                    rotateFlipType = RotateFlipType.Rotate180FlipX;
                    break;
                case 5:
                    rotateFlipType = RotateFlipType.Rotate90FlipX;
                    break;
                case 6:
                    rotateFlipType = RotateFlipType.Rotate90FlipNone;
                    break;
                case 7:
                    rotateFlipType = RotateFlipType.Rotate270FlipX;
                    break;
                case 8:
                    rotateFlipType = RotateFlipType.Rotate270FlipNone;
                    break;
                default:
                    rotateFlipType = RotateFlipType.RotateNoneFlipNone;
                    break;
            }

            return rotateFlipType;
        }

參考來源
EXIF
Reset Image Orientation using EXIF in C#

Windows Win10安裝SqlServer2012錯誤碼0x800F081F

近期將win7換成win10
所以電腦都已重新安裝方式
於是遇到一些問題
在win10下安裝SqlServer2012時需要.net3.5 sp1可使用
1.下載獨立安裝
2.控制台 > 新增移除程式 > 開啟windows功能 > .net...
但以上方法都會出現問題
錯誤碼:0x800F081F，微軟在文章中已有提到問題原因
解決方法
命令提示字元(管理者權限)
DISM /Online /Enable-Feature /FeatureName:NetFx3 /All /LimitAccess /Source:光碟代號:\sources\sxs
參考來源
.NET Framework 3.5 安裝錯誤：0x800F0906、0x800F081F、0x800F0907
無法安裝.Net Framework 3.5問題(錯誤碼: 0x800f081f)

IIS Nas+IIS虛擬目錄

因時代改變由圖片變成了影片需要更大的空間，
但總覺得產品也變的比較容易壞
所以由之前的D槽變成了Nas
由IIS連上Nas的方法提供一個給遇到的人或給未來的自己
1.建立網站目錄
2.新增虛擬目錄
3.輸入"別名"
4.在"實體路徑"部份要輸入UNC 例:\\192.168.0.2\\myvideo(當然Nas上要先建好這資料夾)
5.連線身份輸入可登入Nas myvideo 資料夾的帳號密碼
參考來源
IIS站點/虛擬目錄中訪問共享目錄(UNC)

Azure 設定相關文章及安裝軟體

Azure Virtual Machine Server 2012 安裝設定及中文化

Asp.net MVC 設定圖片路徑(22)

也許有些美編會將大圖或背景寫在Css裡
但萬一使用者有需要異動資料夾或是由資料庫撈時就沒辦法
所以如果有需求時會拿到html裡如下

<div id="status" style="background-image: url(image/123.gif)"></div>

如果需要做可以動態改變時怎麼辦
網路做法有一堆
自己想到一個做法

<div id="status" style="background-image: url(@Url.Action("Index" , "images")/status.gif)"></div>  

使用@Url.Action來產生連結這樣就可做多種變化

分層式架購相關文章

以下不錯文章記錄
Repository，我可能不會用你
Repository，我可能不會用你 (2) - 範例
應用程式的分層設計 (1) - 入門範例
應用程式的分層設計 (2) - 一點改進
博客园的大牛们，被你们害惨了，Entity Framework从来都不需要去写Repository设计模式

---

mrkt文章可一步一步學習
ASP.NET MVC 專案分層架構 Part.1 初學者的起手式
ASP.NET MVC 專案分層架構 Part.2 抽出 Repository 裡相同的部份
ASP.NET MVC 專案分層架構 Part.3 - 個別 Repository 的資料存取操作
ASP.NET MVC 專案分層架構 Part.4 - 抽出 Model 層並建立為類別庫專案
ASP.NET MVC 專案分層架構 Part.5 - 建立 Service 層
ASP.NET MVC 專案分層架構 Part.6 - DI/IoC 使用 Unity.MVC
ASP.NET MVC 專案分層架構 - 建議與補充說明

---

加上 Unit of Work，抽離Entity Framework的依賴就完美了

Asp.net MVC MvcReportViewer

網路上看到的先跟大家分享，有空再實作看看
ASP.NET MVC Html Helpers for ReportViewer Control

未分類 TypeScript教學手冊

好東西跟大家分享
TypeScript教學手冊

c# WinForm鍵盤對應畫面輸入例如小鍵盤

這功能應該網路上都找的到
因為比較少寫winform所以自己記錄一下
1.首先winform 建構式時要設定

this.KeyPreview = true;

2.覆寫Form.ProcessCmdKey大致上這樣就可以了

  protected override bool ProcessCmdKey(ref Message msg, Keys keyData)
        {
            switch (keyData)
            {
                case Keys.NumPad1:
                case Keys.D1:

                     //按下1或鍵盤1時處理      
                     return true; 
                case Keys.Enter:

                    //按下Enter時處理                  
                    return true; 
                case Keys.Escape:

                    //按下Esc時處理
                    return true;
            }

            return base.ProcessCmdKey(ref msg, keyData);

        }

參考來源
Form.ProcessCmdKey 方法 (Message, Keys)
c# - 在 WinForm 中讓 Enter 鍵變成 Tab 鍵

Asp.net 項目'connectionstring' 已加入

這個錯誤是第一次遇到，自己記錄一下
情況:
掛在他專案下的應用程式、都有連資料庫、 跟其他專案的應用程式設定的連現字串name一樣
就會出現這種問題
解法

1.把連線字串名稱改掉
2.<remove name="ConnectionString" />

參考來源
http://zhidao.baidu.com/question/156580753.html

Asp.net MVC NuGet 常安裝的(21)

在寫新專案時比較方便加入

.Net Framework
Install-Package Autofac.Mvc5 -Version 4.0.2 
Install-Package bootstrap -Version 3.3.7
Install-Package EntityFramework -Version 6.2.0
Install-Package EntityFramework.zh-Hant -Version 6.2.0 
Install-Package Fancybox -Version 2.1.5
Install-Package jQuery -Version 1.12.4
Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.5
Install-Package Newtonsoft.Json -Version 7.0.1 
Install-Package NPOI -Version 2.4.0 
Install-Package PagedList.Mvc -Version 4.5.0 
Install-Package System.Linq.Dynamic -Version 1.0.7 
Install-Package Microsoft.AspNet.Mvc -Version 5.2.7

.Net Core(2020-11-13)
Model
Install-Package FluentValidation.AspNetCore
Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 3.1.21
Install-Package Microsoft.EntityFrameworkCore.SqlServer.Design
Install-Package Microsoft.EntityFrameworkCore.Tools -Version 3.1.21
Service
Install-Package Dapper
Install-Package Microsoft.AspNetCore.Mvc.Core
Install-Package NPOI -Version 2.5.2
Web
Install-Package X.PagedList.Mvc.Core

libman.json(2020-11-13)

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [   
    {
      "provider": "unpkg",
      "library": "@microsoft/signalr@3.1.4",
      "destination": "wwwroot/microsoft/signalr/"
    },
     {
      "library": "fancybox@3.5.7",
      "destination": "wwwroot/lib/fancybox/"
    },
    {
      "library": "jquery@3.5.1",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap@4.5.3",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "library": "bootstrap-datepicker@1.9.0",
      "destination": "wwwroot/lib/bootstrap-datepicker/"
    }
  ]
}

IIS 解決asp.net第一次啟動時慢

話題應該有很多人寫過了
本篇讓自己記錄一下
下次架設機器時可用
1.先下載Application Initialization Module for IIS 7.5安裝
2.再下載Application Initialization UI for IIS 7.5安裝
3.進入IIS設定AlwaysRunning
參考網址
Application Initialization Module for IIS 7.5
Application Initialization UI for IIS 7.5

Asp.net MVC Bootstrap submit confirm Button loading(20)

有時在批次執行一些動作時會持續很久
要怎麼讓按紐變成Loading讓使用者不會重複按

@using (Ajax.BeginForm("action", "controller", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnBegin = "OnBegin" }))
{
 
}

寫兩個function OnBegin OnSuccess
一個是在執行submit前一個在後
加上confirm讓使用者有感

        var btn = $('#MultipleCreate');

        function OnBegin() {
            if (!confirm('確定批次新增嗎??')) return false;
            btn.button('loading');
        }

        function OnSuccess(response) {
            btn.button('reset');
            alert('完成');           
        }

jQuery 好用的Select Box

個人覺得比jquery ui 的combobox好用的Select2

T-SQL 取得identity資訊

目前想試寫一個排程同步的軟體
預到的第一步就是identity問題
找了一下網路如可簡單組出已下

select 
IDENT_SEED('table_name') as 起始值,
IDENT_INCR('table_name') as 每次增值, 
IDENT_CURRENT('table_name') as 目前最大值  

重置indentity

dbcc checkident('table_name', RESEED, 100) 

Insert後取得indentity

Select @@Identity

參考來源
請問要去那個資料表查出自動編號 IDENTITY (x,y ) 的起始值(x)及增量
SQL Server的Identity字段使用/复制/重设
Usage of IDENT_INCR and IDENT_SEED function of Identity column in sql server