Angular Code

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RecipesComponent } from './recipes/recipes.component';

import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { RecipeStartComponent } from './recipes/recipe-start/recipe-
start.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-
detail.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-
edit.component';
const appRoutes: Routes = [

{ path: '', redirectTo: '/recipes', pathMatch: 'full' },
{ path: 'recipes', component: RecipesComponent, children: [
{ path: '', component: RecipeStartComponent },
{ path: 'new', component: RecipeEditComponent },
{ path: ':id', component: RecipeDetailComponent },
{ path: ':id/edit', component: RecipeEditComponent },
] },
{ path: 'shopping-list', component: ShoppingListComponent },
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
<app-header (featureSelected)="onNavigate($event)"></app-header>
<div class="container">
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
loadedFeature = 'recipe';
onNavigate(feature: string) {
this.loadedFeature = feature;
}
}
import { BrowserModule } from '@angular/platform-browser';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

import { HeaderComponent } from './header/header.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-
list.component';
detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-
item.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-
edit.component';
import { DropdownDirective } from './shared/dropdown.directive';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppRoutingModule } from './app-routing.module';
start.component';
edit.component';
import { RecipeService } from './recipes/recipe.service';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RecipesComponent,
RecipeListComponent,
RecipeDetailComponent,
RecipeItemComponent,
ShoppingListComponent,
ShoppingEditComponent,
DropdownDirective,
RecipeStartComponent,
RecipeEditComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
AppRoutingModule
],
providers: [ShoppingListService, RecipeService],
bootstrap: [AppComponent]
})
export class AppModule { }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular - The Complete Guide</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

import { Routes, RouterModule } from '@angular/router';
start.component';
detail.component';
edit.component';
const appRoutes: Routes = [

{ path: '', redirectTo: '/recipes', pathMatch: 'full' },
{ path: 'recipes', component: RecipesComponent, children: [
{ path: '', component: RecipeStartComponent },
{ path: 'new', component: RecipeEditComponent },
{ path: ':id', component: RecipeDetailComponent },
{ path: ':id/edit', component: RecipeEditComponent },
] },
{ path: 'shopping-list', component: ShoppingListComponent },
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
<div class="row">
<div class="col-xs-12">
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
<div class="row">
<button
type="submit"
class="btn btn-success"
[disabled]="!recipeForm.valid">Save</button>
<button type="button" class="btn btn-danger"
(click)="onCancel()">Cancel</button>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
id="name"
formControlName="name"
class="form-control">
</div>
</div>
</div>
<div class="row">
<label for="imagePath">Image URL</label>
<input
type="text"
id="imagePath"
formControlName="imagePath"
class="form-control"
#imagePath>
</div>
</div>
</div>
<div class="row">
<img [src]="imagePath.value" class="img-responsive">
</div>
</div>
<div class="row">
<label for="description">Description</label>
<textarea
type="text"
id="description"
formControlName="description"
rows="6"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12" formArrayName="ingredients">
<div
class="row"
*ngFor="let ingredientCtrl of recipeForm.get('ingredients').controls;
let i = index"
[formGroupName]="i"
style="margin-top: 10px;">
<input
type="text"
formControlName="name">
</div>
<input
type="number"
formControlName="amount">
</div>
<button
type="button"
class="btn btn-danger"
(click)="onDeleteIngredient(i)">X</button>
</div>
</div>
<hr>
<div class="row">
<button
type="button"
class="btn btn-success"
(click)="onAddIngredient()">Add Ingredient</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

Angular Code

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Angular Code

Enviado por

Direitos autorais:

Formatos disponíveis

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { RecipesComponent } from './recipes/recipes.component';

const appRoutes: Routes = [

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

<meta name="viewport" content="width=device-width, initial-scale=1">

import { NgModule } from '@angular/core';

const appRoutes: Routes = [

Você também pode gostar