# Editor configuration, see 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
.project
.classpath
*.launch
.settings/
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
#System Files
.DS_Store
Thumbs.db
# Plunker
This code can be found on [plunker](https://embed.plnkr.co/github/eggheadio-projects/egghead-wikipedia-demo/angular-2-building-an-instant-search-with-angular-2-combining-observables-with-flatmap?preview=plnkr.html&show=src%2Fapp%2Fapp.component.ts,preview)
## WikiSearch
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.10.
## 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/route/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).
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)'
]
});
};
{
"project": {
"version": "1.0.0-beta.10",
"name": "wiki-search"
},
"apps": [
{
"main": "src/main.ts",
"tsconfig": "src/tsconfig.json",
"mobile": false
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "config/protractor.conf.js"
}
},
"test": {
"karma": {
"config": "config/karma.conf.js"
}
},
"defaults": {
"prefix": "app",
"sourceDir": "src",
"styleExt": "css",
"prefixInterfaces": false,
"lazyRoutePrefix": "+"
}
}
export const environment = {
production: false
};
// Angular-CLI server configuration
// Unrelated to environment.dev|prod.ts
/* jshint node: true */
module.exports = function(environment) {
return {
environment: environment,
baseURL: '/',
locationType: 'auto'
};
};
export const environment = {
production: true
};
// Test shim for Karma, needed to load files via SystemJS
/*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
__karma__.loaded = function () {
};
var distPath = '/base/dist/';
var appPaths = ['app']; //Add all valid source code folders here
function isJsFile(path) {
return path.slice(-3) == '.js';
}
function isSpecFile(path) {
return path.slice(-8) == '.spec.js';
}
function isAppFile(path) {
return isJsFile(path) && appPaths.some(function(appPath) {
var fullAppPath = distPath + appPath + '/';
return path.substr(0, fullAppPath.length) == fullAppPath;
});
}
var allSpecFiles = Object.keys(window.__karma__.files)
.filter(isSpecFile)
.filter(isAppFile);
// Load our SystemJS configuration.
System.config({
baseURL: distPath
});
System.import('system-config.js').then(function() {
// Load and configure the TestComponentBuilder.
return Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
var testing = providers[0];
var testingBrowser = providers[1];
testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
});
}).then(function() {
// Finally, load all spec files.
// This will run the tests directly.
return Promise.all(
allSpecFiles.map(function (moduleName) {
return System.import(moduleName);
}));
}).then(__karma__.start, __karma__.error);
// 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'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher')
],
customLaunchers: {
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
{ pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
{ pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
{ pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
{ pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
{ pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
{ pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
{ pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false },
{ pattern: 'config/karma-test-shim.js', included: true, watched: true },
// Distribution folder.
{ pattern: 'dist/**/*', included: false, watched: true }
],
exclude: [
// Vendor packages might include spec files. We don't want to use those.
'dist/vendor/**/*.spec.js'
],
preprocessors: {},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
// 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());
}
};
import { WikiSearchPage } from './app.po';
describe('wiki-search App', function() {
let page: WikiSearchPage;
beforeEach(() => {
page = new WikiSearchPage();
});
it('should display message saying app works', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('app works!');
});
});
export class WikiSearchPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "",
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"rootDir": ".",
"sourceMap": true,
"sourceRoot": "/",
"target": "es5"
}
}
/// <reference path="../typings/index.d.ts" />
{
"name": "wiki-search",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-beta.2",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.10",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "1.3.1"
}
}
<!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="./">
<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 src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.26/zone.min.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>
<app-root>Loading...</app-root>
</body>
</html>
<div>
<h2>Wikipedia Search</h2>
<input (input)="term$.next($event.target.value)">
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
</div>
import { Component } from '@angular/core';
import { WikipediaSearchService } from './wikipedia-search.service';
import { Subject } from 'rxjs/Subject';
//application wide shared Rx operators
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/mergeMap';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
items:Array<string>;
term$ = new Subject<string>();
constructor(private service:WikipediaSearchService) {
this.term$
.debounceTime(400)
.distinctUntilChanged()
.flatMap(term => this.service.search(term))
.subscribe(results => this.items = results);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { JsonpModule } from '@angular/http';
import { WikipediaSearchService } from './wikipedia-search.service';
@NgModule({
providers: [WikipediaSearchService],
declarations: [AppComponent],
imports: [BrowserModule, JsonpModule],
bootstrap: [AppComponent],
})
export class AppModule {}
// The file for the current environment will overwrite this one during build
// Different environments can be found in config/environment.{dev|prod}.ts
// The build system defaults to the dev environment
export const environment = {
production: false
};
export * from './environment';
export * from './app.component';
/* tslint:disable:no-unused-variable */
import { addProviders, async, inject } from '@angular/core/testing';
import { WikipediaSearchService } from './wikipedia-search.service';
describe('Service: WikipediaSearch', () => {
beforeEach(() => {
addProviders([WikipediaSearchService]);
});
it('should ...',
inject([WikipediaSearchService],
(service: WikipediaSearchService) => {
expect(service).toBeTruthy();
}));
});
import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';
import 'rxjs/add/operator/delay';
@Injectable()
export class WikipediaSearchService {
constructor(private jsonp: Jsonp) { }
search (term: string) {
let search = new URLSearchParams();
search.set('action', 'opensearch');
search.set('search', term);
search.set('format', 'json');
let obs = this.jsonp.get('https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', {search})
.map(response => response.json()[1]);
if (term.length === 2) {
obs = obs.delay(1000)
}
return obs;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WikiSearch</title>
<base href="/">
{{#unless environment.production}}
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
{{/unless}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
{{#each scripts.polyfills}}
<script src="{{.}}"></script>
{{/each}}
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
</html>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
"use strict";
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};
/** User packages configuration. */
const packages: any = {
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/forms',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
/** @cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"mapRoot": "/",
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../dist/",
"rootDir": ".",
"sourceMap": true,
"target": "es5",
"inlineSources": true
},
"files": [
"main.ts",
"typings.d.ts"
]
}
// Typings reference file, see links for more information
// https://github.com/typings/typings
// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
/// <reference path="../typings/index.d.ts" />
declare var module: { id: string };
{
"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-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
}
}
{
"globalDevDependencies": {
"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
},
"globalDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
}
}