docs: add deferrable views tutorial (angular#57934)

Add a new tutorial "Deferrable Views" to the tutorials page.

PR Close angular#57934

Author: thanhtruong34

adev/src/app/sub-navigation-data.ts

@@ -11,6 +11,7 @@ import {NavigationItem} from '@angular/docs';
 // These 2 imports are expected to be red because they are generated a build time
 import FIRST_APP_TUTORIAL_NAV_DATA from '../../src/assets/tutorials/first-app/routes.json';
 import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../src/assets/tutorials/learn-angular/routes.json';
+import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../src/assets/tutorials/deferrable-views/routes.json';
 
 import {DefaultPage} from './core/enums/pages';
 import {getApiNavigationItems} from './features/references/helpers/manifest.helper';
@@ -872,6 +873,7 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
 export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
   FIRST_APP_TUTORIAL_NAV_DATA,
   LEARN_ANGULAR_TUTORIAL_NAV_DATA,
+  DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
   {
     path: DefaultPage.TUTORIALS,
     contentPath: 'tutorials/home',

adev/src/assets/BUILD.bazel

@@ -37,6 +37,7 @@ copy_to_directory(
         "//adev/src/content/tools/cli",
         "//adev/src/content/tools/libraries",
         "//adev/src/content/tutorials",
+        "//adev/src/content/tutorials/deferrable-views:deferrable-views-guides",
         "//adev/src/content/tutorials/first-app:first-app-guides",
         "//adev/src/content/tutorials/learn-angular:learn-angular-guides",
         "//packages/animations:animations_docs",
@@ -84,6 +85,7 @@ copy_to_directory(
 copy_to_directory(
     name = "tutorials",
     srcs = [
+        "//adev/src/content/tutorials/deferrable-views",
         "//adev/src/content/tutorials/first-app",
         "//adev/src/content/tutorials/homepage",
         "//adev/src/content/tutorials/learn-angular",

adev/src/assets/images/ang_illustrations-04.svg

@@ -11,6 +11,7 @@ generate_guides(
         ],
     ),
     data = [
+        "//adev/src/assets/images:ang_illustrations-04.svg",
         "//adev/src/assets/images:learn-angular-browser.svg",
         "//adev/src/assets/images:learn-angular-local.svg",
     ],

adev/src/content/tutorials/BUILD.bazel

@@ -0,0 +1,21 @@
+load("//adev/shared-docs:index.bzl", "generate_guides", "generate_tutorial")
+
+package(default_visibility = ["//adev:__subpackages__"])
+
+generate_guides(
+    name = "deferrable-views-guides",
+    srcs = glob(["**/*.md"]),
+)
+
+filegroup(
+    name = "files",
+    srcs = glob(
+        ["**/*"],
+        exclude = ["**/*.md"],
+    ),
+)
+
+generate_tutorial(
+    name = "deferrable-views",
+    tutorial_srcs = ":files",
+)

adev/src/content/tutorials/deferrable-views/BUILD.bazel

@@ -0,0 +1,101 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "first-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/first-app",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/public"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "first-app:build:production"
+            },
+            "development": {
+              "buildTarget": "first-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        }
+      }
+    }
+  }
+}

adev/src/content/tutorials/deferrable-views/common/angular.json

@@ -0,0 +1,35 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.nodejs_18
+  ];
+  # Sets environment variables in the workspace
+  env = {};
+  idx = {
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      "angular.ng-template"
+    ];
+    workspace = {
+      # Runs when a workspace is first created with this \`dev.nix\` file
+      onCreate = {
+        npm-install = "npm install --no-audit --prefer-offline";
+      };
+      # To run something each time the environment is rebuilt, use the \`onStart\` hook
+    };
+    # Enable previews and customize configuration
+    previews = {
+      enable = true;
+      previews = {
+        web = {
+          command = ["npm" "run" "start" "--" "--port" "$PORT" "--host" "0.0.0.0"];
+          manager = "web";
+        };
+      };
+    };
+  };
+}