วิธีการใช้ Node.js และ Git เพื่อทำการติดตั้ง bower, typescript, tsd และใช้ bower ติดตั้ง bootstrap, AngularJS
ขั้นตอนการติดตั้งจะต้องติดตั้ง Node.js ก่อนเพื่อใช้คำสั่ง npm ติดตั้ง bower หลังจากนั้นติดตั้ง Git เพื่อให้สามารถใช้งาน bower ติดตั้งไฟล์ลงใน path ที่ต้องการได้ หลังจากนั้นใช้คำสั่ง bower เพื่อติดตั้ง bootstarp,AngularJS ลง Proejct ได้
STEP 1 จะต้องติดตั้ง node.js ก่อน เพราะจะต้องใช้คำสั่ง npm เพื่อทำการติดตั้ง bower, typescript, tsd ฯลฯ
1) ติดตั้ง node.js จากเว็บ https://nodejs.org/en/
หลังจากนั้นให้ทำการ install Node.js ตั้วล่าสุดลงไป
2) เมื่อลง Node.js ให้เปิด CMD ขึ้นมาเพื่อทำการสั่งให้ Node.js ทำการ install package ที่ต้องการใช้งานดังนี้
ติดตั้ง bower ใช้คำสั่ง npm install -g bower
ติดตั้ง typescript (ไม่ใช้ก็ได้) ใช้คำสั่ง npm install -g typescript
ติดตั้ง tsd ใช้คำสั่ง npm install -g tsd
STEP 2 ติดตั้ง Git โดยเข้าไปโหลดตัวติดตั้งได้ที่ https://git-scm.com/ หลังจากนั้นให้ install
หลังจากนั้นให้กด next ไปเรื่อยๆ
หลังจากนั้นให้กด next ไปเรื่อยๆ จนพบหน้า Adjust PATH environment
ในหัวข้อ Configuring the line ending conversion
ในหัวข้อ Configuring the terminal emulator to use with Git Bash
STEP 3 หลังจากนั้นเราจะใช้ bower สำหรับ install bootstrap และ AngularJS ลงใน folder project ของเรา
อันดับแรกให้สร้าง folder project ขี้นมาก่อนให้เปิด visual studio -> new project asp.net empty และกำหนดชื่อ project แล้วกด ok จะได้โปรเจ็คดังภาพด้านล่าง และต้องใช้ part สำหรับติดตั้ง bootstrap กับ AngularJS
เปิด CMD ขึ้นมาแล้วพิมพ์ bower install bootstrap AngularJS ลงไป
หลังจากนั้น bower จะทำการลงไฟล์ที่ต้องการใช้ในโปรเจ็คของเราตาม path ที่ประกาศไว้
ionic ถ้า error update หรือ install version ใหม่ไม่ได้
ionic ถ้า error update หรือ install version ใหม่ไม่ได้ ให้พิมพ์ sudo npm cache clean.
AngularJS Filter
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
myApp.controller('DashBoardController', ['$scope', function($scope) { $scope.profiles = [{ id: '1', firstname: 'ณเดชน์', lastname: 'คูกิมิยะ', nickname: 'ณเดชน์' }, { id: '2', firstname: 'เจษฎาภรณ์', lastname: 'ผลดี', nickname: 'ติ๊ก' }, { id: '3', firstname: 'สุธีวัน', lastname: 'ทวีสิน', nickname: 'ใบเตย' }, { id: '4', firstname: 'อุรัสยา', lastname: 'เสปอร์บันด์', nickname: 'ญาญ่า' }, { id: '5', firstname: 'พัชราภา', lastname: 'ไชยเชื้อ', nickname: 'อั้ม' }]; }]); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dara Ha-He by Nextflow</title> <script src="js/libs/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/controllers/DashboardController.js"></script> </head> <body ng-app="myApp"> <h1>Dara Ha-He</h1> <div ng-controller="DashBoardController"> <label>ค้นหา: </label> <!-- Create input search here --> <input type="text" ng-model="keyword"> <!-- Add filter with search query --> <ul> <li ng-repeat="profile in profiles | filter:keyword"> {{profile.nickname}} {{profile.lastname}} ({{profile.nickname}}) </li> </ul> <hr> </div> </body> </html> |
LINQ Query Simple Join
1 2 3 4 5 6 7 |
var q2=from p in db.Products join c in db.Categorys and p.CategorysId equal c.CategorysId where p.ProductId=3 Select p; // = กับ Equal ไม่เหมือนกัน |
MVC 5 Keyboard Short cut
Ctrl+m+g ไปกลับ control และ view ได้
ctrl+shift+b เป็นการ build code
Ctrl+k+c,Ctrl+k+u = block comment / unblock comment
กด alt+ลูกษรขึ้นลงย้ายโค้ดได้
พิมพ์ prop กด tab tab จะสร้าง properties
1 |
public decimal[] Acceptablecoin { get; set; } |
พิมพ์ ctor กด tab tab เป็นการสร้าง constructor จะถูกทำงานอัตโนมัติ
1 2 3 4 |
public Machine() { } |
@forr click tab tab = for reword
1 2 3 4 |
@for (int i = length - 1; i >= 0 ; i--) { } |
กด Ctrl+k+d เป็นการจัดไลน์โค้ด
การเรียกใช้ Script จากเพจลูกมาแสดงใน Page Layout
กดไปยังโค้ดที่ต้องการจากการใช้ go to definition
ถ้าใช้ bootstarp css pull-right or pull-left จะต้อง clearfix ด้วย
การใช้ Asure สำหรับสร้าง HTML Tag แบบ Inteligent โดยถ้าสร้าง table สามารถพิมพ์
table>tr>td*5 กด Tab 2 ครั้ง จะได้
1 2 3 4 5 6 7 8 9 |
<table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> |
ถ้าจะใส่คลาสจะให้พิมพ์
table.table>tr>td*5 กด Tab 2 ครั้ง
1 2 3 4 5 6 7 8 9 |
<table class="table"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> |
การสร้างปุ่ม Link โดยใช้ @Html.ActionLink เมื่อต้องการประกาศให้มันใช้ html attribute class จะได้ดังภาพด้านล่าง
การใช้ code MVC สร้าง Form และ Element ต่างๆ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@using (Html.BeginForm()) { <div> Name:<br /> @Html.TextBox("Name") </div> <div> Price:<br /> @Html.TextBox("Price") </div> <div> Image Url: <br /> @Html.TextBox("ImageUrl") </div> <div> @Html.CheckBox("IsFeatured") Is featured product? </div> <div> <button class="btn btn-success"> Add </button> </div> } |
Recent Comments