Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: add first-app tutorial lesson-01 (#49980)

Browse source 
PR Close #49980
This commit is contained in:
Bob Watson 2023-01-17 17:18:50 -08:00 committed by Alex Rickabaugh
parent 65bb8f292d
commit 588b4de5bd
4 changed files with 164 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
aio/content/examples/first-app-lesson-01/src/app/app.component.ts
View file

@ -4,9 +4,13 @@ import { Component } from '@angular/core';
selector: 'app-root',
standalone: true,
imports: [],
// #docregion app-comp-template
template: `<h1>Hello world!</h1>`,
// #enddocregion
styleUrls: ['./app.component.css'],
})
export class AppComponent {
// #docregion app-comp-title
title = 'homes';
// #enddocregion
}

2
aio/content/examples/first-app-lesson-01/src/index.html
View file

@ -2,7 +2,9 @@
<html lang="en">
<head>
<meta charset="utf-8">
<!-- #docregion app-title -->
<title>Homes</title>
<!-- #enddocregion -->
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

5
aio/content/navigation.json
View file

@ -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"
}
]
},

153
aio/content/tutorial/first-app/first-app-lesson-01.md Normal file
View file

@ -0,0 +1,153 @@
# First Angular app lesson 1 - Hello world
<div class="callout is-important">
<header>This topic is a work in progress</header>
This topic is a rough draft. Many sections are incomplete and some or all content might change before its final draft.
<!--
This topic is a first draft. It is complete, but it some or all content might change before its final draft.
This topic is a final draft. It is complete and ready for review.
-->
</div>
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 <live-example name="first-app-lesson-00"></live-example> 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 <live-example></live-example> 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.
<code-example format="shell" language="shell">
ng serve
</code-example>
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 `<title>` 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.\]