|
| 1 | +--- |
| 2 | +title: Angular Bootstrap Project Template |
| 3 | +--- |
| 4 | + |
| 5 | +<div class="not-prose my-8 ml-20 flex justify-center"><svg style="max-width:200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
| 6 | + viewBox="0 0 250 250" xml:space="preserve"> |
| 7 | +<g> |
| 8 | + <polygon fill="#DD0031" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 "/> |
| 9 | + <polygon fill="#C3002F" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 "/> |
| 10 | + <path fill="#FFFFFF" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 |
| 11 | + L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/> |
| 12 | +</g> |
| 13 | +</svg></div> |
| 14 | + |
| 15 | +[Angular](https://angular.io) is the premier JavaScript framework developed by Google for building applications that live on the web, mobile, or the desktop. |
| 16 | + |
| 17 | +## Angular .NET Core and .NET Framework Single Page App Templates |
| 18 | + |
| 19 | +The templates below have been bootstrapped with the latest angular-cli tooling that's |
| 20 | +[seamlessly integrated](/templates/single-page-apps#end-to-end-typed-apis) into |
| 21 | +ServiceStack's [Recommended Physical Project Structure](/physical-project-structure). |
| 22 | + |
| 23 | +See the documentation in each project for more info on features of each template: |
| 24 | + |
| 25 | +### [Angular 15 SPA Template](https://github.com/LegacyTemplates/angular-spa) |
| 26 | + |
| 27 | +.NET 8.0 Angular 15 project generated with [Angular CLI](https://github.com/angular/angular-spa). |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | +> Browse [source code](https://github.com/LegacyTemplates/angular-spa) and install with [x new](/web-new): |
| 32 | +
|
| 33 | +Create new Angular Project for .NET 8.0: |
| 34 | + |
| 35 | +:::sh |
| 36 | +x new LegacyTemplates/angular-spa ProjectName |
| 37 | +::: |
| 38 | + |
| 39 | +Create new Angular Project for .NET Framework: |
| 40 | + |
| 41 | +:::sh |
| 42 | +x new angular-spa-netfx ProjectName |
| 43 | +::: |
| 44 | + |
| 45 | + |
| 46 | +#### Angular HTTP Client |
| 47 | + |
| 48 | +The Angular template uses Angular's built-in Rx-enabled HTTP Client with ServiceStack's ambient TypeScript declarations, as it's often preferable to utilize Angular's built-in dependencies when available. |
| 49 | + |
| 50 | +ServiceStack's ambient TypeScript interfaces are leveraged to enable a Typed API, whilst the `createUrl(route,args)` helper lets you reuse your APIs Route definitions (emitted in comments above each Request DTO) to provide a pleasant UX for making API calls using Angular's HTTP Client: |
| 51 | + |
| 52 | +```ts |
| 53 | +import { createUrl } from '@servicestack/client'; |
| 54 | +... |
| 55 | + |
| 56 | +this.http.get<HelloResponse>(createUrl('/hello/{Name}', { name })).subscribe(r => { |
| 57 | + this.result = r.result; |
| 58 | +}); |
| 59 | +``` |
| 60 | + |
| 61 | +# Angular Examples |
| 62 | + |
| 63 | +## [TechStacks](https://github.com/ServiceStackApps/TechStacks) |
| 64 | + |
| 65 | +TechStacks is an AngularJS App that lets you explore TechStacks of popular StartUps using your favorite technology |
| 66 | + |
| 67 | +[](https://github.com/ServiceStackApps/TechStacks) |
| 68 | + |
| 69 | +#### Features |
| 70 | + |
| 71 | +TechStacks is based on a [Bootstrap template](http://getbootstrap.com) with client-side features: |
| 72 | + |
| 73 | + - HTML5 Routing to enable pretty urls, also supports full page reloads and back button support |
| 74 | + - Same Services supporting both human-readable Slugs or int primary keys |
| 75 | + - Responsive design supporting iPad Landscape and Portrait modes |
| 76 | + - Preloading and background data fetching to reduce flicker and maximize responsiveness |
| 77 | + - [Disqus](https://disqus.com/) commenting system |
| 78 | + - [Chosen](http://harvesthq.github.io/chosen/) for UX-friendly multi combo boxes |
| 79 | + |
| 80 | +and some of TechStacks back-end features include: |
| 81 | + |
| 82 | + - [SEO-optimized, Server HTML generated, read-only version of the website](https://techstacks.io/?html=server) |
| 83 | + - Dynamically generated [sitemaps.xml](https://techstacks.io/sitemap.xml) |
| 84 | + - Page-level Locking |
| 85 | + - Record and Restore Page Content Versioning |
| 86 | + - [Twitter and GitHub OAuth Providers](/auth/authentication-and-authorization) |
| 87 | + - Substitutable [OrmLite](https://github.com/ServiceStack/ServiceStack.OrmLite) RDBMS [PostgreSQL and Sqlite](https://github.com/ServiceStackApps/TechStacks/blob/875e78910e43d2230f0925b71d5990497216511e/src/TechStacks/TechStacks/AppHost.cs#L49-L56) back-ends |
| 88 | + - [Auto Query](/autoquery/) for automatic services of RDBMS tables |
| 89 | + - [RDBMS Sessions and In Memory Caching](/caching) |
| 90 | + - [Fluent Validation](/validation) |
| 91 | + |
0 commit comments