Angular Tutorial - 2 Environment Setup

Angular • Nov 19, 2020

Setting up the local environment and workspace

ඔන්න කලින් කිව්ව විදියටම අපේ Angular Tutorial set එකේ තවත් Tutorial එකක් ගැන කියල දෙන්නයි අද ආවෙ.

මීට සතියකට විතර කලින් Angular කියලා කියන්නෙ මොකක්ද කියලා, Angular ගැන හදුන්වල දෙන්න අරන් ආව ලිපිය කියවල ඒකෙන් Angular ගැන පුංචි අදහසක් ගන්න ඇතී කියල මම හිතනවා.

අද ලිපියෙන් කියන්නෙ කොහොමද අපි අපේ computer එකට Angular install කරලා කොහොමද අපි අපේ workspace එක හදාගන්නෙ කියල.

මේදේට කලින් සදහන්කලයුතු දෙයක් තියෙනවා, ඔයාට Angular වලින් වැඩකරන්න නම් මෙන්න මේ කියන programming languages ගැන මූලික දැනීමක් අවම වශයෙන් තියෙන්න ඕනි.

• JavaScript
• HTML
• CSS

මේ programming language ගැන දැනීමක් තියෙනවා කියන්නෙ ඔයාට Angular වලින් වැඩකරන එක ලොකු දෙයක් නෙවෙයි.

එහෙනම් අපි වැඩේ පටන්ගමු.

Install Nodejs

computer එකට Angular install කරන්න අපි මුලින්ම Node.js කියන open-source cross-platform එක අපේ computer එකේ install කරගන්න අවශ්‍ය වෙනවා. Node.js මීට කලින් ඔයාගෙ computer එකේ install කරල තියෙනවනම් ඒක අවශ්‍ය වෙන්නෙ නැහැ. web browser එකෙන් පිටත Java Script run කරගැනීමේ අවශ්‍යතාවය මත අපේ computer එකේ යොදාගන්න runtime environment එක සදහා අපි Node.js install කරගන්නවා.

Install the Angular CLI

මීලගට අපි අපේ computer එකට Angular library install කරගන්න අවශ්‍යවෙනවා ඒ සදහා අපිට Angular CLI එහෙමත් නැත්නම් Angular command-line interface එක භාවිත කරනවා.

මේ සඳහා මුලින්ම computer එකේ terminal window එක එහෙමත් නැත්තම් අපි කවුරුත් දන්න command prompt එක open කරගන්න ඕනි.

command prompt එක open කලාට පස්සෙ පහත තියෙන code එක run කරන්න.

                            npm install -g @angular/cli

installation එක අවසන් වෙලා මීලගට,

පහත code එක run කරලා ඔයා දැන් install කරගත්ත Angular CLI එකේ විස්තර බලාගන්න පුලුවන්.

                                ng –version

ඉතින්මේ විස්තර වලට අනුව මම දැන් පාවිච්චි කරන්නෙ Angular CLI 10.2.0 කියන version එක.

මේ වෙද්දි අපි අපේ computer එකටAngular install කර අවසානයි.

Create a workspace

දැන් අපි Angular වලින් වැඩකරන්න පටන්ගමු. ඒ සදහා අපිට workspace අවශ්‍ය වෙනවා.

අපේ workspace එක හදාගන්න කලින් කලා වගේම terminal window එකේ ඔයා කැමති location එකක් දීලා පහත තියෙන command එක Run කරන්න ඕනෙ.

                                 ng new my-app

මම මේ කරල තියෙන විදියට ඔයා කැමති location එකක් දීලා terminal window එක Run කරල බලන්න.

එතනදි ඔයාලගෙන් Would you like to add Angular routing? (y/N) කියල ප්‍රශ්නයක් අහනවා
මෙතනදි අහන්නෙ ඔයාගෙ project එකට ඔයා Angular routing භාවිතා කරනවද නැද්ද කියලයි. මේක ඔයාගෙ පලවෙනි නිසා අපි දැනට No (N) දෙමු.

මේ Angular routing ගැන අපි ඉදිරියේදි වෙනම ලිපියක් ගේන්න බලාපොරොත්තු වෙනවා.

Which stylesheet format would you like to use? මීලග පියවරට ගියාම ඔයාගෙන් මේවගේ ප්‍රශ්නයක් අහනව Which stylesheet format would you like to use?
මේ අහන්නෙ ඔයා මේ project එකේදි use කරන style version ගැනයි.

CSS
SCSS
Sass
Less
Stylus

කියන style version වලින් ඔයා පාවිච්චි කරන්න කැමති style version එක තෝරන්න අවශ්‍ය වෙනවා. අපි කවුරුත් දන්න style version එකක් වන CSS මම මෙතනදි තෝරනවා.

මේ තේරීම් කරද්දි Keyboard eke Move ,up and down keys සහ Enter key use කරලා ඔයාලා කැමති style version එකක් තෝරන්න පුලුවන්.

මීලග පියවරට ගියාම ඔයාලට මේ විදියට දැකගන්න ලැබෙයි.

මේ විදියට ඔයාගෙ project එක create වෙලා අවසානයේදී මේ විදියට දැක ගන්න ලැබෙයි. මේ විදියට project එක create වෙන්න මිනිත්තු කීපයක් ගතවෙනවා.

දැන් ඔයා දීපු location එකට ගිහින් බැලුවොතින් ඔයා create කරපු project එක built වෙලා තියෙනවා බලාගන්න පුලුවන්.

මම තෝරපු location එකේ විදියට E drive එකතුල අපේ පලවෙනි project එක තියෙනවා බලාගන්න පුලුවන්

දැන් අපි අපේ first project එක run කරලා බලමු. මේ සදහා අපි අපේ file path එක පෙන්නව url bar එකේ cmd කියන command එක type කරලා Enter key එක press කරන්න.

දැන් ඔයාලට අපේ project එක built වෙලා තියෙන file path එකත් එක්ක terminal window එකක් බලාගන්න පුලුවන්

දැන් අපි අපේ project එක run කරලා බලමු ඒ සදහා අපිට Angular එකෙන්ම provide කරන server එකක්තුල අපේ project කරන්න පුලුවන්.

                              ng serve

ng serve කියන command එක use කරලා ඔයාට ඔයාගෙ project එක run කරගන්න පුලුවන්

http://localhost:4200/ කියන local server එක යටතේ ඔයාට ඔයාගෙ project එක run වෙනවවා බලාගන්න පුලුවන්.

ඉතින් අද අපි කතාකරේ අපේ computer එකට Angular install කරලා කොහොමද අපි අපේ workspace එකහදාගන්නෙ කියලයි.
මීලග ලිපියෙන් අපි Angular workspace එකත් එක්ක වැඩ කරන්නෙ කොහොමද කියල බලමු...