The angular-summit-workshop from zhaimobile

Starting Up a New Project

New Project
```
ng new workshop
```
Change directories
```
cd workshop
```
Start the server
```
ng serve
```
Open a browser to http://localhost:4200

Adding Routes

Open another Terminal in the workshop directory
New "Home" Route
```
ng g r home
```
Add Navigation in workshop.component.html
```
<a [routerLink]="['/home']">Home</a>
```
Add Two More Routes
```
ng g r team
ng g r detail
```
Add an id param to the detail path in walkthrough.component.ts
```
{path: '/detail/:id', component: DetailComponent}
```

Add Navigation to Those Routes

<a [routerLink]="['/team']">Team</a>
<a [routerLink]="['/detail', 1]">Detail</a>

Sharing Services

Generate a new service
```
ng g s shared/team
```

Add a name property to the service

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

@Injectable()
export class TeamService {
  name = "Bulls";
  
  constructor() {}
  
}

Import and Provide the service to workshop.component.ts

import { TeamService } from './shared'

providers: [ROUTER_PROVIDERS, TeamService]

Import and Inject the service into home.component.ts

import { TeamService } from '../shared';

constructor(public team:TeamService) {}

Access a Property on the Service in home.component.html
```
<p>
  {{team.name}}
</p>
```

Import and Inject the Service into team.component.ts

import { TeamService } from '../shared';

constructor(public team:TeamService) {}

Update the Team name on team.component.html

<input type="text" [(ngModel)]="team.name">

Creating a Component

Generate a new Component
```
ng g c shared/card
```

Import the Component and add to team.component.ts

import { TeamService, Card } from '../shared';

Add the CardComponent to the team.component.ts 's directives:[]
```
  directives:[CardComponent],
```
Add the component to the team.component.html template
```
<app-card></app-card>
```

Add style to the component with :host

:host{
  display: flex;
  border: 2px solid black;
}

Move the input inside the card component in team.component.html

<app-card>
  <input type="text" [(ngModel)]="team.name">
</app-card>

Handle content with <ng-content> in card.component.html
```
<ng-content></ng-content>
```

Looping Through Data

Add an array of people to the team.service.ts

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

@Injectable()
export class TeamService {
  name = "Bulls";

  people = [
    {name: 'Susan', id: Math.random()},
    {name: 'Anne', id: Math.random()},
    {name: 'John', id: Math.random()},
    {name: 'Mindy', id: Math.random()},
    {name: 'Ben', id: Math.random()},
    {name: 'Jordan', id: Math.random()},
    {name: 'Mike', id: Math.random()}
  ];

  constructor() {}

}

Create Multiple Components using *ngFor on team.component.html.

<app-card *ngFor="let person of team.people">
  <input type="text" [(ngModel)]="person.name">
</app-card>

Add the ROUTER_DIRECTIVES to team.component.ts

import {ROUTER_DIRECTIVES} from '@angular/router';


directives:[CardComponent, ROUTER_DIRECTIVES],

Add a [routerLink] to each component and link to the person.id

<app-card *ngFor="let person of team.people">
  <input type="text" [(ngModel)]="person.name">
  <a [routerLink]="['/detail', person.id]">Details</a>
</app-card>

Add the OnActivate LifeCycle hook to detail.component.ts

import { Component, OnInit } from '@angular/core';
import {OnActivate, RouteSegment} from '@angular/router';
import {TeamService} from '../shared';

@Component({
  moduleId: module.id,
  selector: 'app-detail',
  templateUrl: 'detail.component.html',
  styleUrls: ['detail.component.css']
})
export class DetailComponent implements OnInit, OnActivate {
  routerOnActivate(curr:RouteSegment):void {

  }

  constructor(public team:TeamService) {}

  ngOnInit() {
  }

}

Find the person by looking up the id in the people

  person;

  routerOnActivate(curr:RouteSegment):void {
    const id = curr.getParam('id');

    this.person = this.team.people.find(person =>
      person.id === +id
    );
  }

Render out the person in detail.component.html

<h2>{{person.name}}</h2>
<h3>{{person.id}}</h3>

zhaimobile / angular-summit-workshop Goto Github PK

angular-summit-workshop's Introduction

Starting Up a New Project

Adding Routes

Sharing Services

Creating a Component

Looping Through Data

angular-summit-workshop's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent