Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c9e167b

Browse files
ZackDeRoseZackDeRose
authored
feat(docs): Adding videos for Angular tutorials (#3787)
1 parent e50b2c2 commit c9e167b

11 files changed

+44
-0
lines changed

‎docs/angular/tutorial/01-create-application.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 1: Create Application
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
In this tutorial you will use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest.
48

59
## Create a New Workspace

‎docs/angular/tutorial/02-add-e2e-test.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 2: Add E2E Tests
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
By default, Nx uses [Cypress](/{{framework}}/plugins/cypress/overview) to run E2E tests.
48

59
**Open `apps/todos-e2e/src/support/app.po.ts`.** It's a page object file that contains helpers for querying the page.

‎docs/angular/tutorial/03-display-todos.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 3: Display Todos
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlKAwGXmpac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
Great! You have a failing E2E test. Now you can make it pass!
48

59
The best way to work with Cypress is to keep the failing E2E test running while working on the app. This helps you see the progress you are making.

‎docs/angular/tutorial/04-connect-to-api.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 4: Connect to an API
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/digMpZzPtg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.
48

59
**Open `apps/todos/src/app/app.module.ts` to import `HttpClientModule`.**

‎docs/angular/tutorial/05-add-node-app.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 5: Add Node Application Implementing API
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/SsCx2WErVTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
The requests fail because the API has not been created yet. Using Nx you can develop node applications next to your Angular applications. You can use same commands to run and test them. You can share code between the backend and the frontend. Use this capability to implement the API service.
48

59
## Add NestJS Plugin to Your Workspace

‎docs/angular/tutorial/06-proxy.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 6: Proxy
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/7d6jDAbmVnE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
You passed `--frontendProject=todos` when creating the node application. What did that argument do?
48

59
It created a proxy configuration that allows the Angular application to talk to the API in development.

‎docs/angular/tutorial/07-share-code.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 7: Share Code
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/icyOSQ6gAm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library.
48

59
**Run the following generator to create a library:**

‎docs/angular/tutorial/08-create-libs.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 8: Create Libs
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/szaH7fNw0zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API.
48

59
## Public API

‎docs/angular/tutorial/09-dep-graph.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 9: Dep Graph
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it can be difficult to understand how they depend on each other and the implications of making a particular change.
48

59
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.

‎docs/angular/tutorial/10-computation-caching.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Step 10: Computation Caching
22

3+
## Video of this Lesson
4+
5+
<iframe width="560" height="315" src="https://www.youtube.com/embed/HX3--ilBhBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
6+
37
Nx has built-in computation caching, which helps drastically improve the performance of the commands.
48

59
**To see it in action, run `nx build todos`:**

0 commit comments

Comments
 (0)