Angular2 Workshop

100%

Angular2 Workshop

✓ Published0🌍 Public

Last edited Aug 30, 2016

Created on Aug 30, 2016

A hands-on workshop outline guides participants through building an Angular 2 application with Webpack and TypeScript. The material covers environment setup, bootstrapping with `@angular/core` and `@angular/platform-browser`, component composition with inputs/outputs, and service integration. Code samples demonstrate a minimalist webpack configuration with TypeScript loaders, while the workshop structure alternates between discussion and practical exercises, culminating in a simple component tree and a custom service wired into the app.

AI-generated description

Similar vizzes

Loading thumbnail…

Angular 2 Intro

This example visualizes the conceptual architecture of Angular 2, breaking down its core building blocks—components, services, routers, and directives—into an interactive diagram. The renderer uses D3.js to lay out and animate the relationships between these elements, with text labels explaining each concept’s role, such as how components encapsulate templates and data, while services handle HTTP calls and non-UI logic. Data is drawn from the included Angular overview text, structured as nodes and edges. The visualization relies on D3’s force simulation for positioning and SVG for drawing the connecting paths.

MMurithi

63% match

Loading thumbnail…

The Missing Introduction to Angular 2 and Modern Design Patterns

The gist demonstrates Angular’s shift to reactive programming and unidirectional data flow, contrasting it with AngularJS’s two-way binding. It presents a curated markdown guide with external links and code snippets, using RxJS observables for asynchronous streams and Promises for HTTP conversions. The example renders the Angular component tree and state management patterns in a static document, sourced from a gist by ackuser, with no interactive visualization. It relies on plain React for the view layer, though no specific d3 or canvas APIs appear.

Aackuser

60% match

Loading thumbnail…

Gist cf65d4442946f9016d84d3562f267824

This example demonstrates a dynamic plugin system for an Angular application that loads and initializes modular features at runtime. The code uses Angular’s `Compiler` and `Injector` APIs to asynchronously compile and instantiate modules, while the `SettingsService` supplies the list of plugins to activate. It shows how plugins can be defined either as direct Angular injector definitions or as objects containing an `ngModule` and optional providers, which are then compiled and attached to the application’s root injector. The rendering approach is code-based, with no visual output, focusing on the service layer that orchestrates lazy-loaded functionality.

HHypercubed

60% match

Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates a hands-on D3 workshop exercise that introduces basic HTML structure, the D3.js v4 library, and fundamental data-binding concepts. It shows a sandboxed webpage with a button that, when clicked, triggers a JavaScript function to manipulate existing paragraph elements and append new ones based on an array of data. The code uses `d3.select` and `d3.selectAll` to target DOM elements, applies styles and text changes, and employs the data join pattern with `.data()`, `.enter()`, and `.append()` to create new paragraphs. It also attaches click event handlers to dynamically added elements, logging a message and altering their appearance, while the accompanying exercise checklist guides users through modifying the code to reinforce learning.

AAndrewMcKernan

58% match

Loading thumbnail…

D3 Workshop: Part 1 - Basic HTML, d3, and Data Binding

This example demonstrates an interactive D3 v4 workshop that teaches basic HTML, d3, and data binding through a hands-on exercise. It shows a button that, when clicked, runs a d3 code snippet targeting paragraphs inside a sandboxed div, while a checklist outlines tasks like adding paragraphs, manipulating text, and binding arrays. The code uses d3.js v4, with d3.select and d3.selectAll to handle DOM selection and manipulation, plus event handling for button clicks. The visualization renders static HTML paragraphs as the primary data display, with the exercise structure guiding users through progressive coding challenges.

IIgathi

56% match

Loading thumbnail…

Gist bae3b305134e90c96401e1f54a8c23e3

This example shows a serverless webpack configuration for deploying a Node.js application. It demonstrates how to bundle JavaScript code with the Serverless Webpack plugin, targeting AWS Lambda’s Node runtime. The configuration uses `serverless-webpack` to generate entry points, sets the build mode based on local development, and applies `webpack-node-externals` to exclude Node modules. It also ignores the `/opt` directory and outputs CommonJS2 bundles to the `.webpack` folder, with source maps for debugging.

Aandresmijares

56% match

Loading thumbnail…

Gist 00792a9e912d6ca6e2b9f6b36457c9b2

This example documents the setup steps for a Sass Fundamentals workshop, covering installation of Node.js via NVM and Visual Studio Code with recommended extensions. It shows how to verify the environment with `nvm --version` and `node --version`, then clones the project repository from GitHub and runs `npm install` followed by `./run -e nesting` to launch an exercise. The text uses Markdown for formatting, including code blocks and a link to the workshop repository, and highlights the css-triggers and vscode-icons extensions as visible dependencies.

Aackuser

56% match

Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K

55% match