{{item.name}}
8 | 9 |10 | {{item.url}} 11 |
12 |
4 |
36 |
--------------------------------------------------------------------------------
/src/app/about/about.component.scss:
--------------------------------------------------------------------------------
1 | h2, h3 {
2 | margin-bottom: 0;
3 | }
4 |
5 | ul {
6 | margin: 0 0 1em 0;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/about/about.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, ComponentFixture, async } from '@angular/core/testing';
2 | import { TranslateModule } from '@ngx-translate/core';
3 |
4 | import { SharedModule } from '../shared/shared.module';
5 | import { AboutComponent, AboutListComponent } from './';
6 |
7 | describe('Component: /about/about.component.ts', () => {
8 | let component: AboutComponent;
9 | let fixture: ComponentFixture{{ 'TITLE' | translate }}
5 | 6 |7 | {{ 'CONTENT' | translate }} 8 |
9 | 10 |-
11 |
- {{ 'FEAT_JWT' | translate }} 12 |
- {{ 'FEAT_ROLES' | translate }} 13 |
- {{ 'FEAT_TRANSLATIONS' | translate }} 14 |
17 |
35 |
18 |
25 |
26 | {{ 'USED_LIBRARIES' | translate }}
19 | 20 |
27 |
34 | {{ 'EXTERNAL_LINKS' | translate }}
28 | 29 |
7 |
8 |
10 |
11 |
12 |
14 |
15 |
18 |
19 |
2 |
5 | {{ 'TITLE' | translate }}
6 |
7 |
8 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/app/auth/login/login.component.scss:
--------------------------------------------------------------------------------
1 | md-spinner {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | margin-left: -50px;
6 | margin-top: -50px;
7 | }
8 |
9 | .login {
10 | width: 250px;
11 | background: #fafafa;
12 | box-shadow: rgba(0, 0, 0, 0.14902) 0 1px 1px 0, rgba(0, 0, 0, 0.09804) 0 1px 2px 0;
13 | text-align: center;
14 |
15 | &.mat-card {
16 | padding: 0;
17 | }
18 |
19 | form {
20 | margin: 0 16px;
21 | }
22 |
23 | .text {
24 | margin-bottom: 16px;
25 | }
26 |
27 | button {
28 | margin: 0 4px;
29 | }
30 |
31 | md-toolbar {
32 | min-height: 48px;
33 |
34 | md-toolbar-row {
35 | height: 48px;
36 | }
37 | }
38 |
39 | md-card-content {
40 | padding: 8px 16px;
41 | }
42 |
43 | md-icon {
44 | margin-right: 8px;
45 | }
46 | }
--------------------------------------------------------------------------------
/src/app/auth/login/login.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 | import { APP_BASE_HREF } from '@angular/common';
3 | import { RouterTestingModule } from '@angular/router/testing';
4 | import { TranslateModule } from '@ngx-translate/core';
5 | import { provideAuth, JwtHelper } from 'angular2-jwt';
6 | import { LocalStorageService } from 'ng2-webstorage';
7 |
8 | import { SharedModule } from '../../shared/shared.module';
9 | import { LoginComponent } from './login.component';
10 | import { AuthService, UserService } from '../services/';
11 |
12 | describe('Component: /auth/login/login.component.ts', () => {
13 | let component: LoginComponent;
14 | let fixture: ComponentFixture
2 |
16 |
--------------------------------------------------------------------------------
/src/app/auth/profile/profile.component.scss:
--------------------------------------------------------------------------------
1 | pre {
2 | white-space: pre-wrap;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/auth/profile/profile.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 | import { APP_BASE_HREF } from '@angular/common';
3 | import { RouterTestingModule } from '@angular/router/testing';
4 | import { TranslateModule } from '@ngx-translate/core';
5 | import { JwtHelper, provideAuth } from 'angular2-jwt';
6 | import { LocalStorageService } from 'ng2-webstorage';
7 | import { Observable } from 'rxjs/Observable';
8 |
9 | import { ProfileComponent } from './profile.component';
10 | import { SharedModule } from '../../shared/shared.module';
11 | import { AuthService, UserService } from '../services/';
12 |
13 | class StubAuthService {
14 | // TODO, this is not the way this base test should be handled...
15 | profile() {
16 | return Observable.of([]);
17 | }
18 | }
19 |
20 | describe('Component: /auth/profile/profile.component.ts', () => {
21 | let component: ProfileComponent;
22 | let fixture: ComponentFixture
3 |
7 |
8 |
9 |
10 | {{ 'TITLE_PROFILE_FROM_JWT' | translate }}
4 | 5 |{{ profileLocal | json }}
6 |
11 |
15 | {{ 'TITLE_PROFILE_FROM_BACKEND' | translate }}
12 | 13 |{{ profileRemote | json }}
14 |
2 |
3 |
39 |
--------------------------------------------------------------------------------
/src/app/layout/header/header.component.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | span {
3 | margin-left: 8px;
4 | }
5 |
6 | a {
7 | &.mat-button {
8 | min-width: 0;
9 |
10 | &:last-of-type {
11 | margin-right: 16px;
12 | }
13 | }
14 | }
15 | }
--------------------------------------------------------------------------------
/src/app/layout/header/header.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, ComponentFixture, async } from '@angular/core/testing';
2 | import { RouterModule } from '@angular/router';
3 | import { APP_BASE_HREF } from '@angular/common';
4 | import { LocalStorageService } from 'ng2-webstorage';
5 | import { AuthHttp, provideAuth, JwtHelper } from 'angular2-jwt';
6 |
7 | import { HeaderComponent } from './header.component';
8 | import { SharedModule } from '../../shared/shared.module';
9 | import { AuthService, UserService } from '../../auth/services/';
10 | import { SidenavService } from '../sidenav/sidenav.service';
11 | import { TranslateModule, TranslateService } from '@ngx-translate/core';
12 |
13 | describe('Component: /layout/header/header.component.ts', () => {
14 | let component: HeaderComponent;
15 | let fixture: ComponentFixture
4 |
7 |
8 | angular-cli-frontend
9 |
10 |
11 |
12 |
13 | {{ locale.nameShort }}
18 |
19 |
27 |
28 |
36 |
37 |
38 |
4 |
5 |
6 |
7 | About
8 |
9 |
10 |
11 |
33 |
34 |
--------------------------------------------------------------------------------
/src/app/layout/sidenav/sidenav.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tarlepp/angular-cli-frontend/2eac4fbf67ee5e6a7c8bb4fce3e4e5fb43246926/src/app/layout/sidenav/sidenav.component.scss
--------------------------------------------------------------------------------
/src/app/layout/sidenav/sidenav.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SidenavComponent } from './sidenav.component';
4 | import { SharedModule } from '../../shared/shared.module';
5 | import { AuthHttp, JwtHelper, provideAuth } from 'angular2-jwt';
6 | import { AuthService } from '../../auth/services/auth.service';
7 | import { UserService } from '../../auth/services/user.service';
8 | import { LocalStorageService } from 'ng2-webstorage';
9 | import { APP_BASE_HREF } from '@angular/common';
10 | import { SidenavService } from './sidenav.service';
11 | import { TranslateService } from '@ngx-translate/core';
12 | import { RouterModule } from '@angular/router';
13 |
14 | describe('Component: /layout/sidenav/sidenav.component.ts', () => {
15 | let component: SidenavComponent;
16 | let fixture: ComponentFixture
12 |
13 | Login
14 |
15 |
16 |
17 |
18 |
19 |
20 | Profile
21 |
22 |
23 | Examples: Authors
24 |
25 |
26 | Examples: Books
27 |
28 |
29 | Logout
30 |
31 |
32 |
52 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/layout.scss:
--------------------------------------------------------------------------------
1 | md-sidenav {
2 | width: 200px;
3 | }
4 |
5 | .normal-content {
6 | padding: 0 1em;
7 | }
8 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { environment } from './environments/environment';
5 | import { AppModule } from './app/app.module';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule);
12 |
--------------------------------------------------------------------------------
/src/mixins.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import '~@angular/material/theming';
3 |
4 | /**
5 | * Include the base styles for Angular Material core. We include this here so that you only
6 | * have to load a single css file for Angular Material in your app.
7 | */
8 | @include mat-core();
9 |
10 | /**
11 | * Define the palettes for your theme using the Material Design palettes available in palette.scss
12 | * (imported above). For each palette, you can optionally specify a default, lighter, and darker
13 | * hue.
14 | */
15 | $frontend-app-primary: mat-palette($mat-blue-grey, 700, 500, 900);
16 | $frontend-app-accent: mat-palette($mat-blue-grey, A400, A200, A700);
17 |
18 | // The warn palette is optional (defaults to red).
19 | $frontend-app-warn: mat-palette($mat-red);
20 |
21 | // Create the theme object (a Sass map containing all of the palettes).
22 | $frontend-app-theme: mat-light-theme($frontend-app-primary, $frontend-app-accent, $frontend-app-warn);
23 |
24 | /**
25 | * Include theme styles for core and each component used in your app.
26 | * Alternatively, you can import and @include the theme mixins for each component
27 | * that you are using.
28 | */
29 | @include angular-material-theme($frontend-app-theme);
--------------------------------------------------------------------------------
/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/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/set';
35 |
36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
37 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
38 |
39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */
40 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
41 |
42 |
43 | /** Evergreen browsers require these. **/
44 | import 'core-js/es6/reflect';
45 | import 'core-js/es7/reflect';
46 |
47 |
48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/
49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
50 |
51 |
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 |
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
64 | /**
65 | * Date, currency, decimal and percent pipes.
66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 | */
68 | // import 'intl'; // Run `npm install --save intl`.
69 |
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins';
2 | @import 'layout';
3 | @import 'common';
4 |
5 | html, body {
6 | margin: 0;
7 | height: 100%;
8 | min-height: 100%;
9 | overflow: hidden;
10 | }
11 |
12 | body {
13 | margin: 0;
14 | display: flex;
15 | flex-direction: column;
16 | font-family: 'Roboto', 'Helvetica Neue', sans-serif;
17 | }
18 |
19 | app-root {
20 | display: flex;
21 | flex-direction: column;
22 | flex: 1;
23 | }
24 |
--------------------------------------------------------------------------------
/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/long-stack-trace-zone';
4 | import 'zone.js/dist/proxy.js';
5 | import 'zone.js/dist/sync-test';
6 | import 'zone.js/dist/jasmine-patch';
7 | import 'zone.js/dist/async-test';
8 | import 'zone.js/dist/fake-async-test';
9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 |
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 |
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 |
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 | BrowserDynamicTestingModule,
25 | platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "es2015",
6 | "baseUrl": "",
7 | "types": [
8 | "node"
9 | ]
10 | },
11 | "exclude": [
12 | "test.ts",
13 | "**/*.spec.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "baseUrl": "",
8 | "types": [
9 | "jasmine",
10 | "node"
11 | ]
12 | },
13 | "files": [
14 | "test.ts"
15 | ],
16 | "include": [
17 | "**/*.spec.ts",
18 | "**/*.d.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 | id: string;
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "baseUrl": "src",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "moduleResolution": "node",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "lib": [
16 | "es2016",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "callable-types": true,
7 | "class-name": true,
8 | "comment-format": [
9 | true,
10 | "check-space"
11 | ],
12 | "curly": true,
13 | "eofline": true,
14 | "forin": true,
15 | "import-blacklist": [true, "rxjs"],
16 | "import-spacing": true,
17 | "indent": [
18 | true,
19 | "spaces"
20 | ],
21 | "interface-over-type-literal": true,
22 | "label-position": true,
23 | "max-line-length": [
24 | false,
25 | 140
26 | ],
27 | "member-access": false,
28 | "member-ordering": [
29 | true,
30 | "static-before-instance",
31 | "variables-before-functions"
32 | ],
33 | "no-arg": true,
34 | "no-bitwise": true,
35 | "no-console": [
36 | true,
37 | "debug",
38 | "info",
39 | "time",
40 | "timeEnd",
41 | "trace"
42 | ],
43 | "no-construct": true,
44 | "no-debugger": true,
45 | "no-duplicate-variable": true,
46 | "no-empty": false,
47 | "no-empty-interface": true,
48 | "no-eval": true,
49 | "no-inferrable-types": [
50 | true,
51 | "ignore-params"
52 | ],
53 | "no-shadowed-variable": true,
54 | "no-string-literal": false,
55 | "no-string-throw": true,
56 | "no-switch-case-fall-through": true,
57 | "no-trailing-whitespace": true,
58 | "no-unused-expression": true,
59 | "no-use-before-declare": true,
60 | "no-var-keyword": true,
61 | "object-literal-sort-keys": false,
62 | "one-line": [
63 | true,
64 | "check-open-brace",
65 | "check-catch",
66 | "check-else",
67 | "check-whitespace"
68 | ],
69 | "prefer-const": true,
70 | "quotemark": [
71 | true,
72 | "single"
73 | ],
74 | "radix": true,
75 | "semicolon": [
76 | "always"
77 | ],
78 | "triple-equals": [
79 | true,
80 | "allow-null-check"
81 | ],
82 | "typedef-whitespace": [
83 | true,
84 | {
85 | "call-signature": "nospace",
86 | "index-signature": "nospace",
87 | "parameter": "nospace",
88 | "property-declaration": "nospace",
89 | "variable-declaration": "nospace"
90 | }
91 | ],
92 | "typeof-compare": true,
93 | "unified-signatures": true,
94 | "variable-name": false,
95 | "whitespace": [
96 | true,
97 | "check-branch",
98 | "check-decl",
99 | "check-operator",
100 | "check-separator",
101 | "check-type"
102 | ],
103 |
104 | "directive-selector": [true, "attribute", "app", "camelCase"],
105 | "component-selector": [true, "element", "app", "kebab-case"],
106 | "use-input-property-decorator": true,
107 | "use-output-property-decorator": true,
108 | "use-host-property-decorator": true,
109 | "no-input-rename": true,
110 | "no-output-rename": true,
111 | "use-life-cycle-interface": true,
112 | "use-pipe-transform-interface": true,
113 | "component-class-suffix": true,
114 | "directive-class-suffix": true,
115 | "no-access-missing-member": true,
116 | "templates-use-public": true,
117 | "invoke-injectable": true
118 | }
119 | }
120 |
--------------------------------------------------------------------------------