Scribd
Upload
34 views

Getting Started With A Basic Angular App

This document introduces Angular by walking through the creation of a sample e-commerce application in StackBlitz. It provides tips for using StackBlitz, including logging in to save work, forking projects, and copying code examples. The starting application contains sample data, files, and templates to dynamically display a product list, with instructions on how to populate the template using the mock data.

Uploaded by

David
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
34 views

Getting Started With A Basic Angular App

This document introduces Angular by walking through the creation of a sample e-commerce application in StackBlitz. It provides tips for using StackBlitz, including logging in to save work, forking projects, and copying code examples. The starting application contains sample data, files, and templates to dynamically display a product list, with instructions on how to populate the template using the mock data.

Uploaded by

David
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Part 1: Getting started with a basic Angular

app
Welcome to Angular!

This tutorial introduces you to the essentials of Angular by walking you through a simple e-commerce

site with a catalog, shopping cart, and check-out form. To help you get started right away, this guide

uses a simple ready-made application that you can examine and modify interactively (without having

to set up a local work environment).

NEW TO WEB DEVELOPMENT?

There are many resources to complement the Angular docs. Mozilla's MDN docs include

both HTML and JavaScript introductions. TypeScript's docs include a 5-minute tutorial. Various

online course platforms, such as Udemy and Codecademy, also cover web development basics.

Create the sample project

Click here to create the ready-made sample project in StackBlitz. 


•The preview pane on the right shows the starting state of the sample Angular app. It defines a

frame with a top bar (containing the store name and checkout icon) and the title for a product

list (which will be populated and dynamically updated with data from the application).

•The project pane on the left shows the source files that make up the application, including all of

the infrastructure and configuration files. The currently selected file shows up in the editor pane

in the middle.

Before going into the source structure, the next section shows how to fill out the HTML template for the

product list, using the provided sample data. This should give you an idea how easy it is to modify and

update the page dynamically.

STACKBLITZ TIPS

• Log into StackBlitz so you can save and resume your work. If you have a GitHub account, you

can log into StackBlitz with that account. In order to save your progress, first fork the project

using the Fork button at the top left, then you'll be able to save your work to your own StackBlitz

account by clicking the Save button.

• To copy a code example from this tutorial, click the icon at the top right of the code example box,

and then paste the code snippet from the clipboard into StackBlitz.

• If the StackBlitz preview pane isn't showing what you expect, save and then click the refresh

button.

• StackBlitz is continually improving, so there may be slight differences in generated code, but the

app's behavior will be the same.


• When you generate the StackBlitz example apps that accompany the tutorials, StackBlitz creates

the starter files and mock data for you. The files you'll use throughout the tutorials are in

the src folder of the StackBlitz example apps.

If you go directly to the StackBlitz online development environment and choose to start a

new Angular workspace, you get a generic stub application, rather than this illustrative

sample. Once you have been introduced to the basic concepts here, this can be helpful for

working interactively while you are learning Angular.

In actual development you will typically use the Angular CLI, a powerful command-line tool

that lets you generate and modify applications. For a full step-by-step guide that shows how to

use the CLI to create a new project and all of its parts, see Tutorial: Tour of Heroes.

You might also like