Stanimira Vlaeva
Generating code with Angular schematics
#1about 7 minutes
Understanding the problems solved by Angular schematics
Schematics automate repetitive tasks like scaffolding components, configuring libraries with `ng add`, and handling breaking changes with `ng update`.
#2about 2 minutes
Schematics are a framework-agnostic, extensible tool
Although developed by the Angular team, schematics are an open-source tool that can be used with other frameworks like React or for any project transformation task.
#3about 3 minutes
Key benefits of using schematics for project updates
Schematics provide atomic updates by operating on a virtual file system, which prevents leaving projects in a broken state if a script fails.
#4about 2 minutes
Getting started by creating a new schematics collection
Install the Schematics CLI and use the `schematics blank` command to create a new collection, which is defined by a `collection.json` file.
#5about 3 minutes
Exploring the core concepts of the schematics API
Learn about the fundamental building blocks of schematics, including the `Tree`, `Rule`, and `Rule Factory`, and how to pass options to your scripts.
#6about 2 minutes
Performing basic file system operations with schematics
Use the `tree.create()` and `tree.rename()` methods to programmatically add, move, or rename files within your project structure.
#7about 2 minutes
Composing multiple schematics together using chaining
The `chain` utility allows you to execute multiple rules sequentially, enabling composition of both internal and external schematics.
#8about 7 minutes
Using templates for dynamic and reusable file generation
Leverage templates with interpolation and conditional logic to generate dynamic files, using concepts like `Source`, `Rule`, and `mergeWith` to apply them.
#9about 3 minutes
Modifying existing files and a live demo
See how to read an existing file with `tree.read()` and replace its contents using `tree.overwrite()`, demonstrated with a live example.
#10about 2 minutes
Helpful resources for learning more about schematics
Find links to the official documentation, demo repositories, and examples of third-party schematic collections like Clarity and NativeScript.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
43:08On tour with heroes == Moving from Angular to WebComponents
Benjamin Glusa
43:57How to Stop Choosing JavaScript Frameworks and Start Living
Sasha Shynkevich
43:20The Art and Craft of Type Development
Michael Hladky & Stefan Baumgartner
36:22Angular Features You Should be Using
Sani Yusuf
33:18The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular
Manfred Steyer
50:28Angular tips/tricks you can use from tomorrow on
Benedikt Starzengruber
31:21Why I Recommend Svelte to Every New Web Developer
Markus Hatvan
29:11Angular Magical directives
Valentine Awe
From learning to earning
Jobs that call for the skills explored in this talk.
