Introduction to Angular

What is Angular?

Angular is:

Maintained by Google and the community
Client side framework for creating powerful web applications
Evolved from AngularJS and is continually being improved
Open Source (MIT License)

Documentation

Angular is rarely just "installed", tools like the CLI help us create and configure our applications

QuickStart

The quick-start guide is a great place to start learning how to build your first application

Angular Features

Made for creating modern web applications
Separation of concerns - MVC
Dependency Injection
Testing using Karma and Jasmine
E2E testing with Protractor
Angular CLI standardizes project setup, build, and deploy
Supports performance and SEO optimizations using lazing loading and Angular Universal
Community tooling

Why Angular?

Manage complexity
- Backend API calls
- Validating user input
- Application Navigation
- User/System events
Superior tooling
TypeScript
Enterprise ready

Architecture Overview

Components
Services
Directives
Pipes
Modules

Angular vs AngularJS

Fixed fundamental architecture issues
Replaces controllers with components
Modules to help organize code
TypeScript
Angular-CLI

My First Angular Application

Install the Angular CLI

npm install -g @angular/cli

Create my first Angular application

ng new my-app

Pro Tip: create a folder in your home/root directory called repo and put all your projects there.

What was created?

Use an editor like VS Code to make changes to your code. Using ctrl-shift-P you can configure VS code to open from the command line. If properly configured you can open VS Code using:

code .

Running my application

ng serve

How does it work?

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularFundamentalsDemo</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>

app.component.ts

app.module.ts

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 { }

main.ts

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

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

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

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

Angular Wire-up

Application must be contained in a single module (can have multiple sub-modules)
Angular-CLI generates
- app.module.ts
  - imports
    components
    services
    modules
- main.ts
  - Bootstraps the app.module
- index.html
  - Renders app.component.ts using app-root selector

Modify our application

Create username form

app.component.html

<h1>Enter your username:</h1>
<input type="text" [(ngModel)]="username" />
<button (click)="submit()">Submit</button>
<p>{{message}}</p>

Error: Can't bind to 'ngModel' since it isn't a known property of 'input'. This type of error is telling us that we are using something that Angular hasn't been informed of. This typically means that we forgot to import a module, which we will do next.

Adding the Forms Module

app.module.ts

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

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

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

Angular Build Process

ng build

Build Artifacts

The Angular-CLI builds the application, creates a dist folder, and places artifacts into the folder.

Angular adds the build artifacts automatically

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</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>
  <script type="text/javascript" src="runtime.js"></script>
  <script type="text/javascript" src="polyfills.js">
  </script><script type="text/javascript" src="styles.js"></script>
  <script type="text/javascript" src="vendor.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

Summary

We learned
- Basic features of Angular
- How to create an Angular application
- How Angular wires up my application
- Files created by Angular-CLI

PreviousAngular Fundamentals NextDevelopment Environment Setup

Last updated 5 years ago

What is Angular?

Angular is:

Maintained by Google and the community
Client side framework for creating powerful web applications
Evolved from AngularJS and is continually being improved
Open Source (MIT License)

Documentation

Angular is rarely just "installed", tools like the CLI help us create and configure our applications

QuickStart

The quick-start guide is a great place to start learning how to build your first application

Angular Features

Made for creating modern web applications
Separation of concerns - MVC
Dependency Injection
Testing using Karma and Jasmine
E2E testing with Protractor
Angular CLI standardizes project setup, build, and deploy
Supports performance and SEO optimizations using lazing loading and Angular Universal
Community tooling

Why Angular?

Manage complexity
- Backend API calls
- Validating user input
- Application Navigation
- User/System events
Superior tooling
TypeScript
Enterprise ready

Architecture Overview

Components
Services
Directives
Pipes
Modules

Angular vs AngularJS

Fixed fundamental architecture issues
Replaces controllers with components
Modules to help organize code
TypeScript
Angular-CLI

My First Angular Application

Install the Angular CLI

npm install -g @angular/cli

Create my first Angular application

ng new my-app

Pro Tip: create a folder in your home/root directory called repo and put all your projects there.

What was created?

Use an editor like VS Code to make changes to your code. Using ctrl-shift-P you can configure VS code to open from the command line. If properly configured you can open VS Code using:

code .

Running my application

ng serve

How does it work?

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularFundamentalsDemo</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>

app.component.ts

app.module.ts

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 { }

main.ts

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

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

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

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

Angular Wire-up

Application must be contained in a single module (can have multiple sub-modules)
Angular-CLI generates
- app.module.ts
  - imports
    components
    services
    modules
- main.ts
  - Bootstraps the app.module
- index.html
  - Renders app.component.ts using app-root selector

Modify our application

Create username form

app.component.html

<h1>Enter your username:</h1>
<input type="text" [(ngModel)]="username" />
<button (click)="submit()">Submit</button>
<p>{{message}}</p>

Adding the Forms Module

app.module.ts

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

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

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

Angular Build Process

ng build

Build Artifacts

The Angular-CLI builds the application, creates a dist folder, and places artifacts into the folder.

Angular adds the build artifacts automatically

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</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>
  <script type="text/javascript" src="runtime.js"></script>
  <script type="text/javascript" src="polyfills.js">
  </script><script type="text/javascript" src="styles.js"></script>
  <script type="text/javascript" src="vendor.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

Summary

We learned
- Basic features of Angular
- How to create an Angular application
- How Angular wires up my application
- Files created by Angular-CLI