Utilizing the Angular CLI, I have configured this project with the standard folder layout. My goal is to practice reading a JSON file from src/app/assets/items.json and then using it to display these items in the HTML.
items.json:
{
"results": [
"Item 1",
"Item 2",
]
}
app.service.ts located in src/app/:
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
// Importing required RxJs methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class AppService {
private greetUrl = 'api/Hello';
// HTTP resolved using constructor
constructor(private _http: Http) { }
findJSON(): Observable<any> {
return this._http.get('assets/items.json').map((response: Response) => {
return response.json();
});
}
sayHello(): Observable<any> {
return this._http.get(this.greetUrl).map((response: Response) => {
return response.text();
});
}
}
and app.component.ts found in src/app:
import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { AppService } from './app.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
greetings = '';
itemsjson : string;
constructor(private _appService: AppService) { }
ngOnInit(): void {
this._appService.findJSON()
.subscribe(
result => {
this.itemsjson = result;
}
);
}
}
and app.component.html within src/app:
<html lang="en">
<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
<head>
<meta charset="utf-8">
<title>Yik-Yak Clone</title>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="../" class="navbar-brand">Yik-Yak Clone</a>
</div>
</div>
</div>
<!-- Containers
================================================== -->
<div class = "container">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="jumbotron">
<h1>{{itemsjson}}</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Containers
================================================== -->
<div class = "container">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="jumbotron">
<h1>{{itemsjson}}</h1>
</div>
</div>
</div>
</div>
</div>
<!--
================================================== -->
<div class = "container">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="jumbotron">
<h1>{{itemsjson}}</h1>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="navbar-head">
<div class = "col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control input-lg" type="text" id="inputLarge">
</div>
</div>
<div class = "navbar-brand">
<div class="col-sm-2">
<div class="form-group">
<button type="submit" class="btn btn-primary">greetings</button>
</div>
</div>
</div>
<div class = "col-sm-1"></div>
</div>
</div>
</nav>
</body>
</html>
Based on my research so far, everything seems to indicate that all components and logic are set up correctly.