eggheadio-projects/egghead-angular-2-dependency-injection-di-explained: Code for Angular 2 Dependency Injection

Language:        JavaScript
BasedOnStyle:    Google
ColumnLimit:     100

# http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = 0
trim_trailing_whitespace = false

# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp

# dependencies
/node_modules
/bower_components

# IDEs and editors
/.idea

# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings

# e2e
/e2e/*.js
/e2e/*.map

#System Files
.DS_Store

#Plunker

This code can be found on [plunker](https://embed.plnkr.co/github/eggheadio-projects/egghead-angular-2-dependency-injection-di-explained/angular-2-understanding-opaquetoken?preview=plnkr.html&show=src%2Fapp%2Flist.component.ts,preview)

# Angular 2 Dependency Injection

This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.15.

## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 
Before running the tests make sure you are serving the app via `ng serve`.

## Deploying to Github Pages

Run `ng github-pages:deploy` to deploy to Github Pages.

## Further help

To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

{
  "project": {
    "version": "1.0.0-beta.15",
    "name": "egghead-angular-2-dependency-injection-di-explained"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

import { Angular2FundamentalsPage } from './app.po';

describe('angular2-fundamentals App', function() {
  let page: Angular2FundamentalsPage;

  beforeEach(() => {
    page = new Angular2FundamentalsPage();
  });

  it('should display message saying app works', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('app works!');
  });
});

import { browser, element, by } from 'protractor/globals';

export class Angular2FundamentalsPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc-e2e",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-remap-istanbul'),
      require('angular-cli/plugins/karma')
    ],
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
    remapIstanbulReporter: {
      reports: {
        html: 'coverage',
        lcovonly: './coverage/coverage.lcov'
      }
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: ['progress', 'karma-remap-istanbul'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

{
  "name": "egghead-angular-2-dependency-injection-di-explained",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/router": "4.1.3",
    "core-js": "^2.4.1",
    "rxjs": "5.4.0",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~3.0.1",
    "jasmine-core": "2.6.3",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "5.1.2",
    "ts-node": "3.0.6",
    "tslint": "5.4.3",
    "typescript": "2.3.4"
  }
}

<!DOCTYPE html>
<html>
<head>
  <title>Angular 2 Dependency Injection</title>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">

  <base href="./">


  <link rel="stylesheet"
        href="./src/styles.css">
  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
  <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>
  <script>
    const app = {'app': './src/app', 'src':'./src'};
    const npm = 'https://unpkg.com';
    const transpiler = 'ts';
    const typescriptOptions = {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "suppressImplicitAnyIndexErrors": true
    };
    const meta = {
      'typescript': {"exports": "ts"}
    };
    const packages = {
      app:{
        main: './index.ts',
        defaultExtension: 'ts'
      },
      src: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    };

    const browserCompiler = {
      'ts': `${npm}/plugin-typescript@5.1.2/lib/plugin.js`,
      'typescript': `${npm}/typescript@2.0.2/lib/typescript.js`,
    };

    const dependencies = fetch('./package.json')
      .then(pkg => pkg.json())
      .then(body => body.dependencies);

    dependencies.then(deps => {
      const depInfo = Object.keys(deps)
        .map(key => ({pkg: key, org: key.split('/')[0], repo: key.split('/')[1], version: deps[key]}));

      const ngInfo = depInfo.filter(info => info.org === '@angular')
        .reduce((acc, {pkg, org, repo, version}) => Object.assign(acc, {
          [`${pkg}`]: `${npm}/${pkg}@${version}/bundles/${repo}.umd.js`
        }), {});

      const libInfo = depInfo
        .filter(info => info.org !== '@angular')
        .filter(info => info.org !== 'core-js')
        .filter(info => info.org !== 'zone.js')
        .filter(info => info.org !== 'ts-helpers')
        .reduce((acc, {pkg, org, repo, version}) => Object.assign(acc, {
          [`${pkg}`]: `${npm}/${pkg}@${version}`
        }), {});

      return {
        paths:{
          'zone.js/*':'https://unpkg.com/zone.js@0.6.23?main=browser',
          'core-js/*':'https://unpkg.com/core-js/client/shim.min.js'
        },
        transpiler,
        typescriptOptions,
        meta,
        packages,
        map: Object.assign(app, browserCompiler, libInfo, ngInfo)
      };
    })
      .then(config => System.config(config))
      .then(()=> System.import('src'))
      .catch(function (err) {
        console.error(err);
      });
  </script>
</head>
<body>
  <list-component>Loading...</list-component>
</body>
</html>

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js

/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter());
  }
};

[
  { "id": 0, "name": "Pascal Precht", "country": "Germany"},
  { "id": 1, "name": "Christoph Burgdorf",    "country": "Germany"},
  { "id": 2, "name": "Thomas Burleson", "country": "United States"}
]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ListComponent } from './list.component';
import { DataService } from './data.service';
import { LogDebugger } from './log-debugger.service';
import { ConsoleService } from './console.service';
import { API_URL } from './app.tokens';
import { THIRD_PARTY_PROVIDERS } from './third-party';


// apiUrl is set to ./src/api to work in plunker

@NgModule({
  declarations: [
    ListComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    DataService,
    ConsoleService,
    {
      provide: LogDebugger,
      useFactory: (consoleService) => {
        return new LogDebugger(consoleService, true);
      },
      deps: [ConsoleService]
    },
    {
      provide: API_URL,
      useValue: './src/api'
    },
    THIRD_PARTY_PROVIDERS
    ],
  bootstrap: [ListComponent]
})
export class AppModule {
}

import { OpaqueToken } from '@angular/core'

export const API_URL = new OpaqueToken('apiUrl');

export class ConsoleService {
  log(message) {
    console.log(message);
  }
  
}

import { Injectable, Inject} from '@angular/core';
import { LogDebugger } from './log-debugger.service';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'
import { API_URL } from './app.tokens';

@Injectable()
export class DataService {
 
  constructor(private logDebugger: LogDebugger, private http: Http, @Inject(API_URL) private apiUrl) {}

  getItems() {
    this.logDebugger.debug('Getting items...');
    return this.http.get(`${this.apiUrl}/items.json`)
                    .map(res => res.json())
  }
}

export * from './list.component';
export * from './app.module';

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataService } from './data.service';
import { LogDebugger } from './log-debugger.service';



// All the components and pipes now must be 
// declared via an NgModule since 2.0.0-rc.6
// https://github.com/angular/angular/blob/master/CHANGELOG.md

@Component({
  selector: 'list-component',
  template: `
    <ul>
      <li *ngFor="let item of items | async">
        {{item.id}}: {{item.name}} lives in {{item.country}}
      </li>  
    </ul>
  `
})
export class ListComponent implements OnInit {
  
  items:Observable<Array<any>>;

  
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.items = this.dataService.getItems();
  }

}

import { ConsoleService } from './console.service';
export class LogDebugger {
  constructor(private ConsoleService, private enabled: boolean) {}

  debug(message) {
    if (this.enabled) {
      this.ConsoleService.log(`DEBUG: ${message}`);
    }
  }
}

import { OpaqueToken } from '@angular/core';

const API_URL = new OpaqueToken('apiUrl');

export const THIRD_PARTY_PROVIDERS = [
  {
    provide: API_URL,
    useValue: 'some other value'
  }
];

export const environment = {
  production: true
};

// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `angular-cli.json`.

export const environment = {
  production: false
};

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular 2 Dependency Injection</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  
</head>
<body>
  <list-component>Loading...</list-component>
</body>
</html>

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app';
import { ListComponent } from './app/list.component';

if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

// This file includes polyfills needed by Angular 2 and is loaded before
// the app. You can add your own extra polyfills to this file.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

/* You can add global styles to this file, and also import other style files */

import './polyfills.ts';

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};


Promise.all([
  System.import('@angular/core/testing'),
  System.import('@angular/platform-browser-dynamic/testing')
])
  // First, initialize the Angular testing environment.
  .then(([testing, testingBrowser]) => {
    testing.getTestBed().initTestEnvironment(
      testingBrowser.BrowserDynamicTestingModule,
      testingBrowser.platformBrowserDynamicTesting()
    );
  })
  // Then we find all the tests.
  .then(() => require.context('./', true, /\.spec\.ts/))
  // And load the modules.
  .then(context => context.keys().map(context))
  // Finally, start Karma to run the tests.
  .then(__karma__.start, __karma__.error);

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

// Typings reference file, see links for more information
// https://github.com/typings/typings
// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

declare var System: any;

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "eofline": true,
    "forin": true,
    "indent": [
      true,
      "spaces"
    ],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-eval": true,
    "no-inferrable-types": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-unused-variable": true,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],

    "directive-selector-prefix": [true, "app"],
    "component-selector-prefix": [true, "app"],
    "directive-selector-name": [true, "camelCase"],
    "component-selector-name": [true, "kebab-case"],
    "directive-selector-type": [true, "attribute"],
    "component-selector-type": [true, "element"],
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }
}