Skip to content

Latest commit

 

History

History
140 lines (80 loc) · 5.36 KB

quick-start.md

File metadata and controls

140 lines (80 loc) · 5.36 KB

Your first Angular app

A few lines of TypeScript are all it takes to create your first Angular app. As you your app grows, you can separate the markup and code into different files.

Try your first Angular app

The code editor contains a complete Angular app.

<iframe src="https://stackblitz.com/github/angular/angular/tree/main/aio/content/demos/first-app?embed=1&file=src/main.ts&hideExplorer=1&hideNavigation=1" height="550" width="100%" style="border: solid 1px 777"></iframe>

The Angular app in the code editor shows the TypeScript that makes a simple, but complete, Angular component. It imports resources from existing libraries and defines the properties of the new component.

Explore further

See more about Angular features or try the following exercises for some hands-on experience with Angular.

Add features to your first Angular app

To give your component a reset button that sets the counter back to 0:

  1. In the code editor, in the template value, after the line that starts with <button (click)=, add this line.

    <button (click)="count = 0">Reset</button>

    After you make this change, the template definition should look like this:

    template: // the component's markup ` <button (click)="count = count + 1">Add one</button> {{ count }} <button (click)="count = 0">Reset </button> `,

  2. Click Add one several times and then click Reset. The counter value should return to zero.

The new line adds a new <button> element. When the click event occurs in the button, the TypeScript code in the double-quotes sets the count property to 0.

You can also add styles to your new component.

  1. In the code editor, after the selector value and before the line that starts with standalone, add this code to give your buttons bold text and rounded corners.

    styles: [ 'button { font-weight: bold; border-radius: 8px;}' ],

  2. The buttons in your new Angular app should now have bold text and rounded corner.

Create a new Angular app from the command line

To create a new Angular app, perform these steps in a command-line tool on your local computer.

  1. Make sure you have the correct version of node.js and npm installed on your system.

    1. Run this command to display the current version of npm.

      npm --version

    2. If you see a version number that's 8.5.0 or later, you're ready to create an Angular app. For information about the supported versions of node and npm, see Prerequisites.

    3. If you do not see such a version number, update node and try this step again before you continue.

  2. Create a new Angular app.

    1. Create or navigate to the directory into which you want to create your Angular app.

    2. Run this command to create your new Angular app.

      npm init @angular myApp

      When prompted to make a choice, press Enter to accept the default option. This creates a new Angular app in the myApp directory.

    3. Run this command to navigate to the new directory.

      cd myApp

    4. Run this command to build your new app.

      npm start

      When prompted to make a choice, press Enter to accept the default option. Note the URL in the message displayed in the command-line tool for the next step.

    5. Open a browser on the system with the new Angular app.

    6. In the browser's address bar, enter the URL in the message displayed in the command-line tool. The default URL is http://localhost:4200.

Your new Angular app displays its default landing page with the Angular logo. Review the tutorials in the following section for ideas about how to start changing your new app to make it your own.

Try more tutorials

For more demonstrations of Angular coding, visit:

  • Introduction to Angular A video tutorial about developing an Angular app. The Angular team produced this video for beginners to get hands-on with Angular. (42-min)
  • A basic shopping cart demo A basic app that demonstrates a few more Angular features. This demonstration takes you through the steps of building a simple app in a StackBlitz editor.
  • A Tour of Heroes A tutorial in which you create an Angular app from scratch with Angular development tools. You can develop this tutorial in an IDE on your own system or in a StackBlitz editor.