How To Develop Web Applications With Angular?

Why not learn this popular web framework for autumn.? Then get ahead in 2020.  If you want to know more take a look at our complete training course in Angular.Angular

Contents

  1.  Why Bother with Angular
  2. How it Works
  3. Create a Simple Application
  4. Other Bits

Why Bother with Angular?

Over the last 15 years I have developed in Classic ASP, then ASP.Net Web Forms & MVC. Along the way I have touched HTML, CSS and JavaScript. The Angular Framework is the current solution to developing enterprise data driven applications. It uses open source JavaScript libraries to build web frontends. These can work on any operating system: Windows, Linux or Apple’s OS.  These are my thoughts based but please add your comments below.JavaScript Evolution

How it Works

What is Angular?

  • A client-side library to make it easier to develop large-scale rich Web apps
  • Angular is an evolution of AngularJS
  • Angular 8 was recently released
  • We will look at the popular Angular 6 but later versions share many features

How does Angular help?

  • Client-side data binding, so that the UI changes automatically in response to user actions
  • Keeps your views in sync with your data, without the need for DOM manipulation
  • Simplifies testing, e.g. via Jasmine, Karma, and Protractor
  • Supports dependency injection and services, to simplify common Web tasks such as getting data into your app

Angular 2 is a complete re-write of AngularJS

  • This has been extremely controversial!
  • But on reflection, it’s probably the right idea

Some key differences

  • Angular 2 typically uses TypeScript (much better than JavaScript)
  • Angular 2 apps comprise component classes (not controllers)
  • Angular 2 databinding is 1-way by default (not 2-way)
  • Angular 2 rendering performance is much better

Features in Angular 6

  • Data binding
  • Conditional / repetitive rendering
  • Routing
  • Service providers / factories
  • Hierarchies of components
  • REST integration
  • Web Sockets integration

Create a Simple Application

We show you how to implement a simple Angular application in TypeScript

  • TypeScript is the language of choice for implementing Angular applications
  • Angular itself is implemented in TypeScript

The application requires 3 files:

  • html – HTML page
  • ts – TypeScript code
  • css – Simple stylesheet

Here’s the HTML page:

<!DOCTYPE html>
<html>
<head>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
  <script src="https://unpkg.com/zone.js@0.6.26"></script>
  <script src="https://unpkg.com/typescript@2.0.0"></script>
  <script src="https://unpkg.com/systemjs@0.19.40/dist/system.src.js"></script>
  <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {emitDecoratorMetadata: true},
      map: { … … … },
      packages: { … … … }
    });
    System.import('main.ts');
  </script>
</head>
<body>
  <message>Loading...</message>
</body>
</html>

Here’s the TypeScript code that defines a Component. The <script> tags load various JavaScript files from https://unpkg.com/

import {Component}              from '@angular/core';
import {NgModule}               from '@angular/core';
import {BrowserModule}          from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 @Component({
    selector: 'message',
    template: `
<h1>Angular2 TypeScript Example</h1>
<div>Greetings {{name}}!</div>`
})
class MyComponent {
    name: string;
    constructor() {
        this.name = 'Andy';
    }
}
@NgModule({
    imports: [BrowserModule],
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
 

Overview of Angular Components

  • Components are the main ingredient in Angular apps
  • An app must have at least one component – the root component
  • More typically, apps usually have a hierarchy of components
  • You can implement components in various languages
    • TypeScript
    • ECMAScript 6 or ECMAScript 5 or above

How to create a component

  • Import Angular Modules
  • Define a class and decorate it with @Component
  • In the Component define the
    • Selector
    • View
    • Logic
  • Enclose our Component in a Module
  • Bootstrap the Angular App

Starting an HTTP Server to Host the App

  • To run any Web application, you need an HTTP server
  • npm provides live-server and http-server.
  • live-server reloads Web pages automatically when you save a file.
  • We’ll use liveserver to run all our examples.
  • Install live-server or http-server using the npm
  • Start the server in your project root folder:

 Viewing the App in a Browser

  • Open a browser and navigate to the following URL:
    • http://localhost:8080/index.html
  • If you edit any files (and you’re using live-server), the page will automatically update in the browser
  • Here’s what the app looks like in the browserBrowser

Thanks to Andy Olsen for his excellent course slides

David Ringsell TalkIT 2019©

 

Scroll to Top