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-value-providers?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';
// 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: 'apiUrl',
useValue: './src/api'
}
],
bootstrap: [ListComponent]
})
export class AppModule {
}
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'
@Injectable()
export class DataService {
constructor(private logDebugger: LogDebugger, private http: Http, @Inject('apiUrl') 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}`);
}
}
}
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
}
}