Angular Tutorial 101: Create a Simple App

A CodeMix eLearning Tutorial

Create your first app using Angular! This app connects your frontend to a web service that returns a list of people in Star Wars movies.

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials | View Steps

# Angular 101: Create a Simple App

### 01

# Welcome to Angular 101!

In this tutorial, we are going to make a simple Angular application. In this application, you will connect your frontend to a web service that returns a list of people in Star Wars movies.
 
A new project `tutorial-angular101` has been added to your workspace.

Alternatively, you can also create your own Angular project using Angular wizard provided by CodeMix as follows -
Select `File > New > Project..` and choose `CodeMix > Angular Project`

### 02

# Install Dependencies

To work with an Angular project, you first need to install required Node modules.

In the Terminal+ view run `npm install` to install the corresponding Node modules needed to properly work with Angular inside this project, including the command needed to serve the Angular application easily from development.

1. Type `npm install`
2. Press `Enter`

The Terminal+ view in CodeMix will automatically configure the Node and NPM versions for you. If you need to change this, you can at any time via project properties.

Node and NPM installation can take up to several minutes.

### 03

# Check out the app

Use Live Preview to see how the app looks like right now.

If you do not see the preview at the right of your editor, you can enable it by clicking the Live Preview toggle (or the eye icon) at the top right of the editor.

It will prompt to run the Angular server first, just accept the request and it will start the server and then display the preview.

Alternatively you can press `{binding:codemix.toggle.preview}` or right click on the editor and select `Toggle Live Preview`.

### 04

# Create StarWarsPeople Component

Let's create a new Angular component for retrieving the Star Wars people we are going to access in this tutorial.

1. Right-click on `src/app`
2. Select `New > Component`
3. Type `star-wars-people` for the Component Name. Type it exactly as it is suggested.
4. Press `Finish`

You can also use the `ng generate component star-wars-people` command in the Terminal to create it.

More about Angular Component basics <a href="https://angular.io/guide/architecture-components" target="_blank" rel="nofollow noopener">here</a>
Additional info regarding <a href="https://angular.io/guide/styleguide#separate-file-names-with-dots-and-dashes" target="_blank" rel="nofollow noopener">Angular File names styles</a>

### 05

# The Component files created

When a new Component is created a folder with the component's name is created along with the following files:

`star-wars-people/star-wars-people.component.css`
`star-wars-people/star-wars-people.component.html`
`star-wars-people/star-wars-people.component.spec.ts`
`star-wars-people/star-wars-people.component.ts`

Where the `.css` file is for styling, `.html` for the template, `.spec.ts` for testing and `.ts` holds component's main.

### 06

# Prepare Component to be Used by the App

We now have our component ready to be used and needs to be included in `app.component.html` template file by adding the following element:

```
<app-star-wars-people></app-star-wars-people>
```

### 07

# Add Http module dependency

Angular includes the `HttpClientModule` that simplifies using data services. The import statement has already been added for you, though content assist is available when making the import.

To use the module, simply start typing `HttpClientModule` and when you pause, you will be offered the module.

### 08

# Create StarWarsPeople Service

Let's create the Angular service for retrieving the Star Wars people we are going to access in this tutorial.

1. Right-click on `src/app/star-wars-people`
2. Select `New > Service`
3. Type `star-wars-people` for the name
4. Press `Finish`

You can also use the terminal to create it, first `cd` in to `star-wars-people` directory and then type `ng generate service star-wars-people` command.

More about Angular Service basics <a href="https://angular.io/guide/architecture-services" target="_blank" rel="nofollow noopener">here</a>

### 09

# Inject Http service in our Service

Make Http available in our Service to setup the web service by injecting it into the StarWarsPeopleService constructor().

```
constructor(private http: HttpClient) { }
```

Press `Ctrl+Space` after typing `HttpClient` to have the `Auto Import` action add the import statement for you.

```
import { HttpClient } from '@angular/common/http';
```

### 10

# Setup our WS

On to creating the code needed to connect to the Web Service. Add the following method to StarWarsPeopleService:

```
getStarWarsPeople() {
    return this.http.get('https://swapi.co/api/people/?format=json');
}
```

### 11

# Make Service Available

Now that StarWarsPopleService is ready, make it available to the app by adding it to app.module.ts like the HttpModule before, but this time in providers property.

```
providers: [
	StarWarsPeopleService
],
```

### 12

# Setup the Service in the Component

It is time to setup our component to use the `StarWarsPeopleService` service by declaring first where people data will be stored and injecting the service in the `constructor()` method.

``` 
export class StarWarsPeopleComponent implements OnInit {

people: any = [];
	
	constructor(private service: StarWarsPeopleService) { }

}
```

### 13

# Retrieve People from Star Wars

Call `getStarWarsPeople()` method from our service to pull Star Wars data.

```
this.service.getStarWarsPeople().subscribe((data: any) => {
    const results = data.results;
    for (const person of results) {
        this.people.push(person);
    }
});
```

For further information regarding `subscribe()` method you can look <a href="https://angular.io/guide/observables#subscribing" target="_blank" rel="nofollow noopener">here</a>

### 14

# Use Snippets for Component's Template

Time to update `star-wars-people.component.html` template file.

Emmet is a powerful tool that will help you expand code, reducing the time spent typing. Type the following snippet and a popup window will appear with code suggestion. If not shown, press Ctrl/Cmd + Space.

`.row>.col>ul>li`

by accepting the suggested code, the result will be:

```
<div class="row">
  <div class="col">
    <ul>
      <li></li>
    </ul>
  </div>
</div>
```

### 15

# Continue using Snippets for Component's Template Part

Emmet is cool! isn't it? Let's use few other snippets to add directives to handle data. Type `ng` in the opening `ul` element and select the suggested `a-ngIf` snippet. This should result in:

`<ul *ngIf="expression">`  edit to `<ul *ngIf="people.length > 0">`

Type `ng` again in the opening `li` element and select the `a-ngFor` snippet suggested, this will result in:

`<li *ngFor="let item of list">`  edit to `<li *ngFor="let person of people">`

`Tab` key will allow you jump through template fields.

### 16

# Finishing the Template

The only missing part now is data display. So, let's add the following snippet to `li` element:

`{{ person.name }}`

the line should look like this one

```
<li *ngFor="let person of people">{{ person.name }}</li>
```

You can read more about displaying data <a href="https://angular.io/guide/displaying-data" target="_blank" rel="nofollow noopener">here</a>

### 17

# See the results in Live Preview

You should be able to see the list of star wars names in Live Preview. If you want you can also open this URL in your external browser: <http://localhost:4200>

Your first Angular app built with CodeMix is up and running.

### 18

# Nice Job!!!

You've finished the Angular 101 tutorial. As you are learning Angular, why not check out <a href="https://angular.io/docs" target="_blank" rel="nofollow noopener">Angular Docs</a> for good examples of challenges you may face.

Explore other <a href="https://www.genuitec.com/elearning/" target="_blank">Angular</a> courses.