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

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

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

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 FundamentalsNextDevelopment Environment Setup

Last updated