Build your first Angular app

Build your first Angular app

    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 {
Course Overview
Dan Wahlin2:22a year ago
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
Application Overview
Dan Wahlin1:34a year ago
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
The Responsive Web Design Bootcamp Promo
Per Harald Borgen3:2219 days ago
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
Angular CLI
Dan Wahlin4:06a year 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" />
Angular Project Files Overview
Dan Wahlin7:53a year ago
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
The Big Picture
Dan Wahlin7:42a year ago
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <h1>Hello World</h1>
      `
    })
    export class AppComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
Overview - Angular Components & Modules
Dan Wahlin4:52a year ago
    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
App Component - Angular Components & Modules
Dan Wahlin7:32a year ago
    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 { }
App Module - Angular Components & Modules
Dan Wahlin4:49a year ago
    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 { }
The Customers Component - Angular Components & Modules
Dan Wahlin11:07a year ago
    <br />
    <br />
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Order Total</th>
            </tr>
        </thead>
        <tr>
            <td>
                <a>
Customers List Component - Angular Components & Modules
Dan Wahlin4:46a year ago
    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 { }
Filter Textbox Component - Angular Components & Modules
Dan Wahlin3:45a year ago
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
Shared Module and Interfaces - Angular Components & Modules
Dan Wahlin7:20a year ago
    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 { }
Overview - Data Binding in Angular
Dan Wahlin6:08a year ago
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
Getting Started - Data Binding in Angular
Dan Wahlin3:42a year ago
    import { NgModule } from '@angular/core';
    
    @NgModule({
        declarations: [  ],
        exports: [  ]
    })
    export class SharedModule { }
Directives and Interpolation - Data Binding in Angular
Dan Wahlin7:46a year ago
    <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>
Event Binding - Data Binding in Angular
Dan Wahlin2:38a year ago
    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;
        }
Input Properties - Data Binding in Angular
Dan Wahlin7:50a year ago
    <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>
Working with Pipes - Data Binding in Angular
Dan Wahlin9:32a year ago
    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;
        }
Adding Filtering - Data Binding in Angular
Dan Wahlin10:44a year ago
    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 { }
Angular Services and Http - Services Overview
Dan Wahlin3:36a year ago
    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 { }
Angular Services and Http - Creating and Providing a Service
Dan Wahlin6:52a year ago
    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) { }
Angular Services and Http - Calling the Server with HttpClient
Dan Wahlin9:33a year ago
    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) {}
Angular Services and Http - Injecting a Service into a Component
Dan Wahlin4:52a year ago
    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) {}
Angular Services and Http - Subscribing to an Observable
Dan Wahlin3:23a year ago
    <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>
Angular Services and Http - Using a SorterService
Dan Wahlin2:34a year ago
    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;
        }
Angular Routing - Routing Overview
Dan Wahlin2:05a year ago
    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 {
Angular Routing - Creating a Routing Module with Routes
Dan Wahlin7:19a year ago
    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 {
Angular Routing - Using Router Outlet
Dan Wahlin2:09a year ago
    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 {
Angular Routing - Adding a Customers Routing Module and Routes
Dan Wahlin5:43a year ago
    <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>
Angular Routing - Adding an Orders Component with Routes
Dan Wahlin3:26a year ago
    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[] = [];
Angular Routing - Accessing Route Parameters
Dan Wahlin5:46a year ago
    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 {
Angular Routing - Linking to Routes with the routerLink Directive
Dan Wahlin7:39a year ago
    import { Component, OnInit } from '@angular/core';
    
    @Component({ 
      selector: 'app-root',
      template: `
        <router-outlet></router-outlet>
      `
    })
    export class AppComponent implements OnInit {
      constructor() { }
    
      ngOnInit() {
    
      }
Course Summary
Dan Wahlin3:31a year 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.

Built withImba
TermsDocsStart teachingAbout
#

Build your first Angular app

New Responsive Design CourseSearchCommunity