SDE Internship @JohnsonControls

??DAY 6: DEVELOPMENT

Tasks

Task 1: Setting Up AngularJS on Windows

To build a new angular project

• Step 1: Install Node.js and npm

1. Download Node.js: Download the latest LTS (Long Term Support) version of Node.js for Windows from the Node.js website.
2. Install Node.js and Verify the installation: Run the downloaded installer and after successful installation run the commands on cmd.

node -v
npm -v        

Step 2: Install Angular CLI

1. Install Angular CLI globally and Verify the installation using the below commands. Note: Here, 'g' stands for globally.

npm install -g @angular/cli        

ng version        

Step 3: Create a New Angular Project

1. Create a new project
2. Navigate to your project directory
3. Serve the application

ng new [proj_name]        

cd proj_name        

ng serve        

Open a web browser and navigate to https://localhost:4200/ to see your new Angular application running.

Task 2: Setting Up AngularJS on Ubuntu

To install NVM and Node.js on Ubuntu 22.4

• Step 1: Update Package Repository

sudo apt-get update        

• Step 2: Install Prerequisites

sudo apt install curl        

• Step 3: Download and Install NVM on Ubuntu

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash        

• Step 4: Verify NVM Installation on Ubuntu

nvm --version        

• Step 5: Install Node.js Using NVM

??This command will download and install the latest LTS version of Node.js available.

nvm install --lts        

??Note: To install particular version of NodeJS, change the version number after 'v' in the command below.

nvm install v<version>        

Example:
nvm install v18.20.3        

• Step 6: Switch Between Node.js Versions

This command will display a list of installed Node.js versions, indicating which version is currently active.

nvm ls        

To switch to a specific Node.js version, you can use the following command:

nvm use <version>        

Extra Tips:

To change the set default version of Node.js, use

nvm alias default <version>        

Example:
nvm alias default 18.20.3        

To install Angular CLI

• For latest version

npm install -g @angular/cli         

• For a particular version

npm install -g @angular/cli@<version>        

Note: Example 1, installs the latest versions in 18, whereas example 2 installs the version in particular, ie. 18.0.4

Example 1:
npm install -g @angular/cli@18        

Example 2:
npm install -g @angular/[email protected]        

Task 3: Understanding HTML & CSS | Understanding <div>

Create the below webpage template

• Open the project in VS Code.
• Go to src >> app >> app.component.css & app.component.html files.
• Use these files to write your code.

Task 4: Understanding 'components'

Break the above sections in the above webpage into separate components.

• Requirements: The components include header, block1 (b1s1 and b1s2 together), block2, b2s1, b2s2 and b2s3.
• Copy paste the necessary components HTML and CSS codes into respective components' HTML and CSS files.
• Replace the code blocks of the following components in app.components.html file, by tags with the respective 'selector' name present in the components' TS file.
• Import necessary 'class' of the components in the TS files.

Questions:

How to install the necessary node modules if they are missing in the Angular Project?

Once, we have all the dependencies already mentioned in the 'packages.json' file. We have to simply open the terminal and write the below command.

npm install        

Note: This step is very crucial when we clone a repo as the necessary node modules will be initially missing.

Shortcuts:

To open any folder in cmd on Windows

• Simply type cmd in the File path and press ENTER.
• For example, you want to open Downloads folder in cmd.

To open any project folder in VS Code

• First, open the project folder in cmd or terminal.
• Then type the command

code .        

Learning Modules:

HTML, CSS, TS, NodeJS, AngularJS, Windows Shortcuts