46 |
47 |
48 | # 2. Run DENO server
49 |
50 | Open a shell/powershell terminal at the `server.ts` path and run the following command:
51 |
52 | ```powershell
53 | deno run --allow-net [PATH_TO_FILE]\server.ts
54 | ```
55 |
56 |
3 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
4 | labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
5 | dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
6 | amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
7 | invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
8 | justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
9 | dolor sit amet.
10 |
3 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
4 | labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
5 | dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
6 | amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
7 | invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
8 | justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
9 | dolor sit amet.
10 |
3 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
4 | aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
5 | no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
6 | diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
7 | et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
8 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/app/layout/welcome/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: 'welcome.component.html'
5 | })
6 | export class WelcomeComponent implements OnInit {
7 | constructor() {}
8 |
9 | ngOnInit() {}
10 | }
11 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/app/shared/directives/index.ts:
--------------------------------------------------------------------------------
1 | // import { SelectDirective } from './select.directive';
2 |
3 | export const directives: any[] = [];
4 |
5 | // export * from './select.directive';
6 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, ModuleWithProviders } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4 | import { HttpClientModule } from '@angular/common/http';
5 |
6 | import * as fromDirectives from './directives';
7 |
8 | // https://angular.io/guide/styleguide#shared-feature-module
9 |
10 | @NgModule({
11 | imports: [CommonModule],
12 | exports: [CommonModule,
13 | HttpClientModule,
14 | FormsModule,
15 | ReactiveFormsModule,
16 | ...fromDirectives.directives],
17 | declarations: [...fromDirectives.directives],
18 | providers: []
19 | })
20 | export class SharedModule {
21 | }
22 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Trivadis/AdvancedAngular/b3cfb1fc8957894cf2dc9cc6ff7ce638f071d89f/starter/ngTvdTraining/src/assets/.gitkeep
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 |
4 | // Use Node Express
5 | apiBaseUrl: 'http://localhost:8180/api'
6 |
7 | // Use DENO
8 | // apiBaseUrl: 'http://localhost:8280'
9 | };
10 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false,
8 | // Use Node Express
9 | apiBaseUrl: 'http://localhost:8180/api'
10 |
11 | // Use DENO
12 | // apiBaseUrl: 'http://localhost:8280'
13 | };
14 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Trivadis/AdvancedAngular/b3cfb1fc8957894cf2dc9cc6ff7ce638f071d89f/starter/ngTvdTraining/src/favicon.ico
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | NgTvdTraining
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags.ts';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/styles.scss:
--------------------------------------------------------------------------------
1 | body {
2 | // padding: 10px 25px;
3 | }
4 |
5 | a,
6 | a:hover,
7 | a:focus {
8 | color: #c92c21;
9 | }
10 |
11 | #pageBanner {
12 | background-image: url('https://m.trivadis.com/hubfs/TVD_Training/Landingpages/Angular/Angular-Training.jpg');
13 | height: 150px;
14 | background-size: cover;
15 | background-repeat: no-repeat;
16 | background-position: center -165px;
17 | padding: 15px 30px;
18 | }
19 | #pageBanner h1 {
20 | font-size: 38px;
21 | color: #fff;
22 | font-weight: 700;
23 | line-height: 74px !important;
24 | margin-bottom: 0;
25 | text-shadow: 0 0 40px rgba(0, 0, 0, 0.75);
26 | }
27 | header {
28 | nav {
29 | margin: 5px 0;
30 | }
31 | nav {
32 | a {
33 | font-size: 1em;
34 | // background-color: #cdcdcd;
35 | padding: 5px;
36 | margin-right: 10px;
37 | }
38 | .active {
39 | color: black;
40 | }
41 | }
42 | }
43 | main {
44 | padding: 10px 0;
45 | }
46 | footer {
47 | font-size: 0.85em;
48 | padding-bottom: 2rem;
49 | padding-top: 1em;
50 | }
51 | .panel-primary > .panel-heading {
52 | background-color: #c92c21;
53 | border-color: #c92c21;
54 | }
55 |
56 | .btn {
57 | margin-right: 10px;
58 | margin-bottom: 10px;
59 | }
60 | .btn-primary {
61 | color: #fff;
62 | background-color: #c92c21;
63 | border-color: #c92c21;
64 | }
65 | .btn-primary:hover {
66 | color: #fff;
67 | background-color: #8c0000;
68 | border-color: #8c0000;
69 | transition: all 300ms linear;
70 | }
71 |
72 |
73 | .selected {
74 | background-color: #8c0000 !important;
75 | color: #fff !important;
76 | }
77 |
78 | /* Fade transition
79 | app-root main {
80 | animation-duration: .5s;
81 | opacity: 0;
82 | animation-name: fadeIn;
83 | animation-fill-mode: forwards;
84 | transition: transform .5s ease;
85 | }
86 |
87 | @keyframes fadeIn {
88 | from {
89 | opacity: 0;
90 | }
91 |
92 | to {
93 | opacity: 1;
94 | }
95 | }
96 | */
97 |
98 | /* Slide transition
99 | app-root main {
100 | animation-duration: .5s;
101 | animation-name: slideIn;
102 | animation-fill-mode: forwards;
103 | transition: transform .5s ease;
104 | }
105 |
106 | @keyframes slideIn {
107 | from {
108 | transform: translate(-200px);
109 | }
110 |
111 | to {
112 | transform: translate(0px);
113 | }
114 | }
115 | */
116 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": []
6 | },
7 | "files": [
8 | "main.ts",
9 | "polyfills.ts"
10 | ],
11 | "include": ["**/*.d.ts"]
12 | }
13 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": ["jasmine", "node"]
6 | },
7 | "files": ["test.ts", "polyfills.ts"],
8 | "include": ["**/*.spec.ts", "**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 | id: string;
5 | }
6 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "moduleResolution": "node",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "target": "es2015",
12 | "typeRoots": ["node_modules/@types"],
13 | "lib": ["es2018", "dom"],
14 | "module": "es2020"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/starter/ngTvdTraining/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rules": {
4 | "align": {
5 | "options": [
6 | "parameters",
7 | "statements"
8 | ]
9 | },
10 | "array-type": false,
11 | "arrow-parens": false,
12 | "arrow-return-shorthand": true,
13 | "deprecation": {
14 | "severity": "warn"
15 | },
16 | "component-class-suffix": true,
17 | "contextual-lifecycle": true,
18 | "curly": true,
19 | "directive-class-suffix": true,
20 | "directive-selector": [true, "attribute", "app", "camelCase"],
21 | "component-selector": [
22 | true,
23 | "element",
24 | "app",
25 | "kebab-case"
26 | ],
27 | "eofline": true,
28 | "import-blacklist": [
29 | true,
30 | "rxjs/Rx"
31 | ],
32 | "import-spacing": true,
33 | "indent": {
34 | "options": [
35 | "spaces"
36 | ]
37 | },
38 | "interface-name": false,
39 | "max-classes-per-file": false,
40 | "max-line-length": [true, 140],
41 | "member-access": false,
42 | "member-ordering": [
43 | true,
44 | {
45 | "order": ["static-field", "instance-field", "static-method", "instance-method"]
46 | }
47 | ],
48 | "no-consecutive-blank-lines": false,
49 | "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
50 | "no-empty": false,
51 | "no-inferrable-types": [true, "ignore-params"],
52 | "no-non-null-assertion": true,
53 | "no-redundant-jsdoc": true,
54 | "no-switch-case-fall-through": true,
55 | "no-var-requires": false,
56 | "object-literal-key-quotes": [true, "as-needed"],
57 | "object-literal-sort-keys": false,
58 | "ordered-imports": false,
59 | "quotemark": [true, "single"],
60 | "trailing-comma": false,
61 | "no-conflicting-lifecycle": true,
62 | "no-host-metadata-property": true,
63 | "no-input-rename": true,
64 | "no-inputs-metadata-property": true,
65 | "no-output-native": true,
66 | "no-output-on-prefix": true,
67 | "no-output-rename": true,
68 | "semicolon": {
69 | "options": [
70 | "always"
71 | ]
72 | },
73 | "space-before-function-paren": {
74 | "options": {
75 | "anonymous": "never",
76 | "asyncArrow": "always",
77 | "constructor": "never",
78 | "method": "never",
79 | "named": "never"
80 | }
81 | },
82 | "no-outputs-metadata-property": true,
83 | "template-banana-in-box": true,
84 | "template-no-negated-async": true,
85 | "typedef-whitespace": {
86 | "options": [
87 | {
88 | "call-signature": "nospace",
89 | "index-signature": "nospace",
90 | "parameter": "nospace",
91 | "property-declaration": "nospace",
92 | "variable-declaration": "nospace"
93 | },
94 | {
95 | "call-signature": "onespace",
96 | "index-signature": "onespace",
97 | "parameter": "onespace",
98 | "property-declaration": "onespace",
99 | "variable-declaration": "onespace"
100 | }
101 | ]
102 | },
103 | "use-lifecycle-interface": true,
104 | "use-pipe-transform-interface": true,
105 | "variable-name": {
106 | "options": [
107 | "ban-keywords",
108 | "check-format",
109 | "allow-pascal-case"
110 | ]
111 | },
112 | "whitespace": {
113 | "options": [
114 | "check-branch",
115 | "check-decl",
116 | "check-operator",
117 | "check-separator",
118 | "check-type",
119 | "check-typecast"
120 | ]
121 | }
122 | },
123 | "rulesDirectory": ["codelyzer"]
124 | }
125 |
--------------------------------------------------------------------------------