In this workshop, we develop an Angular Renaissance application (Angular 17+ until today) from scratch, introducing the fundamental concepts of Angular 17+ development, tailored for developers who have never built web applications with Angular before.
- Git
- Node.js and NPM – we recommend using NVM (Linux/Mac) or NVM-Windows (Windows)
- Install Angular CLI via
npm i -g @angular/cli
Refer to the official Angular installation documentation.
In summary, to install Angular CLI, execute the following command:
npm install -g @angular/cligit clone [email protected]:puntotech/angular-renaissance-fundamentals-workshop.gitcd angular-renaissance-fundamentals-workshopnpm inpm start
The npm start script invokes the serve:all command, which runs the serve:api and serve:web commands concurrently. Of course, you can invoke each command separately if necessary.
"start": "npm run serve:all",
"serve:web": "ng serve --port 4200 --open",
"serve:api": "npm --prefix <path> run <command>",
"serve:all": "concurrently \"npm run serve:api\" \"npm run serve:web\"",The web application will open in http://localhost:4200 in your browser.
The API will be available at http://localhost:9001/ starting from the 06.01-http branch.
The repository is organized into numbered branches (01, 02, 03, ...), which represent the steps to follow in the workshop. The first step is branch 01, followed by 02, and so on.
Each branch has a specific name defining the concept presented in that branch. The README files in these branches describe the Angular concept and include a challenge to solidify understanding.
Finally, branches containing the solution to the challenges have the -solved suffix.
For example, the first concept is found in the branch 01.01-single-component, and its solution is in 01.01-single-component-solved.
The workshop requires a backend to provide data to the frontend application. A Node.js backend is provided in the api directory. The API uses in-memory data storage, so data is reset each time the backend restarts.
To run the API independently, follow these steps:
cd apinpm inpm start:dev
Alternatively, if you run the npm start script, the API will start concurrently with the Angular web application.
The available branches are as follows: