Last active
May 18, 2018 12:28
-
-
Save angular-academy-devs/81be20a6b0970fc70e9cea9ecd4fa6b0 to your computer and use it in GitHub Desktop.
Angular App Shell
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>MyAppShell</title> | |
<base href="/"> | |
<meta name="viewport" content="width=device-width,initial-scale=1"> | |
<link rel="icon" type="image/x-icon" href="favicon.ico"> | |
<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/> | |
</head> | |
<body> | |
<app-root></app-root> | |
<script type="text/javascript" src="inline.7af73d884e232b8a88bd.bundle.js"></script> | |
<script type="text/javascript" src="polyfills.169c804fcec855447ce7.bundle.js"></script> | |
<script type="text/javascript" src="main.cd226be56c6c7ccae88d.bundle.js"></script> | |
</body> | |
</html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div style="text-align:center"> | |
<h1> | |
Welcome to {{ title }}! | |
</h1> | |
<img width="300" alt="Angular Logo"> | |
</div> | |
<h2>Here are some links to help you start: </h2> | |
<ul> | |
.. main navigation menu of the application ... | |
</ul> | |
<router-outlet></router-outlet> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'app-app-shell', | |
template: ` | |
<img class="loading-indicator" src="loading.gif"> | |
`, | |
styles: [` | |
.loading-indicator { | |
height: 300px; | |
margin: 0 auto; | |
} | |
`] | |
}) | |
export class AppShellComponent { | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"app-shell": { | |
"builder": "@angular-devkit/build-angular:app-shell", | |
"options": { | |
"browserTarget": "my-app-name:build", | |
"serverTarget": "my-app-name:server", | |
"route": "app-shell-path" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const routes: Routes = [{ | |
path: 'app-shell-path', | |
component: AppShellComponent | |
}]; | |
@NgModule({ | |
imports: [RouterModule.forRoot(routes)], | |
exports: [RouterModule] | |
}) | |
export class AppRoutingModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const routes: Routes = [ { path: 'app-shell-path', component: AppShellComponent }]; | |
@NgModule({ | |
imports: [ | |
AppModule, | |
ServerModule, | |
RouterModule.forRoot(routes), | |
], | |
bootstrap: [AppComponent], | |
declarations: [AppShellComponent], | |
}) | |
export class AppServerModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>MyAppShell</title> | |
<base href="/"> | |
<meta name="viewport" content="width=device-width,initial-scale=1"> | |
<link rel="icon" type="image/x-icon" href="favicon.ico"> | |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"> | |
<style ng-transition="serverApp"></style> | |
<style ng-transition="serverApp">.loading-indicator[_ngcontent-c1] { | |
height: 300px; | |
margin: 0 auto; | |
}</style> | |
</head> | |
<body> | |
<app-root _nghost-c0="" ng-version="5.1.0"> | |
<div _ngcontent-c0="" style="text-align:center"> | |
<h1 _ngcontent-c0="">Welcome to app! </h1> | |
<img _ngcontent-c0="" alt="Angular Logo" src=".." width="300"> | |
</div> | |
<h2 _ngcontent-c0="">Here are some links to help you start: </h2> | |
<ul _ngcontent-c0=""> | |
<li _ngcontent-c0=""> | |
<h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial">Tourof Heroes</a></h2> | |
</li> | |
<li _ngcontent-c0=""> | |
<h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> | |
</li> | |
<li _ngcontent-c0=""> | |
<h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/">Angular blog</a></h2> | |
</li> | |
</ul> | |
<router-outlet _ngcontent-c0=""></router-outlet> | |
<app-app-shell _nghost-c1=""> | |
<img _ngcontent-c1="" class="loading-indicator" src="loading.gif"> | |
</app-app-shell> | |
</app-root> | |
<script type="text/javascript" src="inline.7f492b32ad91aff5b9d4.bundle.js"></script> | |
<script type="text/javascript" src="polyfills.169c804fcec855447ce7.bundle.js"></script> | |
<script type="text/javascript" src="main.4b438877429c33fe644e.bundle.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment