`,
+ // #enddocregion
styleUrls: ['./app.component.css'],
})
export class AppComponent {
+ // #docregion app-comp-title
title = 'homes';
+ // #enddocregion
}
diff --git a/aio/content/examples/first-app-lesson-01/src/index.html b/aio/content/examples/first-app-lesson-01/src/index.html
index a3d07306714..de842ac9db3 100644
--- a/aio/content/examples/first-app-lesson-01/src/index.html
+++ b/aio/content/examples/first-app-lesson-01/src/index.html
@@ -2,7 +2,9 @@
+
Homes
+
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index b160e010afc..c904f826e38 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -842,6 +842,11 @@
"url": "tutorial/first-app",
"title": "Introduction",
"tooltip": "Introduction to the first Angular app and tutorial"
+ },
+ {
+ "url": "tutorial/first-app/first-app-lesson-01",
+ "title": "Hello world",
+ "tooltip": "Start coding in Angular with Hello World"
}
]
},
diff --git a/aio/content/tutorial/first-app/first-app-lesson-01.md b/aio/content/tutorial/first-app/first-app-lesson-01.md
new file mode 100644
index 00000000000..754ace14134
--- /dev/null
+++ b/aio/content/tutorial/first-app/first-app-lesson-01.md
@@ -0,0 +1,153 @@
+# First Angular app lesson 1 - Hello world
+
+
+
+This topic is a work in progress
+
+This topic is a rough draft. Many sections are incomplete and some or all content might change before its final draft.
+
+
+
+
+
+This tutorial lesson demonstrates how to create a *Hello world* app in Angular.
+
+A *Hello world* app is a simple app that demonstrates the basic elements of an Angular app.
+This *Hello world* app serves as the starting point from which each lesson in this tutorial adds new features to build a complete Angular app.
+
+**Time required:** expect to spend about 15 minutes to complete this lesson.
+
+## Before you start
+
+This lesson starts from a default app, so you can:
+
+* Start with the code example for the beginning of this lesson. Choose from the to:
+ * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE.
+ * Use the *download example* and unzip it into a directory named: `first-app`. Open that directory in your IDE.
+
+If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson.
+
+If you have any trouble during this lesson, you can review the completed code for this lesson, in the for this lesson.
+
+## After you finish
+
+* The *Hello world* you have after this lesson lets you know that you and your IDE are ready to begin creating an Angular app.
+
+## Conceptual preview of creating a new Angular app
+
+The Angular app that this tutorial creates is a *standalone* app.
+Until recently, Angular apps required `ngModules` to organize and manage their components and other resources.
+A standalone app is a new type of Angular app that doesn't use `ngModules`, which reduces the complexity of the app.
+
+The differences between these two types of Angular apps are not important to know at this point in your journey to learn Angular.
+What's important to know is just that they exist.
+
+## Lesson steps
+
+Perform these steps on the app code in your IDE.
+
+### Step 1 - Test the default app
+
+In this step, after you download the default starting app, you build the default Angular app.
+This confirms that your development environment has what you need to continue the tutorial.
+
+In the **Terminal** pane of your IDE:
+
+1. In your project directory, navigate to the `first-app` directory.
+1. Run this command to build and serve the default app.
+
+
+
+ ng serve
+
+
+
+ The app should build without errors.
+ Correct any errors reported by the command before proceeding.
+
+1. In a web browser on your development computer, open `http://localhost:4200`.
+1. Confirm that the default web site appears in the browser.
+1. Correct any errors before you continue to the next step.
+1. You can leave `ng serve` running for as you complete the next steps.
+
+### Step 2 - Review the files in the default app
+
+In this step, you get to know the files that make up the default Angular app.
+
+In the **Explorer** pane of your IDE:
+
+1. In your project directory, navigate to the `first-app` directory.
+1. Open the `src` directory to see these files.
+ 1. In the file explorer, find the Angular app files (`/src`).
+ 1. `index.html` is the app's top level HTML template.
+ 1. `style.css` is the app's top level style sheet.
+ 1. `main.ts` is where the app start running.
+ 1. `favicon.ico` is the app's icon, just as you would find in web site.
+ 1. In the file explorer, find the Angular app's component files (`/app`).
+ 1. `app.component.ts` is the source file that describes the `app-root` component.
+ This is the top-level Angular component in the app.
+ The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.
+ In this app, the styles are in a separate file while the component's code and HTML template are in this file.
+ 1. `app.component.css` is the style sheet for this component.
+ 1. New components are added to this directory.
+ 1. In the file explorer, find the image directory (`/assets`) contains images used by the app.
+ 1. In the file explorer, find the support files are files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.
+ 1. `.angular` has files required to build the Angular app.
+ 1. `.e2e` has files used to test the app.
+ 1. `.node_modules` has the node.js packages that the app uses.
+ 1. `angular.json` describes the Angular app to the app building tools.
+ 1. `package.json` is used by `npm` (the node package manager) to run the finished app.
+ 1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler.
+
+After you have reviewed the files that make up an Angular app project, continue to the next step.
+
+### Step 3 - Create `Hello World`
+
+In this step, you change the Angular project files to create a Hello World app in Angular.
+
+In the **Edit** pane of your IDE:
+
+1. In the `first-app` directory, in the `src` directory, open `index.html`.
+1. In `index.html`, replace the `` element with this code to update the title of the app.
+
+ <code-example header="Replace in src/index.html" path="first-app-lesson-01/src/index.html" region="app-title"></code-example>
+
+ Then, save the changes you just made to `index.html`.
+
+1. Navigate to the `src` directory and open `app.component.ts`.
+1. In `app.component.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.
+
+ <code-example header="Replace in src/app/app.component.ts" path="first-app-lesson-01/src/app/app.component.ts" region="app-comp-template"></code-example>
+
+1. In `app.component.ts`, in the `AppComponent` class definition, replace the `title` line with this code to change the component title.
+
+ <code-example header="Replace in src/app/app.component.ts" path="first-app-lesson-01/src/app/app.component.ts" region="app-comp-title"></code-example>
+
+ Then, save the changes you made to `app.component.ts`.
+
+1. If you stopped the `ng serve` command from step 1, in the **Terminal** window of your IDE, run `ng serve` again.
+1. Confirm that the app builds without error and displays *Hello world* in the title and body of your app.
+ Correct any errors before you continue to the next step.
+
+## Lesson review
+
+In this lesson, you updated a default Angualar app to create *Hello world*.
+In the process, you learned about the `ng serve` command to serve your app locally for testing.
+
+If have any trouble with this lesson, review the completed code for it in the <live-example></live-example>.
+
+## Next steps
+
+* **Link to Lesson 2**
+
+## More information
+
+For more information about the topics covered in this lesson, visit:
+
+* \[TODO: links to related topic.\]
+* \[TODO: links to related topic.\]
+* \[TODO: links to related topic.\]