WIP prettier and optimizing code

Author: alexwpengine

examples/angular/template-hierarchy-data-fetching/example-app/package.json

@@ -7,12 +7,13 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "serve:ssr:my-app": "node dist/my-app/server/server.mjs"
+    "serve:ssr:my-app": "node dist/my-app/server/server.mjs",
+    "prettier": "prettier --write \"src/**/*.{ts,html,css,scss}\""
   },
   "prettier": {
     "overrides": [
       {
-        "files": "*.html",
+        "files": "src/**/*.{ts,html,css,scss}",
         "options": {
           "parser": "angular"
         }
@@ -30,6 +31,7 @@
     "@angular/router": "^20.0.0",
     "@angular/ssr": "^20.0.5",
     "express": "^5.1.0",
+    "prettier": "^3.6.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
@@ -48,4 +50,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.8.2"
   }
-}
+}

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.config.server.ts

@@ -4,9 +4,7 @@ import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(withRoutes(serverRoutes))
-  ]
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.config.ts

@@ -1,16 +1,23 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import {
+  provideClientHydration,
+  withEventReplay,
+} from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
-    provideRouter(routes), 
+    provideRouter(routes),
     provideClientHydration(withEventReplay()),
-    provideHttpClient(withFetch())
-  ]
+    provideHttpClient(withFetch()),
+  ],
 };

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.html

@@ -4,4 +4,4 @@
     <app-dynamic-content></app-dynamic-content>
   </main>
   <app-footer></app-footer>
-</div>
+</div>

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.routes.server.ts

@@ -3,6 +3,6 @@ import { RenderMode, ServerRoute } from '@angular/ssr';
 export const serverRoutes: ServerRoute[] = [
   {
     path: '**',
-    renderMode: RenderMode.Prerender
-  }
+    renderMode: RenderMode.Prerender,
+  },
 ];

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.routes.ts

@@ -2,5 +2,5 @@ import { Routes } from '@angular/router';
 import { DynamicContentComponent } from './components/dynamic-content/dynamic-content.component';
 
 export const routes: Routes = [
-  { path: '**', component: DynamicContentComponent }
-];
+  { path: '**', component: DynamicContentComponent },
+];

examples/angular/template-hierarchy-data-fetching/example-app/src/app/app.ts

@@ -5,12 +5,7 @@ import { DynamicContentComponent } from './components/dynamic-content/dynamic-co
 
 @Component({
   selector: 'app-root',
-  imports: [
-    HeaderComponent,
-    DynamicContentComponent,
-    FooterComponent,
-  ],
-  templateUrl: './app.html'
+  imports: [HeaderComponent, DynamicContentComponent, FooterComponent],
+  templateUrl: './app.html',
 })
-export class App {  
-}
+export class App {}

examples/angular/template-hierarchy-data-fetching/example-app/src/app/assets/scss/components/button.scss

@@ -2,19 +2,19 @@
 @use "sass:color";
 
 .button {
-  padding: .5rem $gutter * 1.5;
+  padding: 0.5rem $gutter * 1.5;
   color: white;
   transition: 0.3s ease;
   cursor: pointer;
-  
+
   &.button-primary {
     background-color: $primary-color;
     border-color: $primary-color;
     &:hover {
       background-color: color.scale($primary-color, $lightness: -15%);
     }
   }
-  
+
   &.button-secondary {
     background-color: $secondary-color;
     color: #111;
@@ -23,20 +23,20 @@
       color: #fff;
     }
   }
-  
+
   &.button-link {
     background-color: transparent;
     color: $primary-color;
     border: 1px solid $primary-color;
   }
-  
+
   &.button-large {
     font-size: 1.2rem;
     padding: 1rem $gutter * 2;
   }
-  
+
   &.button-small {
     font-size: 0.75rem;
-    padding: .25rem $gutter;
+    padding: 0.25rem $gutter;
   }
-}
+}

examples/angular/template-hierarchy-data-fetching/example-app/src/app/assets/scss/global.scss

@@ -1,5 +1,5 @@
-/* You can add global styles to this file, and also import other style files */
-@use 'reset';
-@use 'layout'; 
-@use 'helpers';
-@use './components/button';
+@use "reset";
+@use "layout";
+@use "helpers";
+@use "./components/button";
+ 

examples/angular/template-hierarchy-data-fetching/example-app/src/app/assets/scss/helpers.scss

@@ -61,4 +61,4 @@ $spacers: (
   .mr-#{$key} {
     @include margin(right, $value);
   }
-}
+}