NUSISS-Dipsa48: A TypeScript repository from kenken64

Hello World

Your First App

Basic

String interpolation
Property Binding
Event Binding
Component to component comm
Directives
Template reference

Forms

Define an Angular form
Capture form data
Validate form
Display error message

Material UI

Buttons
Form field
Radio button
Select/Drop down
Checkboxes
Checkbox with Multiple values
Date picker / time picker
Affordance , hint and error messages

Service and Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// expected output: [object Promise]

Services are a great way to share information among classes that don't know each other. You'll create a MessageService and inject it in two places:
- in HeroService which uses the service to send a message
- in MessagesComponent which displays that message

HttpClient

Most front-end applications communicate with backend services over the HTTP protocol. Modern browsers support two different APIs for making HTTP requests: the XMLHttpRequest interface and the fetch() API.

Routing

Overview The browser is a familiar model of application navigation:

Enter a URL in the address bar and the browser navigates to a corresponding page. Click links on the page and the browser navigates to a new page. Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.

CRUD

An example on how Angular perform create, read, update and delete functionality

Mock Server Setup

Install a json-server. You can do it globally (-g) with npm:

npm install -g json-server

Create a JSON file with mock data

{
    "author" : [ {
        "id": 1,
        "age" : 16,
        "name" : "Andy"
      }, 
      {
        "id": 2,
        "age" : 22,
        "name" : "Lisa"
      }
    ],
    "comments" : [ 
        {
        "id": 1,
        "date" : "03-18-2016",
        "message" : "Nice!"
      },
      {
        "id": 2,
        "date" : "06-21-2017",
        "message" : "Great view!"
      }
    ],
    "pictures" : [
      {
        "id": 1,
        "author" : "Lisa",
        "description" : "A wonderful view of nature",
        "img" : "https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/8V46UZCS0V.jpg",
        "title" : "A natural view"
      },
      {
        "id": 2,
        "author" : "Andy",
        "description" : "Seaside sunset",
        "img" : "https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/8V46UZCS0V.jpg",
        "title" : "Landscape view"
      }
    ]
  }

Start the JSON server

json-server --watch myJSONfile.json

Available REST API endpoint

http://localhost:3000/pictures
http://localhost:3000/author
http://localhost:3000/comments

PWA

Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code. Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (also known as a PWA).

ng add @angular/pwa --project *project-name*

https://www.npmjs.com/package/http-server

http-server -p 8080 -c-1 dist/<project-name>

kenken64/NUSISS-Dipsa48