https://github.com/kenken64/nusiss-dipsa48
This is an angular code base for NUS ISS Dipsa48
https://github.com/kenken64/nusiss-dipsa48
Last synced: about 2 months ago
JSON representation
This is an angular code base for NUS ISS Dipsa48
- Host: GitHub
- URL: https://github.com/kenken64/nusiss-dipsa48
- Owner: kenken64
- Created: 2019-08-21T03:15:58.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T22:23:25.000Z (over 2 years ago)
- Last Synced: 2023-03-03T08:47:19.911Z (over 2 years ago)
- Language: TypeScript
- Homepage:
- Size: 5.78 MB
- Stars: 2
- Watchers: 2
- Forks: 24
- Open Issues: 197
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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/
```