francesco/udemy.angular
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finish Project basic

Browse Source
This commit is contained in:
francesco 2021-12-13 22:57:08 +01:00
parent 41477dc29a
commit 3409bdb858
17 changed files with 171 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
project/src/app/app.component.html
View File

@ -1,7 +1,9 @@
<app-header></app-header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>I'm working!</h2>
<app-recipes></app-recipes>
<app-shopping-list></app-shopping-list>
</div>
</div>
</div>

6
project/src/app/app.module.ts
View File

@ -4,9 +4,6 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipesListComponent } from './recipes/recipes-list/recipes-list.component';
import { RecipesDetailComponent } from './recipes/recipes-detail/recipes-detail.component';
import { RecipesItemComponent } from './recipes/recipe-list/recipes-item/recipes-item.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
@ -18,9 +15,6 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed
AppComponent,
HeaderComponent,
RecipesComponent,
RecipesListComponent,
RecipesDetailComponent,
RecipesItemComponent,
RecipeListComponent,
RecipeDetailComponent,
RecipeItemComponent,

23
project/src/app/header/header.component.html
View File

@ -1 +1,22 @@
<p>header works!</p>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Recipe Book</a>
</div>
<div class="navbar-default">
<ul class="nav navbar-nav">
<li><a href="#">Recipe</a></li>
<li><a href="#">Shopping List</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button">Manage<span Class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>/li>href="#">Saving data</a></li>
<li><a href="#">Fetching data</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

37
project/src/app/recipes/recipe-detail/recipe-detail.component.html
View File

@ -1 +1,36 @@
<p>recipe-detail works!</p>
<div class="row">
<div class="col-xs-12">
<img src="" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Recipe Name</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="btn-group">
<button
type="button"
class="btn btn-primary dropdown-toggle">
Manage Recipe <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">To Shopping List</a></li>
<li><a href="#">Edit Recipe</a></li>
<li><a href="#">Delete Recipe</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Description
</div>
</div>
<div class="row">
<div class="col-xs-12">
Ingredients
</div>
</div>

2
project/src/app/recipes/recipe-detail/recipe-detail.component.ts
View File

@ -9,7 +9,7 @@ export class RecipeDetailComponent implements OnInit {
constructor() { }
ngOnInit(): void {
ngOnInit() {
}
}

4
project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
View File

@ -1 +1,3 @@
<p>recipe-item works!</p>
<p>
recipe-item works!
</p>

2
project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
View File

@ -9,7 +9,7 @@ export class RecipeItemComponent implements OnInit {
constructor() { }
ngOnInit(): void {
ngOnInit() {
}
}

29
project/src/app/recipes/recipe-list/recipe-list.component.html
View File

@ -1 +1,28 @@
<p>recipe-list works!</p>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New Recipe</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<a
href="#"
class="list-group-item clearfix"
*ngFor="let recipe of recipes">
<div class="pull-left">
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
<p class="list-group-item-text">{{ recipe.description }}</p>
</div>
<span class="pull-right">
<img
[src]="recipe.imagePath"
alt="{{ recipe.name }}"
class="img-responsive"
style="max-height: 50px;">
</span>
</a>
<app-recipe-item></app-recipe-item>
</div>
</div>

8
project/src/app/recipes/recipe-list/recipe-list.component.ts
View File

@ -1,15 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { Recipe } from '../recipe.model';
@Component({
selector: 'app-recipe-list',
templateUrl: './recipe-list.component.html',
styleUrls: ['./recipe-list.component.css']
})
export class RecipeListComponent implements OnInit {
recipes: Recipe[] = [
new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
];
constructor() { }
ngOnInit(): void {
ngOnInit() {
}
}

11
project/src/app/recipes/recipe.model.ts Normal file
View File

@ -0,0 +1,11 @@
export class Recipe {
public name: string;
public description: string;
public imagePath: string;
constructor(name: string, desc: string, imagePath: string) {
this.name = name;
this.description = desc;
this.imagePath = imagePath;
}
}

9
project/src/app/recipes/recipes.component.html
View File

@ -1 +1,8 @@
<p>recipes works!</p>
<div class="row">
<div class="col-md-5">
<app-recipe-list></app-recipe-list>
</div>
<div class="col-md-7">
<app-recipe-detail></app-recipe-detail>
</div>
</div>

2
project/src/app/recipes/recipes.component.ts
View File

@ -9,7 +9,7 @@ export class RecipesComponent implements OnInit {
constructor() { }
ngOnInit(): void {
ngOnInit() {
}
}

4
project/src/app/shared/ingredient.model.ts Normal file
View File

@ -0,0 +1,4 @@
export class Ingredient {
// short form that sets the property and asign the value to them
constructor(public name: string, public amount: number) {}
}

24
project/src/app/shopping-list/shopping-edit/shopping-edit.component.html
View File

@ -1 +1,23 @@
<p>shopping-edit works!</p>
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-sm-5 form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="col-sm-2 form-group">
<label for="amount">Amount</label>
<input type="number" id="amount" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success" type="submit">Add</button>
<button class="btn btn-danger" type="button">Delete</button>
<button class="btn btn-primary" type="button">Clear</button>
</div>
</div>
</form>
</div>
</div>

2
project/src/app/shopping-list/shopping-edit/shopping-edit.component.ts
View File

@ -9,7 +9,7 @@ export class ShoppingEditComponent implements OnInit {
constructor() { }
ngOnInit(): void {
ngOnInit() {
}
}

16
project/src/app/shopping-list/shopping-list.component.html
View File

@ -1 +1,15 @@
<p>shopping-list works!</p>
<div class="row">
<div class="col-xs-10">
<app-shopping-edit></app-shopping-edit>
<hr>
<ul class="list-group">
<a
class="list-group-item"
style="cursor: pointer"
*ngFor="let ingredient of ingredients"
>
{{ ingredient.name }} ({{ ingredient.amount }})
</a>
</ul>
</div>
</div>

8
project/src/app/shopping-list/shopping-list.component.ts
View File

@ -1,15 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { Ingredient } from '../shared/ingredient.model';
@Component({
selector: 'app-shopping-list',
templateUrl: './shopping-list.component.html',
styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {
ingredients: Ingredient[] = [
new Ingredient('Apples', 5),
new Ingredient('Tomatoes', 10),
];
constructor() { }
ngOnInit(): void {
ngOnInit() {
}
}