Learn Angular’s architecture, creating components, using pipes and directives, and implementing event handling, navigation, and routing with Angular CLI.

Become an AngularJS Developer

In this module, we’ll learn Angular, which is currently among the top JavaScript frameworks. We’ll begin with the basics of an Angular application, including its project structure. Next, we’ll cover how to create components and use pipes and directives in Angular. Lastly, we'll cover event handling, navigation, and routing. By the end, we’ll have learned how to achieve cross-platform high performance with the latest web techniques.

Getting Started with Angular

**(Fill in the blank.)** ________ is a backend REST API available online that we can use when we need fake data for an e-commerce or e-shop web application.


<p><strong>(Fill in the blank.)</strong> ________ is a backend REST API available online that we can use when we need fake data for an e-commerce or e-shop web application.</p>


`import { map, Observable, of } from ‘rxjs’;`

`import  map, Observable, of from ‘rxjs’;`

`import { map, Observable, of } from RXJS;`

Which is the correct way to import the `map` operator from RxJS?

<p>Which is the correct way to import the <code>map</code> operator from RxJS?</p>


`private convertToStudent(student: StudentDTO): student {
  return {
    name: student.name,
    rollno: student.rollno
  };
}`

`private convertToStudent(student: StudentDTO) {
  return {
    name: student.name,
    rollno: student.rollno
  };
}`


`private convertToStudent(student: StudentDTO): Student {
  return {
    name = student.name;
    rollno = student.rollno;
  };
}`

`private Student convertToStudent(student: StudentDTO) {
  return {
    name: student.name,
    rollno: student.rollno
  };
}`

Suppose we have a `Student` class and a `StudentDTO` class as given below. Which is the correct implementation of a helper method to transform a `StudentDTO` object into a `Student` object?

`interface Student {
  name: string;
  rollno: number;
}`

`interface StudentDTO{
  name: string;
  rollno: number;
}`

<p>Suppose we have a <code>Student</code> class and a <code>StudentDTO</code> class as given below. Which is the correct implementation of a helper method to transform a <code>StudentDTO</code> object into a <code>Student</code> object?</p>
<p><code>interface Student {   name: string;   rollno: number; }</code></p>
<p><code>interface StudentDTO{   name: string;   rollno: number; }</code></p>


`getStudent(id:Student): Observable<id: number> {
  return this.http.get<StudentDTO>(‘${this.studentsUrl}/${id}‘).pipe(
    map(student => this.convertToStudent(student))
  )
}`

`getStudent(): Observable<id> {
  return this.http.get<StudentDTO>(‘${this.studentsUrl}/${id}‘).pipe(
    map(student => this.convertToStudent(student))
  )
}`

`getStudent(id: number): Observable<Student> {
  return http.get(‘${studentsUrl}/${id}’).pipe(
    map(student => convertToStudent(student))
  )
}`

`getStudent(id: number): Observable<Student> {
  return this.http.get<StudentDTO>(‘${this.studentsUrl}/${id}‘).pipe(
    map(student => this.convertToStudent(student))
  )
}`

Which is the correct implementation of a `getStudent` method that accepts the student `id` as a parameter and initiates a `GET` request to an API based on that `id`.

<p>Which is the correct implementation of a <code>getStudent</code> method that accepts the student <code>id</code> as a parameter and initiates a <code>GET</code> request to an API based on that <code>id</code>.</p>


`<div>
  <button “createProduct(name.value, price.valueAsNumber)“>Create</button>
</div>`

`<div>
  <button (click)=“createProduct(name.value, price.value)“>Create</button>
</div>`

`<div>
  <button (click)=“createProduct(name.value, price.valueAsNumber)“>Create</button>
</div>`

`<div>
  <button (click)=createProduct()=(name.value, price.valueAsNumber)“>Create</button>
</div>`

Suppose we want to bind the `createProduct` method to the `click` event of a "Create" button. We need to pass the value using the respective template reference variables, `name` and `price`. However, the value of the price should be converted to a number. Which is the correct code for this?

<p>Suppose we want to bind the <code>createProduct</code> method to the <code>click</code> event of a “Create” button. We need to pass the value using the respective template reference variables, <code>name</code> and <code>price</code>. However, the value of the price should be converted to a number. Which is the correct code for this?</p>


Test your understanding of the essential concepts regarding data services over HTTP.

Introduction to Angular

Organizing Applications into Modules

Enabling User Experience with Components

Enrich Applications Using Pipes and Directives

Managing Complex Tasks with Services

Being Reactive Using Observables and RxJS

Communicating with Data Services over HTTP

Navigating through Application with Routing

Appendix

Conclusion