Build your first Angular app

33 interactive screencasts to take you from beginner to advanced

    html {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    main {
        position: relative;
        padding-top: 55px;
    }
    
    /* Ensure display:flex and others don't override a [hidden] */
    [hidden] { display: none !important; }
    
    footer {
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
        
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
        
Dan Wahlin4:064 months ago
    <!DOCTYPE html>
    <html>
    <head>
        <base href="/">
        <title>Angular Core Concepts</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Angular App">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
              crossorigin="anonymous">
        <link href="assets/styles.css" rel="stylesheet" />
        
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
        
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <h1>Hello World</h1>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
    
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <h1>{{ title }}</h1>
      `
    })
    export class AppComponent implements OnInit {
      title: string;
      constructor() { }
    
      ngOnInit() {
        // We call a service that gets us the data
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppComponent }  from './app.component';
    
    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
    import { NgModule }      from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { CustomersComponent }  from './customers.component';
    
    @NgModule({
      imports:      [ CommonModule ],
      declarations: [ CustomersComponent ],
      exports: [ CustomersComponent ]
    })
    export class CustomersModule { }
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Order Total</th>
            </tr>
        </thead>
        <tr>
            <td>
                <a>
                    
    import { NgModule }      from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { CustomersComponent }  from './customers.component';
    import { CustomersListComponent } from './customers-list/customers-list.component';
    import { FilterTextboxComponent } from './customers-list/filter-textbox.component';
    
    @NgModule({
      imports:      [ CommonModule ],
      declarations: [ CustomersComponent, CustomersListComponent, FilterTextboxCompo
      exports: [ CustomersComponent ]
    })
    export class CustomersModule { }
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { CustomersModule } from './customers/customers.module';
    import { AppComponent }  from './app.component';
    
    @NgModule({
      imports:      [ BrowserModule, CustomersModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
    <filter-textbox></filter-textbox>
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th (click)="sort('name')">Name</th>
                <th (click)="sort('name')">City</th>
                <th  (click)="sort('name')">Order Total</th>
            </tr>
        </thead>
        <tr *ngFor="let cust of filteredCustomers">
            <td>
                <a>
    import { Component, OnInit, Input } from '@angular/core';
    
    import { ICustomer } from '../../shared/interfaces';
    
    @Component({
        selector: 'app-customers-list',
        templateUrl: './customers-list.component.html'
    })
    export class CustomersListComponent implements OnInit {
        private _customers: ICustomer[] = [];
        @Input() get customers(): ICustomer[] {
            return this._customers;
        }
        
    <filter-textbox></filter-textbox>
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th (click)="sort('name')">Name</th>
                <th (click)="sort('city')">City</th>
                <th (click)="sort('orderTotal')">Order Total</th>
            </tr>
        </thead>
        <tr *ngFor="let cust of filteredCustomers">
            <td>
                <a>
    import { Component, OnInit, Input } from '@angular/core';
    
    import { ICustomer } from '../../shared/interfaces';
    
    @Component({
        selector: 'app-customers-list',
        templateUrl: './customers-list.component.html'
    })
    export class CustomersListComponent implements OnInit {
        private _customers: ICustomer[] = [];
        @Input() get customers(): ICustomer[] {
            return this._customers;
        }
        
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    
    import { DataService } from './data.service';
    import { SorterService } from './sorter.service';
    
    @NgModule({
        imports: [  ],
        providers: [ ]
    })
    export class CoreModule { }
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    
    import { DataService } from './data.service';
    import { SorterService } from './sorter.service';
    
    @NgModule({
        imports: [  ],
        providers: [ DataService, SorterService ]
    })
    export class CoreModule { }
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    
    import { Observable } from 'rxjs/Observable';
    import { map, catchError } from 'rxjs/operators';
    
    import { ICustomer, IOrder } from '../../app/shared/interfaces';
    
    @Injectable()
    export class DataService {
    
        baseUrl: string = 'assets/';
        
        constructor(private http: HttpClient) { }
    import { Component, OnInit } from '@angular/core';
    
    import { DataService } from '../core/data.service';
    
    @Component({
        selector: 'app-customers',
        templateUrl: './customers.component.html'
    })
    export class CustomersComponent implements OnInit {
        title: string;
        people: any[];
        
        constructor(private dataService: DataService) {}
        
    import { Component, OnInit } from '@angular/core';
    
    import { DataService } from '../core/data.service';
    import { ICustomer } from '../shared/interfaces';
    
    @Component({
        selector: 'app-customers',
        templateUrl: './customers.component.html'
    })
    export class CustomersComponent implements OnInit {
        title: string;
        people: any[];
        
        constructor(private dataService: DataService) {}
    <filter-textbox (changed)="filter($event)"></filter-textbox>
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th (click)="sort('name')">Name</th>
                <th (click)="sort('city')">City</th>
                <th (click)="sort('orderTotal')">Order Total</th>
            </tr>
        </thead>
        <tr *ngFor="let cust of filteredCustomers">
            <td>
                <a>
    import { Component, OnInit, Input } from '@angular/core';
    
    import { ICustomer } from '../../shared/interfaces';
    import { SorterService } from '../../core/sorter.service';
    
    @Component({
        selector: 'app-customers-list',
        templateUrl: './customers-list.component.html'
    })
    export class CustomersListComponent implements OnInit {
        private _customers: ICustomer[] = [];
        @Input() get customers(): ICustomer[] {
            return this._customers;
        }
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
        { path: '', pathMatch: 'full', redirectTo: '/customers'},
        { path: '**', pathMatch: 'full', redirectTo: '/customers' }
    ];
    
    @NgModule({
        imports: [ RouterModule.forRoot(routes) ], 
        exports: [ RouterModule ]
    })
    export class AppRoutingModule {
    
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
        { path: '', pathMatch: 'full', redirectTo: '/customers'},
        { path: '**', pathMatch: 'full', redirectTo: '/customers' }
    ];
    
    @NgModule({
        imports: [ RouterModule.forRoot(routes) ], 
        exports: [ RouterModule ]
    })
    export class AppRoutingModule {
    
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { CustomersComponent } from './customers.component';
    
    const routes: Routes = [
        { path: 'customers', component: CustomersComponent }
    ];
    
    @NgModule({
        imports: [ RouterModule.forChild(routes) ], 
        exports: [ RouterModule ]
    })
    export class CustomersRoutingModule {
    
    <div *ngIf="customer">
        <h1>Orders for {{ customer.name | capitalize }}</h1>
    
        <table class="table table-hover orders-table" 
               *ngFor="let order of orders">
            <tr *ngFor="let orderItem of order.orderItems">
                <td>{{ orderItem.productName }}</td>
                <td>{{ orderItem.itemCost | currency:'USD':'symbol' }}</td>    
            </tr>
        </table>
    </div>
    <div *ngIf="!customer">
       No customer found
    </div>  
    import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute, Params } from '@angular/router';
    
    import { DataService } from '../core/data.service';
    import { ICustomer, IOrder, IOrderItem } from '../shared/interfaces';
    
    @Component({
      selector: 'app-orders',
      templateUrl: './orders.component.html',
      styleUrls: [ './orders.component.css' ]
    })
    export class OrdersComponent implements OnInit {
    
      orders: IOrder[] = [];
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
        { path: '', pathMatch: 'full', redirectTo: '/customers' },
        { path: '**', pathMatch: 'full', redirectTo: '/customers' }
    ];
    
    @NgModule({
        imports: [ RouterModule.forRoot(routes) ], 
        exports: [ RouterModule ]
    })
    export class AppRoutingModule {
    
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
      constructor() { }
    
      ngOnInit() {
    
      }
Dan Wahlin3:314 months ago

Gain a solid understanding of the Angular framwework

By learning Angular you'll greatly increase your chances of getting a job as a front-end developer! So in this course, the well-known Angular expert Dan Wahlin will teach you the framework through building a real-world application.

The course is split into several sections. In the introduction, you'll learn about the app you'll be building and the concepts you'll learn. Next up, you'll learn about components and modules, before we continue on with data binding. Then you'll learn about services and http and finally routing.

Throughout the course you'll be building an app which displays customer orders. Wahlin has chosen this project carefully, as it'll teach you all the core concepts behind Angular. So be prepared for 36 value-packed screencasts.

About the instructor:
Dan Wahlin has developed applications and provided architecture guidance and training to some of the largest (and smallest) companies in the world. He's also the man behind multiple successful courses on Udemy and Pluralsight, the co-author of several books and writer of technical docs for companies such as Microsoft, Google and others.

You can follow Dan Wahlin on Twitter here.

What people are saying about Scrimba: