{"id":21575581,"url":"https://github.com/rangle/angular-training","last_synced_at":"2025-03-18T06:45:47.804Z","repository":{"id":54367169,"uuid":"91898323","full_name":"rangle/angular-training","owner":"rangle","description":"Integrated Angular training materials","archived":false,"fork":false,"pushed_at":"2021-02-23T02:59:41.000Z","size":12622,"stargazers_count":2,"open_issues_count":13,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-24T13:32:27.156Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rangle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-20T15:30:51.000Z","updated_at":"2017-09-25T12:23:39.000Z","dependencies_parsed_at":"2022-08-13T13:31:17.651Z","dependency_job_id":null,"html_url":"https://github.com/rangle/angular-training","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/rangle%2Fangular-training","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fangular-training/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fangular-training/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Fangular-training/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rangle","download_url":"https://codeload.github.com/rangle/angular-training/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244173507,"owners_count":20410295,"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-11-24T12:13:39.319Z","updated_at":"2025-03-18T06:45:47.779Z","avatar_url":"https://github.com/rangle.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![CircleCI](https://circleci.com/gh/rangle/angular-training-slides.svg?style=svg)](https://circleci.com/gh/rangle/angular-training-slides)\n\n# Angular Training Materials\n\nThis repository contains slides and other materials\nused in [Rangle.io][rangle]'s Angular training course.\nThe slides are written in [Markdown][markdown]\nand use [Reveal.js][reveal] for display.\nInstructors are strongly encouraged to file issues and submit pull requests\nwith suggestions, corrections, extensions, and other improvements.\n\n## The Vision Thing\n\nOur teaching relies on *live coding*.\nInstead of presenting slides to learners,\ninstructors write code as they go along,\nusing whatever tools they would use in real life.\nLive coding's advantages are:\n\n1.  Watching a program being written is more compelling than watching\n    someone page through slides that present bits and pieces of the same\n    code.\n\n1.  It enables instructors to be more responsive to \"what if?\"\n    questions. Where a slide deck is like a railway track, live coding\n    allows instructors to go off road and follow their learners'\n    interests.\n\n1.  People learn more than we realize we are teaching by watching\n    *how* instructors do things.\n\n1.  It slows the instructor down: if she has to type in the program as\n    she goes along, she can only go twice as fast as her learners,\n    rather than ten times faster as she could with slides.\n\n1.  Learners get to see instructors' mistakes *and how to diagnose\n    and correct them*. Novices are going to spend most of their time\n    doing this, but it's left out of most textbooks.\n\n1.  Watching instructors make mistakes shows learners that it's all\n    right to make mistakes of their own.  Most people model the behavior of\n    their teachers: if the instructor isn't embarrassed about making and\n    talking about mistakes, learners will be more comfortable doing so\n    too.\n\nLive coding doesn't make slides irrelevant.\nInstead, they serve two purposes:\n\n1.  Instructors read them *before* the lesson to be sure they have a\n    clear picture of the lesson's flow.\n\n1.  Learners read them *after* the lesson for review and reference.\n    They can also be given a printed copy of the slides to mark up\n    during the lesson so that they don't have to take notes from\n    scratch.\n\nThe first point is essential for supporting collaboration among instructors.\nIn order for two or more people to teach together effectively,\nthey must have a shared road map of what they are going to do.\nThey may improvise on top of that like jazz musicians improvise on top of a score,\nbut a quick review of a shared slide deck before a class\ncan prevent a lot of crossed wires, dropped balls, and other metaphors.\n\nThese slides also help instructors share new and improved ideas with their peers.\nIf one person comes up with a clever way to explain a complex idea,\nshe can (and should) submit a pull request to add her discovery to the slides.\nOther people who are teaching this material can watch for incoming changes,\nor look at the differences between the slides as they were the last time they taught\nand the slides as they are today\nand see what we have collectively learned about how best to teach this topic.\n\n## How to View\n\nThese slides use [Reveal.js][reveal].\nThe first time you want to view them on your computer,\nyou must:\n\n1.  Check out [this repository][repo] from GitHub.\n\n1.  Go into the project's `slides` directory.\n\n1.  Run `npm install` to install the JavaScript packages needed by [Reveal.js][reveal].\n\nYou only need to do these steps once.\nAfter that,\nyou can view the slides at any time:\n\n1.  Run `npm start` in the `./slides/` directory to run a local server.\n    This uses port 8081 by default,\n    and will fail with an error if that port is in use.\n\n1.  Go to [http://localhost:8081](http://localhost:8081/) in your browser.\n\nIf you edit the slides' source,\nthe browser automatically redisplays within a second or two.\n\n## How to Edit\n\n1.  The overall directory structure of `./slides/` is fixed by [Reveal.js][reveal].\n    Please do not make wholesale changes without careful testing.\n\n1.  Slide content is stored in multiple Markdown files in `./slides/src/content`.\n    Each file contains the source for several slides, separated by triple dashes.\n    More files can be added here as needed;\n    the format of each file is described below.\n\n1.  Images used in the slides should be put in `./slides/src/content/images`,\n    and must be referred to in Markdown files using relative paths of the form\n    `content/images/filename.ext`.\n\n1.  Instructors' biographies and photos are in `./slides/src/content/bios`.\n\n1.  `./slides/src/index.html` determines the order in which slide files are displayed.\n    To include a new file, copy an existing inclusion and edit the filename.\n\nMarkdown slides are separated from each other by `---` (three dashes).\nThe first (title) slide of each file must be:\n\n~~~\n\u003c!-- .slide: data-background=\"../content/images/title-slide.jpg\" --\u003e\n\u003c!-- .slide: id=\"SECTION_SLUG\" --\u003e\n##  Building Applications with Angular\n\n# SECTION_TITLE\n~~~\n\nwhere `SECTION_TITLE` is the title of this section, and `SECTION_SLUG`\nis a unique stem for slide identifiers (typically the stem of the\nMarkdown file's name).  For example, the section on Augury uses\n`Augury` as the title and `augury` as the slug.\n\nRegular slides are formatted as:\n\n~~~\n\u003c!-- .slide: id=\"SLIDE_SLUG\" --\u003e\n## SLIDE_TITLE\n\n- Bullet\n- Bullet\n\n#####_path/to/example/file_\n```FILE_TYPE\ncode sample\n```\n~~~\n\n`SLIDE_SLUG` must be a hyphenated unique identifier for this particular slide\nstarting with the slug for the section.  For example, the first content slide\nin the section on Augury has `augury-installing` as its ID.  [Reveal.js][reveal]\nuses these IDs to create unique (bookmarkable) URLs for the slides, which in\nturn allows us to refer to particular slides when filing issues.\n\nThe slide's title should be brief (no more than 3-4 words) and Title Cased.\n\nEvery code sample should have an H5-level heading immediately in front\nof it with the path to the file containing the code in italics.  The\ncode block introduced by triple backquotes should specify a file type\nfor syntax highlighting, such as `ts` (for TypeScript), `js` (for plain\nold JavaScript), or `html` (for HTML).\n\nSlides with quiz questions should have the following header:\n\n~~~\n\u003c!-- .slide: id=\"SECTION-quiz-NUMBER\" --\u003e\n\u003c!-- .slide: data-background=\"../content/images/question-slide.jpg\" --\u003e\n\n## Quiz\n~~~\n\nThe important differences between these slides and regular slides are\nthe use of `quiz` and a sequence number in the ID, and the inclusion\nof the \"question\" slide background image.\n\nEvery quiz should also have answers on a sub-slide.  To separate a\nsub-slide from a regular slide, use `+++` instead of `---`.  The\nsub-slide should then look like this:\n\n~~~\n+++\n\u003c!-- .slide: data-background=\"../content/images/answer-slide.jpg\" --\u003e\n\n## Answer\n~~~\n\nThe first line after `+++` includes the \"answer\" background image.\nThe sub-slide's title should always be \"Answer\".\n\n## For Each Training Class\n\n1.  Create a branch in this repository named after the start date of the training,\n    e.g., `2017-01-01` for a training class that starts on January 1, 2017.\n    (We name branches this way so that client names do not appear in the repository,\n    and to make it easier to track the evolution of material.)\n\n1.  Modify `./slides/src/content/introduction.md` to include the biographies of the instructors,\n    the class's schedule, and other specific information.\n    Please do *not* include these changes in any PRs you submit to improve the core material.\n\n1.  If you have been asked to create a PDF handout,\n    you can do so directly from the slides.\n    After starting the server,\n    go to [http://localhost:8081/?print-pdf](http://localhost:8081/?print-pdf)\n    and using Google Chrome's print utility to create and save a PDF.\n\n[markdown]: https://en.wikipedia.org/wiki/Markdown\n[rangle]: http://rangle.io\n[repo]: https://github.com/rangle/angular-training-slides\n[reveal]: http://lab.hakim.se/reveal-js/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Fangular-training","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frangle%2Fangular-training","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Fangular-training/lists"}