Skip to content

Commit a2c2712

Browse files
AndrewJBatemanAndrewJBateman
committed
first commit
0 parents  commit a2c2712

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+12686
-0
lines changed

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎.gitignore

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
8+
# dependencies
9+
/node_modules
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
.c9/
16+
*.launch
17+
.settings/
18+
*.sublime-workspace
19+
20+
# IDE - VSCode
21+
.vscode/*
22+
!.vscode/settings.json
23+
!.vscode/tasks.json
24+
!.vscode/launch.json
25+
!.vscode/extensions.json
26+
27+
# misc
28+
/.sass-cache
29+
/connect.lock
30+
/coverage
31+
/libpeerconnection.log
32+
npm-debug.log
33+
yarn-error.log
34+
testem.log
35+
/typings
36+
37+
# System Files
38+
.DS_Store
39+
Thumbs.db

‎.vs/Angular7-API-project/v15/.suo

10 KB
Binary file not shown.

‎.vs/VSWorkspaceState.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"ExpandedNodes": [
3+
""
4+
],
5+
"PreviewInSolutionExplorer": false
6+
}

‎.vs/slnx.sqlite

72 KB
Binary file not shown.

‎.vscode/launch.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "node",
9+
"request": "launch",
10+
"name": "Iniciar programa",
11+
"program": "${workspaceFolder}\\serve",
12+
"preLaunchTask": "tsc: build - tsconfig.json",
13+
"outFiles": [
14+
"${workspaceFolder}/dist/out-tsc/**/*.js"
15+
]
16+
}
17+
]
18+
}

‎.vscode/settings.json

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎README.md

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# Angular API Project
2+
3+
* App using a DataService with httpClient to get json data from an external API.
4+
5+
*** Note: to open web links in a new window use: _ctrl+click on link_**
6+
7+
## Table of contents
8+
9+
* [General info](#general-info)
10+
* [Screenshots](#screenshots)
11+
* [Technologies](#technologies)
12+
* [Setup](#setup)
13+
* [Features](#features)
14+
* [Status](#status)
15+
* [Inspiration](#inspiration)
16+
* [Contact](#contact)
17+
18+
## General info
19+
20+
* Routing module allows user to navigate between Home, About and Contact pages.
21+
22+
* API json/image data displayed: firstname, lastname and avatar.
23+
24+
* Angular FormBuilder used to allow user to submit a form with name and message. Form uses validation.
25+
26+
## Screenshots
27+
28+
![Example screenshot](./img/api-info.png).
29+
![Example screenshot](./img/contact-form.png).
30+
31+
## Technologies
32+
33+
* [Angular v7.2.13](https://angular.io/) & [Angular CLI v7.3.8](https://cli.angular.io/).
34+
35+
* [RxJS Library v6.4.0](https://angular.io/guide/rx-library) used to [subscribe](http://reactivex.io/documentation/operators/subscribe.html) to the API data [observable](http://reactivex.io/documentation/observable.html).
36+
37+
* [The HttpClient in @angular/common/http](https://angular.io/guide/http) offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.
38+
39+
## Setup
40+
41+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
42+
43+
## Code Examples
44+
45+
* `home.component.ts`
46+
47+
```typescript
48+
import { Component, OnInit } from "@angular/core";
49+
import { DataService } from "../data.service";
50+
51+
@Component({
52+
selector: "app-home",
53+
templateUrl: "./home.component.html",
54+
styleUrls: ["./home.component.scss"]
55+
})
56+
export class HomeComponent implements OnInit {
57+
users: Object;
58+
59+
constructor(private data: DataService) {}
60+
61+
// on init the Dataservice getUsers() function supplies a user array object.
62+
ngOnInit() {
63+
this.data.getUsers().subscribe(data => {
64+
this.users = data;
65+
console.log(this.users);
66+
});
67+
}
68+
}
69+
```
70+
71+
* `data.service.ts`
72+
73+
```typescript
74+
import { Injectable } from "@angular/core";
75+
import { HttpClient } from "@angular/common/http";
76+
77+
@Injectable({
78+
providedIn: "root"
79+
})
80+
export class DataService {
81+
constructor(private http: HttpClient) {}
82+
83+
getUsers() {
84+
return this.http.get("https://reqres.in/api/users");
85+
}
86+
}
87+
```
88+
89+
## Features
90+
91+
* API web link could be changed to get different and more complex data.
92+
93+
## Status & To-Do List
94+
95+
* Status: Simple working app that displays API json data and submits a form.
96+
97+
* To-Do: add functionality.
98+
99+
## Inspiration
100+
101+
* [Gary Simon of Coursetro Tutorial: Angular 7 Tutorial - Learn Angular 7 by Example](https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-Angular-7-by-Example)
102+
103+
## Contact
104+
105+
Created by [ABateman](https://www.andrewbateman.org) - feel free to contact me!

‎angular.json

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"Angular7-API-project": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"prefix": "app",
11+
"schematics": {
12+
"@schematics/angular:component": {
13+
"styleext": "scss"
14+
}
15+
},
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/Angular7-API-project",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": "src/polyfills.ts",
24+
"tsConfig": "src/tsconfig.app.json",
25+
"assets": [
26+
"src/favicon.ico",
27+
"src/assets"
28+
],
29+
"styles": [
30+
"src/styles.scss"
31+
],
32+
"scripts": []
33+
},
34+
"configurations": {
35+
"production": {
36+
"fileReplacements": [
37+
{
38+
"replace": "src/environments/environment.ts",
39+
"with": "src/environments/environment.prod.ts"
40+
}
41+
],
42+
"optimization": true,
43+
"outputHashing": "all",
44+
"sourceMap": false,
45+
"extractCss": true,
46+
"namedChunks": false,
47+
"aot": true,
48+
"extractLicenses": true,
49+
"vendorChunk": false,
50+
"buildOptimizer": true,
51+
"budgets": [
52+
{
53+
"type": "initial",
54+
"maximumWarning": "2mb",
55+
"maximumError": "5mb"
56+
}
57+
]
58+
}
59+
}
60+
},
61+
"serve": {
62+
"builder": "@angular-devkit/build-angular:dev-server",
63+
"options": {
64+
"browserTarget": "Angular7-API-project:build"
65+
},
66+
"configurations": {
67+
"production": {
68+
"browserTarget": "Angular7-API-project:build:production"
69+
}
70+
}
71+
},
72+
"extract-i18n": {
73+
"builder": "@angular-devkit/build-angular:extract-i18n",
74+
"options": {
75+
"browserTarget": "Angular7-API-project:build"
76+
}
77+
},
78+
"test": {
79+
"builder": "@angular-devkit/build-angular:karma",
80+
"options": {
81+
"main": "src/test.ts",
82+
"polyfills": "src/polyfills.ts",
83+
"tsConfig": "src/tsconfig.spec.json",
84+
"karmaConfig": "src/karma.conf.js",
85+
"styles": [
86+
"src/styles.scss"
87+
],
88+
"scripts": [],
89+
"assets": [
90+
"src/favicon.ico",
91+
"src/assets"
92+
]
93+
}
94+
},
95+
"lint": {
96+
"builder": "@angular-devkit/build-angular:tslint",
97+
"options": {
98+
"tsConfig": [
99+
"src/tsconfig.app.json",
100+
"src/tsconfig.spec.json"
101+
],
102+
"exclude": [
103+
"**/node_modules/**"
104+
]
105+
}
106+
}
107+
}
108+
},
109+
"Angular7-API-project-e2e": {
110+
"root": "e2e/",
111+
"projectType": "application",
112+
"prefix": "",
113+
"architect": {
114+
"e2e": {
115+
"builder": "@angular-devkit/build-angular:protractor",
116+
"options": {
117+
"protractorConfig": "e2e/protractor.conf.js",
118+
"devServerTarget": "Angular7-API-project:serve"
119+
},
120+
"configurations": {
121+
"production": {
122+
"devServerTarget": "Angular7-API-project:serve:production"
123+
}
124+
}
125+
},
126+
"lint": {
127+
"builder": "@angular-devkit/build-angular:tslint",
128+
"options": {
129+
"tsConfig": "e2e/tsconfig.e2e.json",
130+
"exclude": [
131+
"**/node_modules/**"
132+
]
133+
}
134+
}
135+
}
136+
}
137+
},
138+
"defaultProject": "Angular7-API-project"
139+
}

‎e2e/protractor.conf.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Protractor configuration file, see link for more information
2+
// https://github.com/angular/protractor/blob/master/lib/config.ts
3+
4+
const { SpecReporter } = require('jasmine-spec-reporter');
5+
6+
exports.config = {
7+
allScriptsTimeout: 11000,
8+
specs: [
9+
'./src/**/*.e2e-spec.ts'
10+
],
11+
capabilities: {
12+
'browserName': 'chrome'
13+
},
14+
directConnect: true,
15+
baseUrl: 'http://localhost:4200/',
16+
framework: 'jasmine',
17+
jasmineNodeOpts: {
18+
showColors: true,
19+
defaultTimeoutInterval: 30000,
20+
print: function() {}
21+
},
22+
onPrepare() {
23+
require('ts-node').register({
24+
project: require('path').join(__dirname, './tsconfig.e2e.json')
25+
});
26+
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27+
}
28+
};

‎e2e/src/app.e2e-spec.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { AppPage } from './app.po';
2+
3+
describe('workspace-project App', () => {
4+
let page: AppPage;
5+
6+
beforeEach(() => {
7+
page = new AppPage();
8+
});
9+
10+
it('should display welcome message', () => {
11+
page.navigateTo();
12+
expect(page.getParagraphText()).toEqual('Welcome to Angular7-API-project!');
13+
});
14+
});

‎e2e/src/app.po.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { browser, by, element } from 'protractor';
2+
3+
export class AppPage {
4+
navigateTo() {
5+
return browser.get('/');
6+
}
7+
8+
getParagraphText() {
9+
return element(by.css('app-root h1')).getText();
10+
}
11+
}

0 commit comments

Comments
 (0)