├── src
├── app
│ ├── shared
│ │ └── index.ts
│ ├── app.component.css
│ ├── index.ts
│ ├── app.component.html
│ ├── app.component.ts
│ ├── app.module.ts
│ └── app.component.spec.ts
├── assets
│ ├── .gitkeep
│ └── .npmignore
├── favicon.ico
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── typings.d.ts
├── main.ts
├── index.html
├── styles.scss
├── tsconfig.app.json
├── tsconfig.spec.json
├── polyfills.ts
└── test.ts
├── README.md
├── e2e
├── app.po.ts
├── app.e2e-spec.ts
└── tsconfig.e2e.json
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── protractor.conf.js
├── .angular-cli.json
├── package.json
├── karma.conf.js
└── tslint.json
/src/app/shared/index.ts:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/.npmignore:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/index.ts:
--------------------------------------------------------------------------------
1 | export * from './app.component';
2 | export * from './app.module';
3 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pragdev/angular_example/HEAD/src/favicon.ico
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{title}}
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | // Typings reference file, you can add your own global typings here
2 | // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AngularExample
2 |
3 | This project is a template to show how to configure an angular 4 project with angular-cli and angular2-materialize.
4 | Please have a look at the commits.
5 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, element, by } from 'protractor';
2 |
3 | export class AngularExamplePage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { enableProdMode } from '@angular/core';
3 | import { environment } from './environments/environment';
4 | import { AppModule } from './app/app.module';
5 |
6 | if (environment.production) {
7 | enableProdMode();
8 | }
9 |
10 | platformBrowserDynamic().bootstrapModule(AppModule);
11 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AngularExamplePage } from './app.po';
2 |
3 | describe('angular-example App', function() {
4 | let page: AngularExamplePage;
5 |
6 | beforeEach(() => {
7 | page = new AngularExamplePage();
8 | });
9 |
10 | it('should display message saying app works', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('app works!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/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 | };
9 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "sourceMap": true,
4 | "declaration": false,
5 | "moduleResolution": "node",
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "lib": [
9 | "es2016"
10 | ],
11 | "outDir": "../out-tsc/e2e",
12 | "module": "commonjs",
13 | "target": "es5",
14 | "types":[
15 | "jasmine",
16 | "node"
17 | ]
18 | }
19 | }
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {toast} from "angular2-materialize";
3 |
4 | @Component({
5 | selector: 'app-root',
6 | templateUrl: './app.component.html',
7 | styleUrls: ['./app.component.css']
8 | })
9 | export class AppComponent implements OnInit {
10 | title = 'app works!';
11 |
12 | ngOnInit(): void {
13 | toast("...and Materialize works as well!")
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | AngularExample
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Loading...
15 |
16 |
17 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | @import "~materialize-css/sass/components/color"; /* This must be included to use the included variables and the color function */
4 | $primary-color: color("indigo", "base");
5 | $secondary-color: color("blue", "lighten-1");
6 |
7 | $roboto-font-path: "~materialize-css/fonts/roboto/"; /* This is needed so the materialize.scss file can load the font */
8 | @import "~materialize-css/sass/materialize";
9 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "sourceMap": true,
4 | "declaration": false,
5 | "moduleResolution": "node",
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "target": "es5",
9 | "lib": [
10 | "es2016",
11 | "dom"
12 | ],
13 | "outDir": "../out-tsc/app",
14 | "module": "es2015",
15 | "baseUrl": "",
16 | "types": []
17 | },
18 | "exclude": [
19 | "test.ts",
20 | "**/*.spec.ts"
21 | ]
22 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # IDEs and editors
12 | /.idea
13 | /.vscode
14 | .project
15 | .classpath
16 | .c9/
17 | *.launch
18 | .settings/
19 |
20 | # misc
21 | /.sass-cache
22 | /connect.lock
23 | /coverage/*
24 | /libpeerconnection.log
25 | npm-debug.log
26 | testem.log
27 | /typings
28 |
29 | # e2e
30 | /e2e/*.js
31 | /e2e/*.map
32 |
33 | #System Files
34 | .DS_Store
35 | Thumbs.db
36 |
37 | *.iml
38 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "sourceMap": true,
4 | "declaration": false,
5 | "moduleResolution": "node",
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "lib": [
9 | "es2016",
10 | "dom"
11 | ],
12 | "outDir": "../out-tsc/spec",
13 | "module": "commonjs",
14 | "target": "es5",
15 | "baseUrl": "",
16 | "types": [
17 | "jasmine",
18 | "node"
19 | ]
20 | },
21 | "files": [
22 | "test.ts"
23 | ],
24 | "include": [
25 | "**/*.spec.ts",
26 | "**/*.d.ts"
27 | ]
28 | }
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { HttpModule } from '@angular/http';
5 |
6 | import { AppComponent } from './app.component';
7 | import {MaterializeModule} from "angular2-materialize";
8 |
9 | @NgModule({
10 | declarations: [
11 | AppComponent
12 | ],
13 | imports: [
14 | BrowserModule,
15 | FormsModule,
16 | HttpModule,
17 | MaterializeModule
18 | ],
19 | providers: [],
20 | bootstrap: [AppComponent]
21 | })
22 | export class AppModule { }
23 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | // This file includes polyfills needed by Angular and is loaded before
2 | // the app. You can add your own extra polyfills to this file.
3 | import 'core-js/es6/symbol';
4 | import 'core-js/es6/object';
5 | import 'core-js/es6/function';
6 | import 'core-js/es6/parse-int';
7 | import 'core-js/es6/parse-float';
8 | import 'core-js/es6/number';
9 | import 'core-js/es6/math';
10 | import 'core-js/es6/string';
11 | import 'core-js/es6/date';
12 | import 'core-js/es6/array';
13 | import 'core-js/es6/regexp';
14 | import 'core-js/es6/map';
15 | import 'core-js/es6/set';
16 | import 'core-js/es6/reflect';
17 |
18 | import 'core-js/es7/reflect';
19 | import 'zone.js/dist/zone';
20 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | /*global jasmine */
5 | const {SpecReporter} = require('jasmine-spec-reporter');
6 |
7 | exports.config = {
8 | allScriptsTimeout: 11000,
9 | specs: [
10 | './e2e/**/*.e2e-spec.ts'
11 | ],
12 | capabilities: {
13 | 'browserName': 'chrome'
14 | },
15 | directConnect: true,
16 | baseUrl: 'http://localhost:4200/',
17 | framework: 'jasmine',
18 | jasmineNodeOpts: {
19 | showColors: true,
20 | defaultTimeoutInterval: 30000,
21 | print: function () {
22 | }
23 | },
24 | beforeLaunch: function () {
25 | require('ts-node').register({
26 | project: 'e2e/tsconfig.e2e.json'
27 | });
28 | },
29 | onPrepare: function () {
30 | jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | import 'zone.js/dist/long-stack-trace-zone';
2 | import 'zone.js/dist/proxy.js';
3 | import 'zone.js/dist/sync-test';
4 | import 'zone.js/dist/jasmine-patch';
5 | import 'zone.js/dist/async-test';
6 | import 'zone.js/dist/fake-async-test';
7 | import { getTestBed } from '@angular/core/testing';
8 | import {
9 | BrowserDynamicTestingModule,
10 | platformBrowserDynamicTesting
11 | } from '@angular/platform-browser-dynamic/testing';
12 |
13 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
14 | declare var __karma__: any;
15 | declare var require: any;
16 |
17 | // Prevent Karma from running prematurely.
18 | __karma__.loaded = function () {};
19 |
20 | // First, initialize the Angular testing environment.
21 | getTestBed().initTestEnvironment(
22 | BrowserDynamicTestingModule,
23 | platformBrowserDynamicTesting()
24 | );
25 | // Then we find all the tests.
26 | const context = require.context('./', true, /\.spec\.ts$/);
27 | // And load the modules.
28 | context.keys().map(context);
29 | // Finally, start Karma to run the tests.
30 | __karma__.start();
31 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { AppComponent } from './app.component';
5 |
6 | describe('AppComponent', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | });
13 | TestBed.compileComponents();
14 | });
15 |
16 | it('should create the app', async(() => {
17 | const fixture = TestBed.createComponent(AppComponent);
18 | const app = fixture.debugElement.componentInstance;
19 | expect(app).toBeTruthy();
20 | }));
21 |
22 | it(`should have as title 'app works!'`, async(() => {
23 | const fixture = TestBed.createComponent(AppComponent);
24 | const app = fixture.debugElement.componentInstance;
25 | expect(app.title).toEqual('app works!');
26 | }));
27 |
28 | it('should render title in a h1 tag', async(() => {
29 | const fixture = TestBed.createComponent(AppComponent);
30 | fixture.detectChanges();
31 | const compiled = fixture.debugElement.nativeElement;
32 | expect(compiled.querySelector('h1').textContent).toContain('app works!');
33 | }));
34 | });
35 |
--------------------------------------------------------------------------------
/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "project": {
3 | "version": "1.0.0-beta.22-1",
4 | "name": "angular-example"
5 | },
6 | "apps": [
7 | {
8 | "root": "src",
9 | "outDir": "dist",
10 | "assets": [
11 | "assets",
12 | "favicon.ico"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "polyfills": "polyfills.ts",
17 | "test": "test.ts",
18 | "tsconfig": "tsconfig.app.json",
19 | "testTsconfig": "tsconfig.spec.json",
20 | "prefix": "app",
21 | "mobile": false,
22 | "styles": [
23 | "styles.scss"
24 | ],
25 | "scripts": [
26 | "../node_modules/jquery/dist/jquery.js",
27 | "../node_modules/materialize-css/dist/js/materialize.js"
28 | ],
29 | "environmentSource": "environments/environment.ts",
30 | "environments": {
31 | "dev": "environments/environment.ts",
32 | "prod": "environments/environment.prod.ts"
33 | }
34 | }
35 | ],
36 | "addons": [],
37 | "packages": [],
38 | "e2e": {
39 | "protractor": {
40 | "config": "./protractor.conf.js"
41 | }
42 | },
43 | "lint": [
44 | {
45 | "project": "src/tsconfig.app.json"
46 | },
47 | {
48 | "project": "src/tsconfig.spec.json"
49 | },
50 | {
51 | "project": "e2e/tsconfig.e2e.json"
52 | }
53 | ],
54 | "test": {
55 | "karma": {
56 | "config": "./karma.conf.js"
57 | }
58 | },
59 | "defaults": {
60 | "styleExt": "css",
61 | "component": {
62 | "inlineTemplate": false,
63 | "spec": true
64 | }
65 | },
66 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json"
67 | }
68 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-example",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "angular-cli": {},
6 | "scripts": {
7 | "ng": "ng",
8 | "start": "ng serve",
9 | "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
10 | "test": "ng test",
11 | "pree2e": "webdriver-manager update --standalone false --gecko false",
12 | "e2e": "protractor"
13 | },
14 | "private": true,
15 | "dependencies": {
16 | "@angular/common": "^4.1.1",
17 | "@angular/compiler": "^4.1.1",
18 | "@angular/core": "^4.1.1",
19 | "@angular/forms": "^4.1.1",
20 | "@angular/http": "^4.1.1",
21 | "@angular/platform-browser": "^4.1.1",
22 | "@angular/platform-browser-dynamic": "^4.1.1",
23 | "@angular/router": "^4.1.1",
24 | "angular2-materialize": "^15.0.1",
25 | "core-js": "^2.4.1",
26 | "rxjs": "^5.0.1",
27 | "zone.js": "^0.8.4",
28 | "jquery": "^2.2.4",
29 | "materialize-css": "^0.98.2"
30 | },
31 | "devDependencies": {
32 | "@angular/cli": "^1.0.2",
33 | "@angular/compiler-cli": "^4.1.1",
34 | "@types/jasmine": "2.5.38",
35 | "@types/node": "^6.0.60",
36 | "codelyzer": "~2.0.0",
37 | "jasmine-core": "2.5.2",
38 | "jasmine-spec-reporter": "3.2.0",
39 | "karma": "1.4.1",
40 | "karma-chrome-launcher": "^2.0.0",
41 | "karma-cli": "^1.0.1",
42 | "karma-jasmine": "^1.1.0",
43 | "karma-jasmine-html-reporter" : "^0.2.2",
44 | "karma-coverage-istanbul-reporter" : "^0.2.0",
45 | "protractor": "~5.1.0",
46 | "ts-node": "2.0.0",
47 | "tslint": "^4.5.0",
48 | "typescript": "~2.2.0"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | files: [
19 | 'node_modules/jquery/dist/jquery.js',
20 | 'node_modules/materialize-css/dist/js/materialize.js',
21 | { pattern: './src/test.ts', watched: false }
22 | ],
23 | preprocessors: {
24 | './src/test.ts': ['@angular/cli']
25 | },
26 | mime: {
27 | 'text/x-typescript': ['ts','tsx']
28 | },
29 | coverageIstanbulReporter: {
30 | reports: [ 'html', 'lcovonly' ],
31 | fixWebpackSourcePaths: true
32 | },
33 | angularCli: {
34 | environment: 'dev'
35 | },
36 | reporters: config.angularCli && config.angularCli.codeCoverage
37 | ? ['progress', 'coverage-istanbul']
38 | : ['progress', 'kjhtml'],
39 | port: 9876,
40 | colors: true,
41 | logLevel: config.LOG_INFO,
42 | autoWatch: true,
43 | browsers: ['Chrome'],
44 | singleRun: false
45 | });
46 | };
47 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "callable-types": true,
7 | "import-blacklist": [true, "rxjs"],
8 | "import-spacing": true,
9 | "interface-over-type-literal": true,
10 | "no-empty-interface": true,
11 | "no-string-throw": true,
12 | "prefer-const": true,
13 | "typeof-compare": true,
14 | "unified-signatures": true,
15 | "class-name": true,
16 | "comment-format": [
17 | true,
18 | "check-space"
19 | ],
20 | "curly": true,
21 | "eofline": true,
22 | "forin": true,
23 | "indent": [
24 | true,
25 | "spaces"
26 | ],
27 | "label-position": true,
28 | "max-line-length": [
29 | true,
30 | 140
31 | ],
32 | "member-access": false,
33 | "member-ordering": [
34 | true,
35 | "static-before-instance",
36 | "variables-before-functions"
37 | ],
38 | "no-arg": true,
39 | "no-bitwise": true,
40 | "no-console": [
41 | true,
42 | "debug",
43 | "info",
44 | "time",
45 | "timeEnd",
46 | "trace"
47 | ],
48 | "no-construct": true,
49 | "no-debugger": true,
50 | "no-duplicate-variable": true,
51 | "no-empty": false,
52 | "no-eval": true,
53 | "no-inferrable-types": [true, "ignore-params"],
54 | "no-shadowed-variable": true,
55 | "no-string-literal": false,
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 | "quotemark": [
70 | true,
71 | "single"
72 | ],
73 | "radix": true,
74 | "semicolon": [
75 | "always"
76 | ],
77 | "triple-equals": [
78 | true,
79 | "allow-null-check"
80 | ],
81 | "typedef-whitespace": [
82 | true,
83 | {
84 | "call-signature": "nospace",
85 | "index-signature": "nospace",
86 | "parameter": "nospace",
87 | "property-declaration": "nospace",
88 | "variable-declaration": "nospace"
89 | }
90 | ],
91 | "variable-name": false,
92 | "whitespace": [
93 | true,
94 | "check-branch",
95 | "check-decl",
96 | "check-operator",
97 | "check-separator",
98 | "check-type"
99 | ],
100 |
101 | "directive-selector": [true, "attribute", "app", "camelCase"],
102 | "component-selector": [true, "element", "app", "kebab-case"],
103 | "use-input-property-decorator": true,
104 | "use-output-property-decorator": true,
105 | "use-host-property-decorator": true,
106 | "no-input-rename": true,
107 | "no-output-rename": true,
108 | "use-life-cycle-interface": true,
109 | "use-pipe-transform-interface": true,
110 | "component-class-suffix": true,
111 | "directive-class-suffix": true,
112 | "no-access-missing-member": true,
113 | "templates-use-public": true,
114 | "invoke-injectable": true
115 | }
116 | }
117 |
--------------------------------------------------------------------------------