diff --git a/package-lock.json b/package-lock.json
index 58dae1d..fdedee8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -964,8 +964,7 @@
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
- "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
- "dev": true
+ "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
},
"atob": {
"version": "2.1.1",
@@ -1120,6 +1119,22 @@
"integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
"dev": true
},
+ "backendless": {
+ "version": "4.4.4",
+ "resolved": "https://registry.npmjs.org/backendless/-/backendless-4.4.4.tgz",
+ "integrity": "sha512-LhNT6cKwLWaVjiIrvWFMlMscj/ik9KG9e1C/6R5DPMXXSP4VpeOkb9ezqlFm0h4jlIOMXuhvjmcJlzWuOTw7DQ==",
+ "requires": {
+ "backendless-request": "0.0.11"
+ }
+ },
+ "backendless-request": {
+ "version": "0.0.11",
+ "resolved": "https://registry.npmjs.org/backendless-request/-/backendless-request-0.0.11.tgz",
+ "integrity": "sha512-dCph0iqwxl3AniJzb5KubZlVdUsqU2fxIjyeFq3un9OndScE8RDpUYG+PaI7q2FPBV4v03E4jenTa53IXjJdvw==",
+ "requires": {
+ "form-data": "2.3.2"
+ }
+ },
"backo2": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -1851,7 +1866,6 @@
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
"integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
- "dev": true,
"requires": {
"delayed-stream": "1.0.0"
}
@@ -2415,8 +2429,7 @@
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
- "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
- "dev": true
+ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
},
"delegates": {
"version": "1.0.0",
@@ -3508,7 +3521,6 @@
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz",
"integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
- "dev": true,
"requires": {
"asynckit": "0.4.0",
"combined-stream": "1.0.6",
@@ -6272,14 +6284,12 @@
"mime-db": {
"version": "1.33.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
- "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
- "dev": true
+ "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ=="
},
"mime-types": {
"version": "2.1.18",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
"integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
- "dev": true,
"requires": {
"mime-db": "1.33.0"
}
diff --git a/package.json b/package.json
index 1aea5fb..44e06ce 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
+ "backendless": "^4.4.4",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
diff --git a/src/app/add-new-person/add-new-person.component.css b/src/app/add-new-person/add-new-person.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/add-new-person/add-new-person.component.html b/src/app/add-new-person/add-new-person.component.html
new file mode 100644
index 0000000..6f36dbf
--- /dev/null
+++ b/src/app/add-new-person/add-new-person.component.html
@@ -0,0 +1,33 @@
+
+
+
+
+
diff --git a/src/app/add-new-person/add-new-person.component.spec.ts b/src/app/add-new-person/add-new-person.component.spec.ts
new file mode 100644
index 0000000..dcff3b8
--- /dev/null
+++ b/src/app/add-new-person/add-new-person.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddNewPersonComponent } from './add-new-person.component';
+
+describe('AddNewPersonComponent', () => {
+ let component: AddNewPersonComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AddNewPersonComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AddNewPersonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/add-new-person/add-new-person.component.ts b/src/app/add-new-person/add-new-person.component.ts
new file mode 100644
index 0000000..ca5c7c2
--- /dev/null
+++ b/src/app/add-new-person/add-new-person.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Person, PersonsService } from '../persons.service';
+
+@Component({
+ selector: 'app-add-new-person',
+ templateUrl: './add-new-person.component.html',
+ styleUrls: ['./add-new-person.component.css']
+})
+export class AddNewPersonComponent implements OnInit {
+
+ @ViewChild('closeBtn') closeBtn: ElementRef;
+
+ public newPerson: Person;
+
+ constructor(private personsService: PersonsService) {
+ }
+
+ ngOnInit() {
+ this.newPerson = new Person();
+ }
+
+ onSubmit() {
+ if (this.newPerson.name && this.newPerson.address) {
+ this.personsService.add(this.newPerson)
+ .then(() => {
+ this.newPerson = new Person();
+ });
+
+ this.closeBtn.nativeElement.click();
+
+ } else {
+ alert('need to fill all the fields');
+ }
+ }
+}
+
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fa2706a..6465aa5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,11 @@
-
-
-
- Welcome to {{ title }}!
-
-
-
-Here are some links to help you start:
-
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..3699291 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,16 +1,27 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import Backendless from 'backendless';
+import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
+import { PersonsListComponent } from './persons-list/persons-list.component';
+import { AddNewPersonComponent } from './add-new-person/add-new-person.component';
+
+Backendless.initApp(environment.backendless.APP_ID, environment.backendless.API_KEY);
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ PersonsListComponent,
+ AddNewPersonComponent
],
imports: [
- BrowserModule
+ BrowserModule,
+ FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
-export class AppModule { }
+export class AppModule {
+}
diff --git a/src/app/persons-list/persons-list.component.css b/src/app/persons-list/persons-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/persons-list/persons-list.component.html b/src/app/persons-list/persons-list.component.html
new file mode 100644
index 0000000..df78d22
--- /dev/null
+++ b/src/app/persons-list/persons-list.component.html
@@ -0,0 +1,8 @@
+
+
+ -
+
{{person.name}}
+ {{person.address}}
+
+
+
diff --git a/src/app/persons-list/persons-list.component.spec.ts b/src/app/persons-list/persons-list.component.spec.ts
new file mode 100644
index 0000000..6975bad
--- /dev/null
+++ b/src/app/persons-list/persons-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonsListComponent } from './persons-list.component';
+
+describe('PersonsListComponent', () => {
+ let component: PersonsListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PersonsListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PersonsListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/persons-list/persons-list.component.ts b/src/app/persons-list/persons-list.component.ts
new file mode 100644
index 0000000..18dca0c
--- /dev/null
+++ b/src/app/persons-list/persons-list.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Person, PersonsService } from '../persons.service';
+
+@Component({
+ selector: 'app-persons-list',
+ templateUrl: './persons-list.component.html',
+ styleUrls: ['./persons-list.component.css']
+})
+export class PersonsListComponent implements OnInit {
+
+ constructor(private personsService: PersonsService) {
+ }
+
+ ngOnInit() {
+ this.personsService.loadAll();
+ }
+
+ get persons(): Person[] {
+ return this.personsService.persons;
+ }
+}
+
diff --git a/src/app/persons.service.spec.ts b/src/app/persons.service.spec.ts
new file mode 100644
index 0000000..038b7cb
--- /dev/null
+++ b/src/app/persons.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PersonsService } from './persons.service';
+
+describe('PersonsService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [PersonsService]
+ });
+ });
+
+ it('should be created', inject([PersonsService], (service: PersonsService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/src/app/persons.service.ts b/src/app/persons.service.ts
new file mode 100644
index 0000000..8d09c87
--- /dev/null
+++ b/src/app/persons.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import Backendless from 'backendless';
+
+export class Person {
+ public name: string;
+ public address: string;
+}
+
+const PersonsStore = Backendless.Data.of(Person);
+
+@Injectable({
+ providedIn: 'root'
+})
+export class PersonsService {
+
+ public persons: Person[] = [];
+
+ loadAll() {
+ PersonsStore.find().then((persons: Person[]) => {
+ this.persons = persons;
+ });
+ }
+
+ add(newPerson: Person) {
+ return PersonsStore.save(newPerson).then((savedPerson: Person) => {
+ this.persons.push(savedPerson);
+ });
+ }
+}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 3612073..dc227c1 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,8 @@
export const environment = {
- production: true
+ production: true,
+
+ backendless: {
+ APP_ID: 'C7AAAD50-D4AF-FC0C-FF2C-3296EC092800',
+ API_KEY: 'AE50EECB-67A4-435D-FFCC-C93A14C11800'
+ }
};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 012182e..ec30306 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,7 +3,12 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false
+ production: false,
+
+ backendless: {
+ APP_ID: 'C7AAAD50-D4AF-FC0C-FF2C-3296EC092800',
+ API_KEY: 'AE50EECB-67A4-435D-FFCC-C93A14C11800'
+ }
};
/*
diff --git a/src/index.html b/src/index.html
index e385f1c..565a0da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,8 +7,19 @@
+
+
+
+
-
+