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

https://angular.io/

https://github.com/angular/angular

QuickStart

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

https://angular.io/guide/quickstart

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 6 years ago

hashtagWhat is Angular?

hashtagAngular is:

hashtagDocumentation

hashtagQuickStart

hashtagAngular Features

hashtagWhy Angular?

hashtagArchitecture Overview

hashtagAngular vs AngularJS

hashtagMy First Angular Application

hashtagInstall the Angular CLI

hashtagCreate my first Angular application

hashtagWhat was created?

hashtagRunning my application

hashtagHow does it work?

hashtagindex.html

hashtagapp.component.ts

hashtagapp.module.ts

hashtagmain.ts

hashtagAngular Wire-up

hashtagModify our application

hashtagCreate username form

hashtagAdding the Forms Module

hashtagAngular Build Process

hashtagBuild Artifacts

hashtagAngular adds the build artifacts automatically

hashtagSummary

What is Angular?

Angular is:

Documentation

QuickStart

Angular Features

Why Angular?

Architecture Overview

Angular vs AngularJS

My First Angular Application

Install the Angular CLI

Create my first Angular application

What was created?

Running my application

How does it work?

index.html

app.component.ts

app.module.ts

main.ts

Angular Wire-up

Modify our application

Create username form

Adding the Forms Module

Angular Build Process

Build Artifacts

Angular adds the build artifacts automatically

Summary