{"id":16257351,"url":"https://github.com/johnlindquist/angular-summit-workshop","last_synced_at":"2026-01-31T22:32:33.673Z","repository":{"id":136548666,"uuid":"58934352","full_name":"johnlindquist/angular-summit-workshop","owner":"johnlindquist","description":"workshop instructions","archived":false,"fork":false,"pushed_at":"2016-05-16T20:59:59.000Z","size":6,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T09:56:54.072Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnlindquist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-16T13:26:58.000Z","updated_at":"2016-05-16T19:57:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc78112a-4fd3-4440-b341-baf79bb2fd1e","html_url":"https://github.com/johnlindquist/angular-summit-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnlindquist%2Fangular-summit-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnlindquist%2Fangular-summit-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnlindquist%2Fangular-summit-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnlindquist%2Fangular-summit-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnlindquist","download_url":"https://codeload.github.com/johnlindquist/angular-summit-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247852726,"owners_count":21007001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T15:48:00.037Z","updated_at":"2026-01-31T22:32:28.649Z","avatar_url":"https://github.com/johnlindquist.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"### Online Playground\nhttp://plnkr.co/edit/2aIgMzUx7XgZe9EA6upB?p=preview\n\n### Install Specific Version of Angular CLI\n`npm install -g angular-cli@1.0.0-beta.1`\n\n### Starting Up a New Project\n1. New Project\n    \n    ```bash\n    ng new workshop\n    ```\n\n2. Change directories\n    \n    ```\n    cd workshop\n    ```\n\n3. Start the server\n    \n    ```bash\n    ng serve\n    ```\n\n4. Open a browser to http://localhost:4200\n\n\n---\n\n### Adding Routes\n1. Open another Terminal in the `workshop` directory\n2. New \"Home\" Route\n    \n    ```bash\n    ng g r home\n    ```\n\n3. Add Navigation in `workshop.component.html`\n    \n    ```html\n    \u003ca [routerLink]=\"['/home']\"\u003eHome\u003c/a\u003e\n    ```\n\n4. Add Two More Routes\n    \n    ```html\n    ng g r team\n    ng g r detail\n    ```\n    \n5. Add an `id` param to the detail path in `walkthrough.component.ts`\n    \n    ```js\n    {path: '/detail/:id', component: DetailComponent}\n    ```\n     \n6. Add Navigation to Those Routes\n    \n    ```html\n    \u003ca [routerLink]=\"['/team']\"\u003eTeam\u003c/a\u003e\n    \u003ca [routerLink]=\"['/detail', 1]\"\u003eDetail\u003c/a\u003e\n    ``` \n\n\n---\n\n\n### Sharing Services\n1. Generate a new service\n    \n    ``` bash\n    ng g s shared/team\n    ```\n\n2. Add a `name` property to the service `team.service.ts`\n    \n    ```TypeScript\n    import { Injectable } from '@angular/core';\n    \n    @Injectable()\n    export class TeamService {\n      name = \"Bulls\";\n      \n      constructor() {}\n      \n    }\n    ```\n\n2. Import and Provide the service to `workshop.component.ts`\n    \n    ```TypeScript\n    import { TeamService } from './shared'\n    \n    providers: [ROUTER_PROVIDERS, TeamService]\n    ```\n\n3. Import and Inject the service into `home.component.ts`\n    \n    ```TypeScript\n    import { TeamService } from '../shared';\n    \n    constructor(public team:TeamService) {}\n    ```\n\n4. Access a Property on the Service in `home.component.html`\n    \n    ```html\n    \u003cp\u003e\n      {{team.name}}\n    \u003c/p\u003e\n    ```\n\n5. Import and Inject the Service into `team.component.ts`\n    \n    ```js\n    import { TeamService } from '../shared';\n    \n    constructor(public team:TeamService) {}\n    ```\n\n6. Update the Team `name` on `team.component.html`\n    \n    ```html\n    \u003cinput type=\"text\" [(ngModel)]=\"team.name\"\u003e\n    ```\n\n---\n\n### Creating a Component\n1. Generate a new Component\n    \n    ```bash\n    ng g c shared/card\n    ```\n    \n\n2. Import the Component and add to `team.component.ts`\n    \n    ```TypeScript\n    import { TeamService, CardComponent } from '../shared';\n    ```\n\n3. Add the `CardComponent` to the `team.component.ts` 's `directives:[]`\n    \n    ```TypeScript\n      directives:[CardComponent],\n    ```\n\n\n3. Add the component to the `team.component.html` template\n    \n    ```html\n    \u003capp-card\u003e\u003c/app-card\u003e\n    ```\n\n\n4. Add style to the component with `:host`\n    \n    ```css\n    :host{\n      display: flex;\n      border: 2px solid black;\n    }\n    ```\n\n5. Move the input inside the card component in `team.component.html`\n    \n    ```html\n    \u003capp-card\u003e\n      \u003cinput type=\"text\" [(ngModel)]=\"team.name\"\u003e\n    \u003c/app-card\u003e\n    ```\n\n\n6. Handle content with `\u003cng-content\u003e` in `card.component.html`\n    \n    ```html\n    \u003cng-content\u003e\u003c/ng-content\u003e\n    ```\n\n---\n\n### Looping Through Data\n1. Add an array of people to the `team.service.ts` \n\n    ```TypeScript\n    import { Injectable } from '@angular/core';\n    \n    @Injectable()\n    export class TeamService {\n      name = \"Bulls\";\n    \n      people = [\n        {name: 'Susan', id: Math.random()},\n        {name: 'Anne', id: Math.random()},\n        {name: 'John', id: Math.random()},\n        {name: 'Mindy', id: Math.random()},\n        {name: 'Ben', id: Math.random()},\n        {name: 'Jordan', id: Math.random()},\n        {name: 'Mike', id: Math.random()}\n      ];\n    \n      constructor() {}\n    \n    }\n    ```\n\n2. Create Multiple Components using `*ngFor` on `team.component.html`.\n\n    ```html\n    \u003capp-card *ngFor=\"let person of team.people\"\u003e\n      \u003cinput type=\"text\" [(ngModel)]=\"person.name\"\u003e\n    \u003c/app-card\u003e\n    ```\n\n3. Add the `ROUTER_DIRECTIVES` to `team.component.ts`\n\n    ```TypeScript\n    import {ROUTER_DIRECTIVES} from '@angular/router';\n    \n    \n    directives:[CardComponent, ROUTER_DIRECTIVES],\n    ```\n\n\n4. Add a `[routerLink]` to each component and link to the `person.id`\n\n    ```html\n    \u003capp-card *ngFor=\"let person of team.people\"\u003e\n      \u003cinput type=\"text\" [(ngModel)]=\"person.name\"\u003e\n      \u003ca [routerLink]=\"['/detail', person.id]\"\u003eDetails\u003c/a\u003e\n    \u003c/app-card\u003e\n    ```\n\n5. Add the `OnActivate` LifeCycle hook to `detail.component.ts`\n\n    ```TypeScript\n    import { Component, OnInit } from '@angular/core';\n    import {OnActivate, RouteSegment} from '@angular/router';\n    import {TeamService} from '../shared';\n    \n    @Component({\n      moduleId: module.id,\n      selector: 'app-detail',\n      templateUrl: 'detail.component.html',\n      styleUrls: ['detail.component.css']\n    })\n    export class DetailComponent implements OnInit, OnActivate {\n      routerOnActivate(curr:RouteSegment):void {\n    \n      }\n    \n      constructor(public team:TeamService) {}\n    \n      ngOnInit() {\n      }\n    \n    }\n    \n    ```\n\n6. Find the person by looking up the `id` in the `people` in the `detail.component.ts` inside the `routerOnActive` block in `detail.component.ts`\n\n    ```TypeScript\n      person;\n    \n      routerOnActivate(curr:RouteSegment):void {\n        const id = curr.getParam('id');\n    \n        this.person = this.team.people.find(person =\u003e\n          person.id === +id\n        );\n      }\n    ```\n\n7. Render out the `person` in `detail.component.html`\n\n    ```html\n    \u003c!-- delete the \u003cp\u003e tag --\u003e\n    \u003ch2\u003e{{person.name}}\u003c/h2\u003e\n    \u003ch3\u003e{{person.id}}\u003c/h3\u003e\n    ```\n    \n8 . Delete the `[routerLink]=\"[/detail/1]\"` from your `workshop.component.html`\n\n---\n\n### Creating Inputs and Outputs on Components\n1. Add an `Input()` of `person` to the `card.component.ts`\n\n    ```TypeScript\n        export class CardComponent implements OnInit {\n          @Input() person;\n            \n          constructor() {}\n        \n          ngOnInit() {\n          }\n        \n        }\n    ```\n    \n2. Replace the `card.component.html` template with bindings to the `person`\n\n    ```html\n        \u003cinput type=\"text\" [(ngModel)]=\"person.name\"\u003e\n    ```\n3. Replace the content where you used `app-card` with an `[person]` attribute\n\n    ```html\n        \u003capp-card\n          [person]=\"person\"\n          *ngFor=\"let person of team.people\"\n        \u003e\n        \u003c/app-card\u003e\n    ```\n    \n4. Add an `@Output()` of `edit` to the `card.component.ts`\n\n    ```TypeScript\n    export class CardComponent implements OnInit {\n      @Input() person;\n      @Output() edit = new EventEmitter();\n      constructor() {}\n    \n      ngOnInit() {\n      }\n    \n    }\n    ```\n\n5. Add an edit `button` to the `card.component.html`\n\n    ```html\n    \u003cinput type=\"text\" [(ngModel)]=\"person.name\"\u003e\n    \u003cbutton (click)=\"edit.emit(person)\"\u003eEdit\u003c/button\u003e\n    ```\n\n6. Handle the edit event in the `team.component.html`\n\n\n    ```html\n    \u003capp-card\n      [person]=\"person\"\n      *ngFor=\"let person of team.people\"\n      (edit)=\"onEdit($event)\"\n    \u003e\n    \u003c/app-card\u003e\n    ```\n\n7. Create then `onEdit` event handler in the `team.component.ts`\n\n    ```TypeScript\n    onEdit(event){\n        console.log(event);\n      }\n    ```\n\n8. Inject the router into the `team.component.ts` constructor\n\n    ```TypeScript\n      constructor(\n        public team:TeamService,\n        public router:Router\n      ) {}\n    ```\n    \n9. Navigate using the `onEdit` handler\n\n    ```TypeScript\n    onEdit(event){\n        this.router.navigate(['/detail', event.id]);\n    }\n    ```\n### Http\n\n#### Star Wars Live Search\nhttp://plnkr.co/edit/TWt9Gdo6AdXa2ZMu9tt7?p=preview\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnlindquist%2Fangular-summit-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnlindquist%2Fangular-summit-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnlindquist%2Fangular-summit-workshop/lists"}