Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
261 additions
and
34 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<p> | ||
<button type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-primary">Add New Person</button> | ||
</p> | ||
|
||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" | ||
aria-hidden="true"> | ||
<div class="modal-dialog" role="document"> | ||
<div class="modal-content"> | ||
<div class="modal-header"> | ||
<h5 class="modal-title" id="exampleModalLabel">Add new person</h5> | ||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | ||
<span aria-hidden="true">×</span> | ||
</button> | ||
</div> | ||
<div class="modal-body"> | ||
<form> | ||
<div class="form-group"> | ||
<label>Person Name</label> | ||
<input name="name" [(ngModel)]="newPerson.name" class="form-control" placeholder="enter name"> | ||
</div> | ||
<div class="form-group"> | ||
<label>Person Address</label> | ||
<input name="address" [(ngModel)]="newPerson.address" class="form-control" placeholder="enter address"> | ||
</div> | ||
</form> | ||
</div> | ||
<div class="modal-footer"> | ||
<button #closeBtn type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | ||
<button type="button" (click)="onSubmit()" class="btn btn-primary">Save</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<AddNewPersonComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ AddNewPersonComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(AddNewPersonComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
} | ||
} | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,11 @@ | ||
<!--The content below is only a placeholder and can be replaced.--> | ||
<div style="text-align:center"> | ||
<h1> | ||
Welcome to {{ title }}! | ||
</h1> | ||
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> | ||
</div> | ||
<h2>Here are some links to help you start: </h2> | ||
<ul> | ||
<li> | ||
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> | ||
</li> | ||
<li> | ||
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> | ||
</li> | ||
<li> | ||
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> | ||
</li> | ||
</ul> | ||
<div class="container"> | ||
<div class="header"> | ||
<h3> | ||
Backendless Angular Addresses Book | ||
</h3> | ||
</div> | ||
|
||
<app-add-new-person></app-add-new-person> | ||
|
||
<app-persons-list></app-persons-list> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 { | ||
} |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<ul class="list-group"> | ||
<ul class="list-group"> | ||
<li *ngFor="let person of persons" class="list-group-item"> | ||
<div>{{person.name}}</div> | ||
<div class="text-muted small">{{person.address}}</div> | ||
</li> | ||
</ul> | ||
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<PersonsListComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ PersonsListComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(PersonsListComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
})); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<Person>().then((persons: Person[]) => { | ||
this.persons = persons; | ||
}); | ||
} | ||
|
||
add(newPerson: Person) { | ||
return PersonsStore.save<Person>(newPerson).then((savedPerson: Person) => { | ||
this.persons.push(savedPerson); | ||
}); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters