You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add application screenshot (and create the directory to host images for this tutorial). Also, update index.md instructions and complete TODOs/missing content.
PR Closeangular#49980
# Introduction to Angular tutorial - the First Angular app
2
2
3
-
<divclass="callout is-important">
4
-
5
-
<header>This topic is a work in progress</header>
6
-
7
-
This topic is a rough draft. Many sections are incomplete and some or all content might change before its final draft.
8
-
9
-
</div>
10
-
11
3
This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.
12
4
13
5
If you're just starting out with Angular, completing the lessons in sequence provides the best learning experience, because each lesson builds on the previous lessons.
@@ -22,9 +14,9 @@ For the best experience with this tutorial, review these requirements to make su
22
14
23
15
<!-- markdownLint-disable MD001 -->
24
16
25
-
####Your experience
17
+
### Your experience
26
18
27
-
The lessons in this tutorial assume that you have done the following.
19
+
The lessons in this tutorial assume that you have done the following:
28
20
29
21
1.**Created an HTML web page by editing the HTML directly.**
30
22
This tutorial makes references to HTML elements and the Document Object Model (DOM). If these terms are not familiar, review HTML programming before you start this tutorial.
@@ -35,75 +27,69 @@ The lessons in this tutorial assume that you have done the following.
35
27
1.**Used command-line instructions to perform tasks on your computer.**
36
28
Angular uses the Angular CLI to perform many tasks. This tutorial provides the commands to use and assumes that you know how to open the command line tool or terminal interface in which to use them. If you aren't sure how to use a command line tool or terminal interface, review that before starting this tutorial.
37
29
38
-
####Your equipment
30
+
### Your equipment
39
31
40
-
For the best learning experience, do the lessons on your own computer that's running Windows or macOS and connected to the internet.
41
-
You can also work through these lessons on the web without installing any software on your computer, by using the StackBlitz examples linked from each lesson.
32
+
These lessons can be completed by using a local installation of the Angular tools or by using StackBlitz in a web browser. Local Angular development can be completed on Windows, MacOS or Linux based systems.
42
33
43
-
Working on your own computer has the advantage of being able to save your work locally for future reference.
44
-
If you're working on your own computer, the procedure that follows get your computer ready for the tutorial.
45
-
46
-
Working in StackBlitz allows you to work through the lessons without loading any software on your own computer.
47
-
You can save your work in StackBlitz by using your GitHub account.
48
-
To save your StackBlitz lessons, make sure you can access your GitHub account before you start.
34
+
Working on your own computer has the advantage of being able to save your work locally for future reference. Working in StackBlitz allows you to work through the lessons without loading any software on your own computer.
49
35
50
36
## Conceptual preview of your first Angular app
51
37
52
38
The lessons in this tutorial create a simple Angular app that lists houses for rent and show the details of individual houses.
53
39
This app uses features that are common to many Angular apps.
40
+
<sectionclass="lightbox">
41
+
<imgalt="Output of heroes dashboard"src="generated/images/guide/faa/homes-app-landing-page.png">
42
+
</section>
54
43
55
-
\[TODO: add more details and images of the app.\]
56
-
57
-
## Lesson steps
44
+
## Development environment
58
45
59
-
If you are using your own computer for this tutorial, you must install the required software.
46
+
If you plan to complete this tutorial on your local computer, you must install the required software.
60
47
If you have already installed some of the required software, you must verify that it is the correct version.
61
48
62
49
Perform these steps in a command-line tool on the computer you want to use for this tutorial.
63
50
64
-
<divclass="alert is-important">
51
+
<sectionclass="alert is-important">
65
52
66
53
**IMPORTANT:**
67
54
If you plan to use StackBlitz to do the lessons, you can proceed to the first lesson.
68
55
You don't need to install any software.
69
56
70
-
</div>
57
+
</section>
71
58
72
59
### Step 1 - Identify the version of `node.js` that Angular requires
60
+
<sectionclass="alert is-important">
73
61
74
-
\[TODO: describe goal of this step in a sentence. \]
62
+
**IMPORTANT:**
63
+
This step is only required if you have a version of node installed, otherwise, proceed to step 2 below.
75
64
76
-
In the **Terminal** pane of your IDE:
65
+
</section>
77
66
78
-
1. In your project directory, navigate to the `first-app` directory.
79
-
1.\[TODO: describe how to do this in numbered actions.\]
67
+
Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of `node.js`. For information about specific version requirements, see the engines property in the [package.json file](https://unpkg.com/browse/@angular/core@15.1.5/package.json).
80
68
81
-
### Step 2 - Install the correct value of `node.js` for Angular
69
+
From a **Terminal** window:
70
+
1. Run the following command: `node --version`
71
+
1. Confirm that the version number displayed meets the requirements.
82
72
83
-
\[TODO: describe goal of this step in a sentence. \]
73
+
### Step 2 - Install the correct version of `node.js` for Angular
84
74
85
-
In the **Terminal** pane of your IDE:
75
+
If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/)
86
76
87
-
1. In your project directory, navigate to the `first-app` directory.
88
-
1.\[TODO: describe how to do this in numbered actions.\]
89
77
90
78
### Step 3 - Install the latest version of Angular
91
79
92
-
\[TODO: describe goal of this step in a sentence. \]
80
+
With `node.js` and `npm` installed, the next step is to install the [Angular CLI](https://angular.io/cli) which provides tooling for effective Angular development.
93
81
94
-
In the**Terminal**pane of your IDE:
82
+
From a**Terminal**window:
95
83
96
-
1. In your project directory, navigate to the `first-app` directory.
97
-
1.\[TODO: describe how to do this in numbered actions.\]
84
+
1.Run the following command: `npm install -g @angular/cli`
85
+
1.Once the installation completes, the terminal window will display details of the Angular CLI version installed on your local computer.
98
86
99
87
### Step 4 - Install integrated development environment (IDE)
100
88
101
-
\[TODO: describe goal of this step in a sentence. \]
102
-
103
-
In the **Terminal** pane of your IDE:
89
+
You are free to use any tool you prefer to build apps with Angular. We recommend the following:
104
90
105
-
1. In your project directory, navigate to the `first-app` directory.
106
-
1.\[TODO: describe how to do this in numbered actions.\]
91
+
1.[Visual Studio Code](https://code.visualstudio.com/)
92
+
2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
107
93
108
94
## Lesson review
109
95
@@ -117,6 +103,5 @@ In this lesson, you learned about the app that you build in this tutorial and pr
117
103
118
104
For more information about the topics covered in this lesson, visit:
119
105
120
-
*\[TODO: Links to related topic.\]
121
-
*\[TODO: Links to related topic.\]
122
-
*\[TODO: Links to related topic.\]
106
+
*[What is Angular](https://angular.io/guide/what-is-angular)
0 commit comments