Getting Started

Getting Started

Required Software

NodeJS in a current version (we test with the current LTS version)
IDE / Editor - Visual Studio Code (free) or - IntelliJ / WebStorm (commercial)
Angular CLI (npm i -g @angular/cli)
- If installation fails b/c of local firewall settings, you can also work without the CLI.
Nx CLI (npm i -g nx)

If you use IntelliJ / WebStorm: Getting started with IntelliJ / WebStorm

If you use Visual Studio code, you can skip this section.

If you got the starterkit via a zip file, run the following command to link ng to nx:
```
npm run postinstall
```
Remark: In a real world project that is not shared via .zip files, this happens automatically after installing the required dependencies.
After installing the packages try running the starter kit with npm start.

If you do not want to run the project in the IDE, you can also use cmd (under Windows) or bash (Linux and OS X) to open a shell in the root of the project and use npm start.

Note: The development server does not put the required bundles on the disk but only keeps them in the main memory. When you change the source files, it recreates the bundles and then notifies the browser. To serve individual apps run ng serve --project=<appname>
Open it in the browser (http://localhost:4200). You should now see the demo application.

If and only if this port is already taken, you can change adjust it in the project root's package.json file. To do this, add the --port option to the node scripts / start:
```
"scripts": {
    "start": "ng serve --port 4242", [...]
}
```

If you use Visual Studio Code: Getting Started with Visual Studio Code

If you are using IntelliJ/WebStorm, you can skip this section.

Tip: Install the following useful plugins for developing with Angular:

Open the starter kit in Visual Studio Code.
Try running the starter kit with npm start.

Note: The development server does not put the required bundles on the disk but only keeps them in the main memory. When you change the source files, it recreates the bundles and then notifies the browser. To serve individual apps run ng serve --project=<appname>
Open the demo in Chrome (http://localhost:4200)

The port used may differ. You can see it from the console output at startup. If you want to change the port of a project, you can adjust this in the package.json file. To do this, add the --port option to the node scripts/start:
```
"scripts": {
    "start": "ng serve [...] --port 4242", [...]
}
```

If you are offline or behind a very restrictive firewall

To make things easier, the starter kit uses an Web API located at http://www.angular.at/api/flight.

If (and only if) your current environment does not allow to access that API, you can use a local one:

Open a separate console window in the starter kit's root and start the local server using npm run json-server.
Open the file libs\flight-lib\src\lib\services\flight.service.ts and set the field baseUrl to the value http://localhost:3333.
In all exercises we do during the workshop, use http://localhost:3333 instead of http://www.angular.at/api.

Also, append the suffix _like to all url parameters, to get all records just containing the defined value (e. g. from_like instead of from)

Take a closer look at the starter kit

In this part, you will take a closer look at the starter kit to familiarize yourself with it.

Important hint: During all the labs, use CTRL+p in Visual Studio Code to quickly jump to a specific file. You can do the same by pressing SHIFT twice in WebStorm/IntelliJ.

Look at the component in the app.component.ts and app.component.html in the flight-app folder and find out what they do.
Note that the app.component.html has an element <router-outlet></router-outlet>. This is the placeholder for the router.
Have a look at the routing configuration in app.routes.ts.
Look at the module in the app.module.ts file.
In the flight-booking folder, look at the module in the file flight-booking.module.ts and the corresponding route configuration in the file flight-booking.routes.ts.
Look at the component in the files flight-search.component.ts and flight-search.component.html and find out what they do.
Notice how the flight-search.component.ts imports the FlightService. Notice that it comes from a library of the Monorepo project.
Go to the library flight-lib and look at the file flight.service.ts and the file flight.ts.
If you have not already done so, start the development web server:
```
npm start
```
Open the project in the browser.