From 91ad10a81b93f5777386d5737fa15287aaca4150 Mon Sep 17 00:00:00 2001 From: pawanpatil08 Date: Sat, 22 Jul 2023 19:18:54 +0530 Subject: [PATCH 1/5] added two pages for angular signal and defer loading --- .all-contributorsrc | 11 ++- README.md | 4 + src/pages/snippets/Built-In-Control-Flow.mdx | 83 +++++++++++++++++++ .../snippets/deferred-loading-in-angular.mdx | 64 ++++++++++++++ 4 files changed, 161 insertions(+), 1 deletion(-) create mode 100644 src/pages/snippets/Built-In-Control-Flow.mdx create mode 100644 src/pages/snippets/deferred-loading-in-angular.mdx diff --git a/.all-contributorsrc b/.all-contributorsrc index 85b4b8d..7ae1930 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -123,6 +123,15 @@ "contributions": [ "doc" ] + }, + { + "login": "pawanpatil08", + "name": "Pawan Patil", + "avatar_url": "https://avatars.githubusercontent.com/u/16464034?v=4", + "profile": "https://github.com/pawanpatil08", + "contributions": [ + "code" + ] } ], "contributorsPerLine": 7, @@ -131,4 +140,4 @@ "repoHost": "https://github.com", "projectName": "angular-snippets", "projectOwner": "santoshyadavdev" -} +} \ No newline at end of file diff --git a/README.md b/README.md index be16d25..0131ca2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # Angular Snippets + [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors-) + A website to find and share code snippets for Angular. @@ -88,6 +90,8 @@ pnpm preview Lucio Aimar
Lucio Aimar
📖 Deepak Rudra Paul
Deepak Rudra Paul
📖 Rubén Peregrina
Rubén Peregrina
📖 + Pawan Patil
Pawan Patil
💻 + diff --git a/src/pages/snippets/Built-In-Control-Flow.mdx b/src/pages/snippets/Built-In-Control-Flow.mdx new file mode 100644 index 0000000..f5a3e6f --- /dev/null +++ b/src/pages/snippets/Built-In-Control-Flow.mdx @@ -0,0 +1,83 @@ +--- +title: Build in control flow upcoming Angular +description: "Build in control" +tags: ["angular", "Deferred Loading", "angular 16"] +pubDate: Jul 22, 2023 +contributedBy: "@pawanpatil08" +--- + +#### Goals: + +The new syntax for template control flow has several major goals: + +- Syntactically similar to JavaScript's control flow statement syntax. +- Syntactically distinct from HTML syntax. +- Works across multiple templates (if-elseif-else, switch-case-default), including template type-checking. +- Flexible syntax allowing customization for each use case (if vs for vs switch). + Address common pain points. +- It must be possible to automatically migrate virtually all existing control flow usage to the new syntax. + +### Conditional control flow uses blocks with the keywords if and else: + +```typescript +{#if cond.expr} + Main case was true! +{:else if other.expr} + Extra case was true! +{:else} + False case! +{/if} +``` + +### Switch control flow uses blocks with the keywords switch, case, and default: + +```typescript +{#switch cond.kind} + {:case x} + X case + {:case y} + Y case + {:case z} + Z case + {:default} + No case matched +{/switch} +``` + +### Loop control flow uses blocks with the keywords for and empty: + +```typescript +{#for item of items; track item.id} + {{ item }} +{:empty} + There were no items in the list. +{/for} +``` + +### Detailed Design + +```typescript +{#if cond.expr} + +{/if} +``` + +### if block - conditionals + +```typescript +{#if a > b} + {{a}} is greater than {{b}} +{/if} +``` + +```typescript +{#if a > b} + {{a}} is greater than {{b}} +{:else if b > a} + {{a}} is less than {{b}} +{:else} + {{a}} is equal to {{b}} +{/if} +``` + +Will see you Built-In Control Flow in next snippets diff --git a/src/pages/snippets/deferred-loading-in-angular.mdx b/src/pages/snippets/deferred-loading-in-angular.mdx new file mode 100644 index 0000000..73f2612 --- /dev/null +++ b/src/pages/snippets/deferred-loading-in-angular.mdx @@ -0,0 +1,64 @@ +--- +title: What is Deferred Loading in Angular +description: "Deferred Loading in Angular" +tags: ["angular", "Deferred Loading", "Zoneless angular"] +pubDate: Jul 22, 2023 +contributedBy: "@pawanpatil08" +--- + +as a part of our ongoing work on implementing the Signals RFC, +we’ve known that the existing zone-based control flow directives would not be able to function in zoneless applications. +We will need to implement reactive control flow for zoneless applications. +We considered modifying the existing control flow directives to support zoneless applications as well, + +#### Goals: + +- Make deferred loading in Angular predictable and ergonomic for all developers +- Reduce initial page load time due to smaller initial bundle sizes + 8 Support deferred loading of directives & pipes as well as components +- Introduce new patterns to allow developers to build applications that leverage deferred loading +- Integrate deferred loaded primitive with hydration, so that developers can gain maximum benefits + +### Deferred blocks + +```typescript +{#defer} + +{/defer} +``` + +### on and when + +```typescript +{#defer when cond} + +{/defer} +``` + +```typescript +{#defer on interaction, timer(5s)} + +{/defer} +``` + +### :loading blocks + +```typescript +{#defer} + +{:loading} +
Loading the calendar...
+{/defer} +``` + +### :placeholder blocks + +```typescript +{#defer when cond} + +{:placeholder minimum 500ms} + +{/defer} +``` + +Will see you Built-In Control Flow in next snippets From bb01a257788a58cf6f9b4fab1f66cd3887ed35b0 Mon Sep 17 00:00:00 2001 From: pawanpatil08 Date: Sat, 22 Jul 2023 19:20:46 +0530 Subject: [PATCH 2/5] removed last line --- src/pages/snippets/Built-In-Control-Flow.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/snippets/Built-In-Control-Flow.mdx b/src/pages/snippets/Built-In-Control-Flow.mdx index f5a3e6f..25b4cc1 100644 --- a/src/pages/snippets/Built-In-Control-Flow.mdx +++ b/src/pages/snippets/Built-In-Control-Flow.mdx @@ -79,5 +79,3 @@ The new syntax for template control flow has several major goals: {{a}} is equal to {{b}} {/if} ``` - -Will see you Built-In Control Flow in next snippets From e4bd0c5dbee4b474dca6d678f88f5c73e90533e5 Mon Sep 17 00:00:00 2001 From: pawanpatil08 Date: Sun, 23 Jul 2023 18:25:28 +0530 Subject: [PATCH 3/5] Aded the rfc link --- src/pages/snippets/Built-In-Control-Flow.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/snippets/Built-In-Control-Flow.mdx b/src/pages/snippets/Built-In-Control-Flow.mdx index 25b4cc1..08a3a0a 100644 --- a/src/pages/snippets/Built-In-Control-Flow.mdx +++ b/src/pages/snippets/Built-In-Control-Flow.mdx @@ -79,3 +79,5 @@ The new syntax for template control flow has several major goals: {{a}} is equal to {{b}} {/if} ``` + +link for RFC : https://github.com/angular/angular/discussions/50719 From ee4553981adb96a339ca0bc84bd6c948fe33d4ae Mon Sep 17 00:00:00 2001 From: pawanpatil08 Date: Tue, 1 Aug 2023 09:06:13 +0530 Subject: [PATCH 4/5] PR review Changes --- README.md | 2 -- src/pages/snippets/Built-In-Control-Flow.mdx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 0131ca2..22a7cb7 100644 --- a/README.md +++ b/README.md @@ -90,8 +90,6 @@ pnpm preview Lucio Aimar
Lucio Aimar
📖 Deepak Rudra Paul
Deepak Rudra Paul
📖 Rubén Peregrina
Rubén Peregrina
📖 - Pawan Patil
Pawan Patil
💻 - diff --git a/src/pages/snippets/Built-In-Control-Flow.mdx b/src/pages/snippets/Built-In-Control-Flow.mdx index 08a3a0a..f37a6cd 100644 --- a/src/pages/snippets/Built-In-Control-Flow.mdx +++ b/src/pages/snippets/Built-In-Control-Flow.mdx @@ -1,5 +1,5 @@ --- -title: Build in control flow upcoming Angular +title: Built-in control flow in upcoming Angular description: "Build in control" tags: ["angular", "Deferred Loading", "angular 16"] pubDate: Jul 22, 2023 From 2c611f74b7f5024a2249cc80fc4a511693cf8f15 Mon Sep 17 00:00:00 2001 From: pawanpatil08 Date: Tue, 1 Aug 2023 09:16:56 +0530 Subject: [PATCH 5/5] adding the all cont. change --- .all-contributorsrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 7ae1930..49af9b1 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -130,7 +130,7 @@ "avatar_url": "https://avatars.githubusercontent.com/u/16464034?v=4", "profile": "https://github.com/pawanpatil08", "contributions": [ - "code" + "doc" ] } ],