Angular 4 Hello World via Quickstart by oliverveits

Preparation: Start Container and install GIT and NPM

Install via quickstart (requires low memory)

Step 1: Start CentOS Container

docker run -it -p 8080:3000 centos bash or skip Step 1 and 2 for starting with a Docker image

Step 2: Install Git and NPM

On the container we install git and npm from the EPEL release:

yum install -y epel-release git npm

npm -v

The version should be 3 or larger.

NPM: Resolve Dependencies

Step 3: Clone Quickstart Template

Clone the Quickstart Template: git clone https://github.com/angular/quickstart; cd quickstart

Step 4: Install packages via NPM:

npm i

The warnings can be ignored.

Start and connect to Service via Browser

Step 5: Start Service:

npm start &

####�Step 6: Load Dashboard

You can load the angular application on the dashboard or via the following URL https://[[HOST_SUBDOMAIN]]-8080-[[KATACODA_HOST]].environments.katacoda.com/ or by clicking the dashboard tab on the right (note: sometimes, you need to wait a few seconds and press "display port" at this point).

Hello Angular

Demonstrate binding between model and view

Step 7 Change Component

With following example, we can see that a change in a file is detected immediately and the Appliction is changed accordingly:

sed -r -i 's/Angular/World/g' src/app/app.component.ts

Hello World

In the Dashboard or the Browser, where you have opened the Client, "Hello Angular" is automatically exchanged by "Hello World". There is no need to reload the browser manually. You just need to wait for some seconds, depending on your Internet speed.

To toggle back and to 'Hello Anglar', you can issue the command sed -r -i 's/World/Angular/g' src/app/app.component.ts

cd <directory>	Change directory
ls	List directory
echo 'contents' > <file>	Write contents to a file
cat <file>	Output contents of file

i	In Command Mode	Change into Insert Mode, you can now insert and edit text in the file
esc	In Insert Mode	Change into Command Mode, you can now execute commands
:wq	In Command Mode	Save and Exit

Welcome!

Angular 4 Hello World via Quickstart

Congratulations!

You've completed the scenario!

Scenario Rating

Steps