Discover Angular's core concepts and advance to building a complete SPA. Gain hands-on experience by creating modules, components, forms, routing, and APIs in an e-commerce app.

angular_setup.tar.gz

angular

In this course, you will cover the most fundamental concepts of Angular, a popular JavaScript framework. You will learn everything about building a complete Angular app, setting up the development environment, and building your own single-page application (SPA).

You’ll start off by covering the basic building blocks of Angular such as modules, components, and directives. After that, the course will introduce you to some more advanced material that focuses on forms, routing, and dealing with APIs. 

By the end of this course, you will have gained hands-on experience by building a fully functional e-commerce application.

A Hands-on Guide to Angular

![intro-components](/api/collection/5854561945255936/5664668925296640/page/4672313065734144/image/5422861186498560)

You can think of your Angular application as a set of components. These components work together to build a single-page application and communicate with each other.

A component is also the most basic building block of Angular. It has a class where we define the business logic and a view that renders the properties and methods defined in the class.


## Syntax of a component declaration

We will start with understanding the component declaration syntax, followed by how a component definition is created by the compiler, and how it is rendered in the browser.

```
@Component({
  selector: 'app-child-one',
  templateUrl: './child-one.component.html',
  styleUrls: ['./child-one.component.scss']
})
export class ChildOneComponent{ }
```

This is what a regular component looks like in Angular. It is just a class preceded by a decorator that contains the metadata to inform the compiler of the job of a particular class.

The decorator used to define a component is `@Component({})`

Every decorator has some attributes that need to be defined, and in the case of the Component decorator, we usually define the following:

1) Selector
2) Template/templateUrl
3) Style/styleUrls
4) ViewEncapsulation (if you wish to set encapsulation for a particular component).

## `selector`

The selector property contains the name of the component that we can use as a reference to our component in a template.

In the above code example, the selector is defined as `app-child-one`, and we can use it in the template of some other component just like any other HTML element.

E.g., 
```
<app-child-one></app-child-one>
```

## `template/templateUrl`
The second attribute is the `template/templateUrl` tag that helps us reference the HTML associated with the class of a particular component.

For example, the App Component class should have a reference to the app component HTML.

This is specified in the `templateUrl` property exactly as mentioned in the above example. However, you can also inline your template by using the template property and using backticks to define the template.

This is what it looks like:

```html
template: `
<h1>Hello from App Component</h1>
`
```
## `styles/styleUrls`
The styles work in a similar manner. The styleUrls contains the reference to your styling file or inline styling can be done using the styles property.

```
styles: ['div { font-weight: 600; }']]
```

## `ViewEncapsulation`
`ViewEncapsulation` - This defines the different options available for template and styles encapsulation. There are three options:

- None
- ShadowDOM
- Emulated (Default)

You can look up the Angular documentation to dive deeper into each one of these.

**Do not forget to add imports**

Imports usually help access the external ES modules and use those in our components/modules.

For example, to use the `component` decorator, we have access to it. Now, this is exported from the Angular core package. So in our component class, we import it like this:

```
import { Component } from '@angular/core';
```

## Demo

In this demo, take a look at how the component class is wired with its template, spec file, and styles files. 
It would be futile to run the application right now, as we haven’t reached the concepts yet so the output will be disabled to be viewed in the next demo.

But look at the code to understand the structure and syntax.

You can focus on App Component or Child One Component.

![intro-components](/api/collection/5854561945255936/5664668925296640/page/4672313065734144/image/5422861186498560)

You can think of your Angular application as a set of components. These components work together to build a single-page application and communicate with each other.

A component is also the most basic building block of Angular. It has a class where we define the business logic and a view that renders the properties and methods defined in the class.


# Syntax of a component declaration

We will start with understanding the component declaration syntax, followed by how a component definition is created by the compiler, and how it is rendered in the browser.

```
@Component({
  selector: 'app-child-one',
  templateUrl: './child-one.component.html',
  styleUrls: ['./child-one.component.scss']
})
export class ChildOneComponent{ }
```

This is what a regular component looks like in Angular. It is just a class preceded by a decorator that contains the metadata to inform the compiler of the job of a particular class.

The decorator used to define a component is `@Component({})`

Every decorator has some attributes that need to be defined, and in the case of the Component decorator, we usually define the following:

1) Selector
2) Template/templateUrl
3) Style/styleUrls
4) ViewEncapsulation (if you wish to set encapsulation for a particular component).

# `selector`

The selector property contains the name of the component that we can use as a reference to our component in a template.

In the above code example, the selector is defined as `app-child-one`, and we can use it in the template of some other component just like any other HTML element.

E.g., 
```
<app-child-one></app-child-one>
```

# `template/templateUrl`
The second attribute is the `template/templateUrl` tag that helps us reference the HTML associated with the class of a particular component.

For example, the App Component class should have a reference to the app component HTML.

This is specified in the `templateUrl` property exactly as mentioned in the above example. However, you can also inline your template by using the template property and using backticks to define the template.

This is what it looks like:

```html
template: `
<h1>Hello from App Component</h1>
`
```
# `styles/styleUrls`
The styles work in a similar manner. The styleUrls contains the reference to your styling file or inline styling can be done using the styles property.

```
styles: ['div { font-weight: 600; }']]
```

# `ViewEncapsulation`
`ViewEncapsulation` - This defines the different options available for template and styles encapsulation. There are three options:

- None
- ShadowDOM
- Emulated (Default)

You can look up the Angular documentation to dive deeper into each one of these.

**Do not forget to add imports**

Imports usually help access the external ES modules and use those in our components/modules.

For example, to use the `component` decorator, we have access to it. Now, this is exported from the Angular core package. So in our component class, we import it like this:

```
import { Component } from '@angular/core';
```

# Demo

In this demo, take a look at how the component class is wired with its template, spec file, and styles files. 
It would be futile to run the application right now, as we haven’t reached the concepts yet so the output will be disabled to be viewed in the next demo.

But look at the code to understand the structure and syntax.

You can focus on App Component or Child One Component.

In this lesson, we will see what components are, how we can create them, and how they get rendered under the hood.

Course Overview

Introduction to the Framework

Building Blocks of Angular

Basic Concepts in an Angular Application

Forms in Angular

Routing in Angular

Services and Dependency Injection

Dealing with APIs

Implement the Above in a E-commerce App

Login and Authentication

Summary and Resources

Components

Syntax of a component declaration