Get started with Angular 8

Angular Raleigh Meetup

@AskUdhay

Hey, Am Udhay (OO-dhy)

Angular 1.X?

Called as Angular JS..

JavaScript based framework

Not object oriented or typed because of lack of Typescript support

No new versions released since 2018

Entered LTS (Long Term Support) phase till July 1, 2021

AngularJS

@AskUdhay

Angular JS is dead!

Don't worry, we have better framework now..

@AskUdhay

Google team developed new framework called Angular!

Just note that it's not redeveloped from Angular JS

@AskUdhay

Why Angular?

One framework for Mobile & Desktop

Uses TypeScript (Typed JavaScript)

Blazing speed &

Performance

Incredible tooling

Loved by millions!

Open source

Extensible

Single Page App development - Made easy

@AskUdhay

Angular 2 is the first version of new Angular framework, not the next version of Angular JS 1.X

@AskUdhay

Angular 2

Angular 3

Angular 4

Angular 5

Angular 6

Angular 7

Angular 8 (Current)

Angular 9-rc

One of the repo @angular/router was already versioned 3.X in Angular 2.X, that's why version 3 was skipped.

@AskUdhay

Let's talk about softwares..

Click through logos and install them..

@AskUdhay

Hope things run smoothly..

@AskUdhay

Check if Node installed fine by running       

command from terminal/cmd prompt

node -v

@AskUdhay

Need to install Angular CLI to create, serve, package etc

Angular application..

npm install -g @angular/cli

https://cli.angular.io/

@AskUdhay

Check if Angular installed perfectly by running       

command from terminal/cmd prompt

ng v

@AskUdhay

Create your first Angular app using ng cli.. 

ng new HelloWorld

@AskUdhay

It's time to run your first Angular app..

@AskUdhay

ng serve -o

Serves and opens the app in default

browser..

@AskUdhay

@AskUdhay

}

Application source

App component

Configuration files

Bootstrap files

}

Node modules

Angular App

Structure

@AskUdhay

How Angular app works?

@AskUdhay

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/HelloWorld",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },

angular.json

main.ts

app.module.ts

app.component.ts

app.component.html

index.html

ng serve command builds the app with entry point as specified in build object in angular.json

@AskUdhay

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

angular.json

main.ts

app.module.ts

app.component.ts

app.component.html

index.html

Angular bootstraps the root module - AppModule

@AskUdhay

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular.json

main.ts

app.module.ts

app.component.ts

app.component.html

index.html

AppModule bootstraps the AppComponent to render the HTML

@AskUdhay

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'HelloWorld';
}

angular.json

main.ts

app.module.ts

app.component.ts

app.component.html

index.html

It renders the html tied with app-root selector

@AskUdhay

Welcome to {{title}}!

angular.json

main.ts

app.module.ts

app.component.ts

app.component.html

index.html

It renders the html tied with app-root selector

@AskUdhay

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

angular.json

main.ts

app.module.ts

app.component.ts

app.component.html

index.html

Injects the app-root html in index.html

@AskUdhay

Angular Architecture

* Module

* Component

* Service

* Pipes

@AskUdhay

Angular Architecture

@AskUdhay

Angular Architecture

AngularHive

@AskUdhay

@AskUdhay

* Open app.component.html from the angular app your created before.

* Replace existing html code with below:

 

 

 

* title is Typescript property exists in app.component.ts, that gets rendered with its value, when you put them within {{ }}.

* This is called String interpolation.

Welcome to {{title}}

@AskUdhay

* If you are app is already running, you should be seeing "Welcome to HelloWorld" on your browser.. That's the magic of Angular dev server, that looks for file changes.

* Once the files are changes and saved, Angular builds and renders the app on brwoser.

 

 

ng serve -o

@AskUdhay

Tada..

@AskUdhay

Questions?

@AskUdhay

What next?

Learn other interesting topics in Angular:

 

Displaying data - https://angular.io/guide/template-syntax

Pipes - https://angular.io/guide/pipes

Forms - https://angular.io/guide/forms-overview

HttpClient - https://angular.io/guide/http

Routing & Navigation - https://angular.io/guide/router

@AskUdhay

ng thanks!

Hope the session was helpful to you to get started with Angular.

@AskUdhay