Skip to content

Commit 8c73209

Browse files
committed
docs(readme): update to reflect new naming
1 parent c490c69 commit 8c73209

File tree

1 file changed

+19
-16
lines changed

1 file changed

+19
-16
lines changed

README.md

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual
5959

6060
- **Webpack build system (Webpack 2)**
6161
- HMR : Hot Module Reloading/Replacement
62-
- Production builds
62+
- Production builds w/ AoT Compilation
6363

6464
- **Testing frameworks**
6565
- Unit testing with Karma/Jasmine
@@ -106,7 +106,7 @@ VS2017 will automatically install all the neccessary npm & .NET dependencies whe
106106

107107
Simply push F5 to start debugging !
108108

109-
**Note**: If you get any errors after this such as `module not found: main.server` (or similar), open up command line and run `npm run build:dev` to make sure all the assets have been properly built by Webpack.
109+
**Note**: If you get any errors after this such as `module not found: boot.server` (or similar), open up command line and run `npm run build:dev` to make sure all the assets have been properly built by Webpack.
110110

111111
### Visual Studio Code
112112

@@ -177,39 +177,39 @@ Here we have the *usual suspects* found at the root level.
177177
- `protractor` - config files (e2e testing)
178178
- `tslint` - TypeScript code linting rules
179179

180-
### /Client/ - Everything Angular
180+
### /ClientApp/ - Everything Angular
181181

182182
> Let's take a look at how this is structured so we can make some sense of it all!
183183

184-
With Angular Universal, we need to split our applicatoin logic **per platform** so [if we look inside this folder](./Client),
184+
With Angular Universal, we need to split our applicatoin logic **per platform** so [if we look inside this folder](./ClientApp),
185185
you'll see the 2 root files, that branch the entire logic for browser & server respectively.
186186

187-
- [**Main.Browser.ts**](./Client/main.browser.ts) -
187+
- [**Boot.Browser.ts**](./ClientApp/main.browser.ts) -
188188
This file starts up the entire Angular application for the Client/browser platform.
189189

190190
Here we setup a few things, client Angular bootstrapping.
191191

192192
You'll barely need to touch this file, but something to note, this is the file where you would import libraries that you **only** want
193193
being used in the Browser. (Just know that you'd have to provide a mock implementation for the Server when doing that).
194194

195-
- [**Main-Server.ts**](./Client/main.server.ts) -
195+
- [**Boot.Server.ts**](./ClientApp/boot.server.ts) -
196196
This file is where Angular _platform-server_ *serializes* the Angular application itself on the .NET server
197197
within a very quick Node process, and renders it a string. This is what causes that initial fast paint
198198
of the entire application to the Browser, and helps us get all our _SEO_ goodness :sparkles:
199199

200200
---
201201

202-
Notice the folder structure here in `./Client/` :
202+
Notice the folder structure here in `./ClientApp/` :
203203

204204
```diff
205-
+ /Client/
205+
+ /ClientApp/
206206
207207
+ /app/
208208
App NgModule - our Root NgModule (you'll insert Components/etc here most often)
209209
AppComponent / App Routes / global css styles
210210
211211
* Notice that we have 2 dividing NgModules:
212-
browser-app.module & server-app.module
212+
app.module.browser & app.module.server
213213
You'll almost always be using the common app.module, but these 2 are used to split up platform logic
214214
for situations where you need to use Dependency Injection / etc, between platforms.
215215
@@ -226,21 +226,21 @@ Note: You could use whatever folder conventions you'd like, I prefer to split up
226226
```
227227

228228
When adding new features/components/etc to your application you'll be commonly adding things to the Root **NgModule** (located
229-
in `/Client/app/app.module.ts`), but why are there **two** other NgModules in this folder?
229+
in `/ClientApp/app/app.module.ts`), but why are there **two** other NgModules in this folder?
230230

231231
This is because we want to split our logic **per Platform**, but notice they both share the Common NgModule
232232
named `app.module.ts`. When adding most things to your application, this is the only
233233
place you'll have to add in your new Component / Directive / Pipe / etc. You'll only occassional need to manually
234-
add in the Platform specific things to either `browser-app.module || server-app.module`.
234+
add in the Platform specific things to either `app.module.browser || app.module.server`.
235235

236236
To illustrate this point with an example, you can see how we're using Dependency Injection to inject a `StorageService` that is different
237237
for the Browser & Server.
238238

239239
```typescript
240-
// For the Browser (browser-app.module)
240+
// For the Browser (app.module.browser)
241241
{ provide: StorageService, useClass: BrowserStorage }
242242
243-
// For the Server (server-app.module)
243+
// For the Server (app.module.server)
244244
{ provide: StorageService, useClass: ServerStorage }
245245
```
246246

@@ -258,14 +258,14 @@ Angular application gets serialized into a String, sent to the Browser, along wi
258258

259259
---
260260

261-
The short-version is that we invoke that Node process, passing in our Request object & invoke the `boot-server` file, and we get back a nice object that we pass into .NETs `ViewData` object, and sprinkle through out our `Views/Shared/_Layout.cshtml` and `/Views/Home/index.cshtml` files!
261+
The short-version is that we invoke that Node process, passing in our Request object & invoke the `boot.server` file, and we get back a nice object that we pass into .NETs `ViewData` object, and sprinkle through out our `Views/Shared/_Layout.cshtml` and `/Views/Home/index.cshtml` files!
262262

263263
A more detailed explanation can be found here: [ng-AspnetCore-Engine Readme](https://github.com/angular/universal/tree/master/modules/ng-aspnetcore-engine)
264264

265265
```csharp
266266
// Prerender / Serialize application
267267
var prerenderResult = await Prerenderer.RenderToString(
268-
/* all of our parameters / options / boot-server file / customData object goes here */
268+
/* all of our parameters / options / boot.server file / customData object goes here */
269269
);
270270
271271
ViewData["SpaHtml"] = prerenderResult.Html;
@@ -323,6 +323,7 @@ Well now, your Client-side Angular will take over, and you'll have a fully funct
323323
----
324324

325325
# "Gotchas"
326+
326327
- This repository uses ASP.Net Core 2.0, which has a hard requirement on .NET Core Runtime 2.0.0 and .NET Core SDK 2.0.0. Please install these items from [here](https://github.com/dotnet/core/blob/master/release-notes/download-archives/2.0.0-download.md)
327328

328329
> When building components in Angular 4 there are a few things to keep in mind.
@@ -372,7 +373,7 @@ constructor(element: ElementRef, renderer: Renderer) {
372373
Simply comment out the logic within HomeController, and replace `@Html.Raw(ViewData["SpaHtml"])` with just your applications root
373374
AppComponent tag ("app" in our case): `<app></app>`.
374375

375-
> You could also remove any `isPlatformBrowser/etc` logic, and delete the boot-server, browser-app.module & server-app.module files, just make sure your `boot-client` file points to `app.module`.
376+
> You could also remove any `isPlatformBrowser/etc` logic, and delete the boot.server, app.module.browser & app.module.server files, just make sure your `boot.browser` file points to `app.module`.
376377

377378
### How do I have code run only in the Browser?
378379

@@ -433,6 +434,8 @@ Nothing's ever perfect, but please let me know by creating an issue (make sure t
433434
434435
Copyright (c) 2016-2017 [Mark Pieszak](https://github.com/MarkPieszak)
435436
437+
### Follow me online:
438+
436439
Twitter: [@MarkPieszak](http://twitter.com/MarkPieszak) | Medium: [@MarkPieszak](https://medium.com/@MarkPieszak)
437440
438441
----

0 commit comments

Comments
 (0)