Summary of Building Your First Angular App by Dan Wahlin

Summary.md

This is a summary of Build Your First Angular App course by @DanWahlin

Part 2 - Application Overview

Key Concepts

1. Components and Modules
2. Data Binding
3. Input and Output Properties
4. Services and HTTP
5. Routing

Part 3 - Angular CLI

To create angular app, use angular cli

$ npm install -g @angluar/cli
$ ng new my-newapp
$ cd my-newapp
$ ng serve

Important ng commands

ng --version
ng --help
ng new my-app-name
ng generate [component | directive | pipe | service | class | interface | enum | guard ] 
ng g  [ ...]  # alias for ng generate
ng generate --routing # used on this course
ng build  # build the app
ng serve  # build and serve the app
ng serve -o # serve app and open in browser
ng lint
ng test

Part 4 - Project Files Overview

only src/app folder relevant to development

Part 5 - The Big Picture

An angular components will have at least one module. Module is like a bucket which holds Components.
Components render UI

Modules --has--> Routes --loads-> Components 

Component = HTML Template + Code

             ___ 1. HTML Template --may-have--> Directives/ Child Components
           /
Components
           \ ___ 2. Code --may-use--> Services (reusable code) 

Part 6 - Components and Modules

Component code consists of 3 parts

1. imports

import { Component } from '@angular/core'
import { DataService } from '../services/data.service'

2. decorators
   decorators start with @ symbol. It defines meta data for your modules/components.
   The @Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata. (Module decorators use @NgModule())

@Component({
  selecter: 'app-customers',
  templateURL: './customer.components.html'
  })

3. class

export class CustomersComponent{
}

Part 7 - Components and Modules - App Component

example app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({  //decorator
  selector: 'app-root',   //component will be loaded using <app-root> tag in html
  template: `
    <h1>{{ title }}</h1> 
  `//inline template with variable interpolation 
})
export class AppComponent implements OnInit {  //OnInit is an interface
  title: string;    // setting 'title' as string 
  constructor() { }

  ngOnInit() {  // gets called when component loads
    // We call a service that gets us the data
    this.title = 'Hello World';
  }
  
}

Part 8 - Components and Modules - App Module

example app.module.ts

// normal js imports from angular modules
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';  //imports directives
// normal js imports from custom module
import { AppComponent }  from './app.component';  

@NgModule({
  imports:      [ BrowserModule ], // angular import, requires js import first
  declarations: [ AppComponent ],  // list of components part of this module
  bootstrap:    [ AppComponent ]  //component to load first, use bootstrap for root module only
})
export class AppModule { }

Part 9 - Components and Modules - Adding a Customers Component

Create component via command line

$ ng generate component CustomerComponent
$ ng g c MyComponent  # using alias
$ ng g c MyComponent -d  # dry run
CREATE src/app/customers-component/customers-component.component.css (0 bytes)
CREATE src/app/customers-component/customers-component.component.html (38 bytes)
CREATE src/app/customers-component/customers-component.component.spec.ts (713 bytes)
CREATE src/app/customers-component/customers-component.component.ts (320 bytes)
UPDATE src/app/app.module.ts (525 bytes)