shred and watch build tooling ( dgeni, gulp, jade)
This commit is contained in:
Jay Traband
Naomi Black
parent
5fbd16f2f3
commit
7e6ff558e3
19
README.md
19
README.md
|
|
@ -12,6 +12,25 @@ Angular.io is currently the preview site for Angular 2. This site also includes
|
|||
3. run `harp server`
|
||||
4. Open this url in the browser: [http://localhost:9000/](http://localhost:9000/)
|
||||
|
||||
## Development setup with watches
|
||||
1. cd into root directory `angular.io/`
|
||||
2. run `gulp serve-and-watch`
|
||||
3. Open this url in the browser: [http://localhost:9000/](http://localhost:9000/)
|
||||
4. Refresh your browser to see any changes.
|
||||
|
||||
## Development setup with watches and browser reload
|
||||
1. cd into root directory `angular.io/`
|
||||
2. install `browser-sync`
|
||||
|
||||
`npm install -g browser-sync`<br/>
|
||||
|
||||
*or on Windows*<br/>
|
||||
|
||||
`npm install -g browser-sync --msvs_version=2013`
|
||||
|
||||
3. run `gulp serve-and-watch`
|
||||
4. run `browser-sync start --proxy localhost:9000 --files "public/docs/**/*/**/*" --reloadDelay 500`
|
||||
5. browser will launch and stay refreshed automatically.
|
||||
|
||||
## Technology Used
|
||||
- Angular 1.x: The production ready version of Angular
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
var gulp = require('gulp');
|
||||
var watch = require('gulp-watch');
|
||||
var gutil = require('gulp-util');
|
||||
var Dgeni = require('dgeni');
|
||||
var path = require('path');
|
||||
var del = require('del');
|
||||
|
||||
var docShredder = require('./public/doc-shredder/doc-shredder');
|
||||
|
||||
var shredOptions = {
|
||||
basePath: path.resolve('./public/docs'),
|
||||
sourceDir: "_examples",
|
||||
destDir: "_fragments"
|
||||
};
|
||||
|
||||
gulp.task('shred-full', ['shred-clean'], function() {
|
||||
docShredder.shred( shredOptions);
|
||||
});
|
||||
|
||||
gulp.task('serve-and-watch', function (cb) {
|
||||
var pattern = path.join(shredOptions.basePath, shredOptions.sourceDir, "**/*.*");
|
||||
|
||||
execCommands(['harp server'])
|
||||
|
||||
watch([ pattern], function(event, done) {
|
||||
console.log('Event type: ' + event.event); // added, changed, or deleted
|
||||
console.log('Event path: ' + event.path); // The path of the modified file
|
||||
docShredder.shredSingleDir(shredOptions, event.path);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
gulp.task('shred-clean', function(cb) {
|
||||
var cleanPath = path.join(shredOptions.basePath, shredOptions.destDir, '**/*.*')
|
||||
del([ cleanPath, '!**/*.ovr.*'], function (err, paths) {
|
||||
// console.log('Deleted files/folders:\n', paths.join('\n'));
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// added options are: shouldLog
|
||||
// cb is function(err, stdout, stderr);
|
||||
function execCommands(cmds, options, cb) {
|
||||
options = options || {};
|
||||
options.shouldThrow = options.shouldThrow == null ? true : options.shouldThrow;
|
||||
options.shouldLog = options.shouldLog == null ? true : options.shouldLog;
|
||||
if (!cmds || cmds.length == 0) cb(null, null, null);
|
||||
var exec = require('child_process').exec; // just to make it more portable.
|
||||
exec(cmds[0], options, function(err, stdout, stderr) {
|
||||
if (err == null) {
|
||||
if (options.shouldLog) {
|
||||
gutil.log('cmd: ' + cmds[0]);
|
||||
gutil.log('stdout: ' + stdout);
|
||||
}
|
||||
if (cmds.length == 1) {
|
||||
cb(err, stdout, stderr);
|
||||
} else {
|
||||
execCommands(cmds.slice(1), options, cb);
|
||||
}
|
||||
} else {
|
||||
if (options.shouldLog) {
|
||||
gutil.log('exec error on cmd: ' + cmds[0]);
|
||||
gutil.log('exec error: ' + err);
|
||||
if (stdout) gutil.log('stdout: ' + stdout);
|
||||
if (stderr) gutil.log('stderr: ' + stderr);
|
||||
}
|
||||
if (err && options.shouldThrow) throw err;
|
||||
cb(err, stdout, stderr);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
gulp.task('default', ['shred']);
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "angular.io",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "Angular 2 documentation",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Apache",
|
||||
"url": "http://www.apache.org/licenses/LICENSE-2.0.html"
|
||||
}
|
||||
],
|
||||
"bugs": {
|
||||
"url": ""
|
||||
},
|
||||
"devDependencies": {
|
||||
"canonical-path": "0.0.2",
|
||||
"del": "^1.2.0",
|
||||
"dgeni": "^0.4.0",
|
||||
"dgeni-packages": "^0.10.0",
|
||||
"gulp": "^3.5.6",
|
||||
"gulp-util": "^3.0.6",
|
||||
"gulp-watch": "^4.3.4",
|
||||
"lodash": "^3.10.1",
|
||||
"path": "^0.11.14"
|
||||
},
|
||||
"contributors": [
|
||||
"Jay Traband <jayt@ideablade.com>"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
- var getFrag = function(fileName) {
|
||||
- var frag = partial(fileName);
|
||||
- if (frag == null) {
|
||||
- return "BAD FILENAME: " + fileName + " Current path: " + current.path;
|
||||
- } else {
|
||||
- // ``` gets translated to <pre><code>.....</code></pre> and we need
|
||||
- // to remove this from the fragment prefix is 11 long and suffix is 13 long
|
||||
- var r = frag.substring(11, frag.length-13);
|
||||
- return r;
|
||||
- }
|
||||
- }
|
||||
|
||||
- var getExtn = function(fileName) {
|
||||
- var ix = fileName.lastIndexOf('.');
|
||||
- return ix > 0 ? fileName.substr(ix+1) : "";
|
||||
- }
|
||||
|
||||
// HACK: to avoid having to include a path in makeTabs calls
|
||||
- var currentPath = current.path;
|
||||
// need to back up to 'docs'
|
||||
- var pathToFrags = "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/";
|
||||
|
||||
mixin makeTabs(path, fileNames, tabNames)
|
||||
- fileNames = fileNames.split(",");
|
||||
- tabNames = tabNames.split(",")
|
||||
// .p Length #{currentPath.length}
|
||||
code-tabs
|
||||
each fileName,index in fileNames
|
||||
- var tabName = tabNames[index].trim();
|
||||
- var fileName = fileNames[index].trim();
|
||||
- var extn = getExtn(fileName);
|
||||
// - var extPath = pathToFrags + (path.length ? path + "/" : "");
|
||||
- var extPath = pathToFrags + path + "/";
|
||||
code-pane(language="#{extn}" name="#{tabName}" format="linenums")
|
||||
!= getFrag(extPath + fileName + ".md")
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
|
||||
// Canonical path provides a consistent path (i.e. always forward slashes) across different OSes
|
||||
var path = require('canonical-path');
|
||||
// var path = require('path');
|
||||
var del = require('del');
|
||||
var Dgeni = require('dgeni');
|
||||
var _ = require('lodash');
|
||||
|
||||
var createPackage = function(shredOptions) {
|
||||
var shredder = new Dgeni.Package('doc-shredder', [
|
||||
// require('dgeni-packages/base') - doesn't work
|
||||
]);
|
||||
shredder.options = resolveOptions(shredOptions);
|
||||
return configure(shredder);
|
||||
};
|
||||
|
||||
var resolveOptions = function(shredOptions) {
|
||||
return _.defaults({}, shredOptions, {
|
||||
basePath: path.resolve('.'),
|
||||
// read files from any subdir under here
|
||||
sourceDir: "docs/_examples",
|
||||
// shredded files get copied here with same subdir structure.
|
||||
destDir: "docs/_fragments",
|
||||
// whether to include subdirectories when shredding.
|
||||
includeSubdirs: true
|
||||
});
|
||||
}
|
||||
|
||||
var shred = function(shredOptions) {
|
||||
try {
|
||||
var pkg = createPackage(shredOptions);
|
||||
var dgeni = new Dgeni([ pkg]);
|
||||
return dgeni.generate();
|
||||
} catch(x) {
|
||||
console.log(x.stack);
|
||||
throw x;
|
||||
}
|
||||
}
|
||||
|
||||
var shredSingleDir = function(shredOptions, filePath) {
|
||||
shredOptions = resolveOptions(shredOptions);
|
||||
var root = path.resolve(shredOptions.basePath, shredOptions.sourceDir);
|
||||
var fileDir = path.dirname(filePath);
|
||||
var relativePath = path.relative(root, fileDir);
|
||||
var sourceDir = path.join(shredOptions.sourceDir, relativePath);
|
||||
var destDir = path.join(shredOptions.destDir, relativePath);
|
||||
var options = {
|
||||
basePath: shredOptions.basePath,
|
||||
includeSubdirs: false,
|
||||
sourceDir: sourceDir,
|
||||
destDir: destDir
|
||||
}
|
||||
var cleanPath = path.join(shredOptions.basePath, destDir, '*.*')
|
||||
del([ cleanPath, '!**/*.ovr.*'], function (err, paths) {
|
||||
// console.log('Deleted files/folders:\n', paths.join('\n'));
|
||||
return shred(options);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
shred: shred,
|
||||
shredSingleDir: shredSingleDir,
|
||||
createPackage: createPackage,
|
||||
resolveOptions: resolveOptions
|
||||
};
|
||||
|
||||
function configure(shredder) {
|
||||
var options = shredder.options;
|
||||
shredder
|
||||
.processor(require('dgeni-packages/base/processors/read-files'))
|
||||
.processor(require('dgeni-packages/base/processors/write-files'))
|
||||
.factory(require('dgeni-packages/base/services/writefile'))
|
||||
|
||||
// Ugh... Boilerplate that dgeni needs to sequence operations
|
||||
.processor({ name: 'reading-files' })
|
||||
.processor({ name: 'files-read', $runAfter: ['reading-files'] })
|
||||
.processor({ name: 'processing-docs', $runAfter: ['files-read'] })
|
||||
.processor({ name: 'docs-processed', $runAfter: ['processing-docs'] })
|
||||
.processor({ name: 'adding-extra-docs', $runAfter: ['docs-processed'] })
|
||||
.processor({ name: 'extra-docs-added', $runAfter: ['adding-extra-docs'] })
|
||||
.processor({ name: 'computing-ids', $runAfter: ['extra-docs-added'] })
|
||||
.processor({ name: 'ids-computed', $runAfter: ['computing-ids'] })
|
||||
.processor({ name: 'computing-paths', $runAfter: ['ids-computed'] })
|
||||
.processor({ name: 'paths-computed', $runAfter: ['computing-paths'] })
|
||||
.processor({ name: 'rendering-docs', $runAfter: ['paths-computed'] })
|
||||
.processor({ name: 'docs-rendered', $runAfter: ['rendering-docs'] })
|
||||
.processor({ name: 'writing-files', $runAfter: ['docs-rendered'] })
|
||||
.processor({ name: 'files-written', $runAfter: ['writing-files'] })
|
||||
|
||||
.factory(require('./fileShredder'))
|
||||
.factory(require('./regionExtractor'))
|
||||
.processor(require('./mdWrapperProcessor'))
|
||||
|
||||
.config(function(log) {
|
||||
// Set logging level
|
||||
log.level = 'info';
|
||||
})
|
||||
|
||||
|
||||
.config(function(readFilesProcessor, fileShredder ) {
|
||||
readFilesProcessor.fileReaders = [ fileShredder];
|
||||
})
|
||||
|
||||
// default configs - may be overriden
|
||||
.config(function(readFilesProcessor) {
|
||||
|
||||
// Specify the base path used when resolving relative paths to source and output files
|
||||
readFilesProcessor.basePath = options.basePath;
|
||||
|
||||
// Specify collections of source files that should contain the documentation to extract
|
||||
var extns = ['*.js', '*.html', '*.ts', '*.css' ];
|
||||
var includeFiles = extns.map(function(extn) {
|
||||
if (options.includeSubdirs) {
|
||||
return path.join(options.sourceDir, '**', extn);
|
||||
} else {
|
||||
return path.join(options.sourceDir, extn);
|
||||
}
|
||||
});
|
||||
readFilesProcessor.sourceFiles = [
|
||||
{
|
||||
// Process all candidate files in `src` and its subfolders ...
|
||||
include: includeFiles,
|
||||
|
||||
// When calculating the relative path to these files use this as the base path.
|
||||
// So `src/foo/bar.js` will have relative path of `foo/bar.js`
|
||||
basePath: options.sourceDir
|
||||
}
|
||||
];
|
||||
})
|
||||
.config(function(writeFilesProcessor) {
|
||||
// Specify where the writeFilesProcessor will write our generated doc files
|
||||
writeFilesProcessor.outputFolder = options.destDir;
|
||||
});
|
||||
return shredder;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* @dgService htmlFileShredder
|
||||
* @description
|
||||
*/
|
||||
module.exports = function fileShredder(log, regionExtractor) {
|
||||
return {
|
||||
name: 'fileShredder',
|
||||
|
||||
getDocs: function (fileInfo) {
|
||||
var commentMarkers;
|
||||
switch (fileInfo.extension) {
|
||||
case 'ts':
|
||||
case 'js':
|
||||
commentMarkers = ['//'];
|
||||
break;
|
||||
case 'html':
|
||||
commentMarkers = ['<!--'];
|
||||
break;
|
||||
case 'css':
|
||||
commentMarkers = ['/*'];
|
||||
break;
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
log.info("fileShredder processing: " + fileInfo.projectRelativePath);
|
||||
return regionExtractor(fileInfo.content, commentMarkers);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// Not currently used - but wanted to leave it as an example
|
||||
// var _ = require('lodash');
|
||||
|
||||
/**
|
||||
* dgProcessor shredderProcessor
|
||||
* @description
|
||||
*
|
||||
*/
|
||||
module.exports = function mdWrapperProcessor(log) {
|
||||
return {
|
||||
$runAfter: ['readFilesProcessor'],
|
||||
$runBefore: ['writing-files'],
|
||||
$process: function(docs) {
|
||||
return docs.map(function(doc) {
|
||||
var fileInfo = doc.fileInfo;
|
||||
doc.renderedContent = '```\n' + doc.content + '\n```';
|
||||
var regionSuffix = (doc.regionName && doc.regionName.length) ? "-" + doc.regionName.trim() : "";
|
||||
var origName = fileInfo.baseName + "." + fileInfo.extension;
|
||||
|
||||
var newName = fileInfo.baseName + regionSuffix + "." + fileInfo.extension + ".md";
|
||||
doc.outputPath = fileInfo.relativePath.replace(origName, newName);
|
||||
return doc;
|
||||
})
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
# decisions needed
|
||||
|
||||
- 1) do we want to mark up all documents that may show up in documentation with #docregion tags or do we want to isolate all
|
||||
runnable examples in their own subdir.
|
||||
|
||||
# todo
|
||||
|
||||
- 1) still need to generate js files from ts files before shredding to extract fragments
|
||||
- 2) still need to create watches to update fragment shredder when source tests change
|
||||
- 3) still need to create mechanism for overridding fragments. ( '_' prefix in name maybe).
|
||||
|
||||
# notes
|
||||
|
||||
- 1) Region syntax for html
|
||||
|
||||
<!--#docregion main -->
|
||||
|
||||
<!--#enddocregion -->
|
||||
- 2) Region syntax for js/ts
|
||||
|
||||
// #docregion main
|
||||
|
||||
// #enddocregion
|
||||
|
||||
# typescript compiler call
|
||||
tsc --m commonjs --t es5 --emitDecoratorMetadata --experimentalDecorators --sourceMap app.ts
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
module.exports = function regionExtractor() {
|
||||
// split out each fragment in {content} into a separate doc
|
||||
// a fragment is a section of text surrounded by
|
||||
// 1) In front: a comment marker followed by '#docregion' followed by an optional region name. For example:
|
||||
// <-- #docregion foo --> for html
|
||||
// or // #docregion foo for js/ts
|
||||
// 2) In back: a comment marker followed by '#enddocregion'
|
||||
// Regions can be nested and any regions not 'closed' are automatically closed at the end of the doc.
|
||||
return function(content, commentPrefixes) {
|
||||
|
||||
var lines = result = content.split(/\r?\n/);
|
||||
var docs = [];
|
||||
var docStack = [];
|
||||
var doc = null;
|
||||
var nullLine = '###';
|
||||
var rx = new RegExp(nullLine + '\n', 'g');
|
||||
lines.forEach(function(line, ix) {
|
||||
if (isCommentLine(line, commentPrefixes)) {
|
||||
if (hasRegionTag(line)) {
|
||||
doc = {startIx: ix, regionName: getRegionName(line)};
|
||||
lines[ix] = nullLine;
|
||||
docs.push(doc);
|
||||
docStack.push(doc);
|
||||
} else if (hasEndRegionTag(line)) {
|
||||
lines[ix] = nullLine;
|
||||
doc.endIx = ix;
|
||||
doc = docStack.pop();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
docs.forEach(function(doc) {
|
||||
var content;
|
||||
if (doc.endIx) {
|
||||
content = lines.slice(doc.startIx + 1, doc.endIx).join('\n');
|
||||
} else {
|
||||
content = lines.slice(doc.startIx + 1).join('\n');
|
||||
}
|
||||
// eliminate all #docregion lines
|
||||
doc.content = content.replace(rx, '');
|
||||
|
||||
});
|
||||
return docs;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function isCommentLine(line, commentPrefixes) {
|
||||
return commentPrefixes.some(function(prefix) {
|
||||
return line.trim().indexOf(prefix) == 0;
|
||||
});
|
||||
}
|
||||
|
||||
function hasRegionTag(line) {
|
||||
return line.indexOf("#docregion") >= 0;
|
||||
}
|
||||
|
||||
function hasEndRegionTag(line) {
|
||||
return line.indexOf("#enddocregion") >= 0;
|
||||
}
|
||||
|
||||
function getRegionName(line) {
|
||||
try {
|
||||
var name = line.match(/#docregion\s*(\S*).*/)[1];
|
||||
// Hack for html regions that look like <!-- #docregion --> or */
|
||||
name = name.replace("-->","").replace('\*\/',"");
|
||||
return name;
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
lib-cov
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
test_fragments
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
|
||||
npm-debug.log
|
||||
node_modules
|
||||
|
||||
build
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "{}"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright {yyyy} {name of copyright owner}
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
var gulp = require('gulp');
|
||||
var path = require('canonical-path');
|
||||
var Dgeni = require('dgeni');
|
||||
var del = require('del');
|
||||
var watch = require('gulp-watch');
|
||||
|
||||
var docShredder = require('../doc-shredder');
|
||||
|
||||
var shredOptions = docShredder.resolveOptions({
|
||||
sourceDir: "test_source",
|
||||
destDir: "test_fragments"
|
||||
});
|
||||
|
||||
gulp.task('shred', function() {
|
||||
return docShredder.shred(shredOptions);
|
||||
});
|
||||
|
||||
gulp.task('clean', function (cb) {
|
||||
var cleanPath = path.join(shredOptions.destDir, '**/*.*')
|
||||
del([ cleanPath, '!**/*.ovr.*'], function (err, paths) {
|
||||
// console.log('Deleted files/folders:\n', paths.join('\n'));
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('watch', function (cb) {
|
||||
var pattern = path.join(shredOptions.sourceDir, "**/*.*");
|
||||
watch([ pattern], function(event, done) {
|
||||
console.log('Event type: ' + event.event); // added, changed, or deleted
|
||||
console.log('Event path: ' + event.path); // The path of the modified file
|
||||
docShredder.shredSingleDir(shredOptions, event.path);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
gulp.task('default', ['shred']);
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "test-shredder",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "Documentation file shredder",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git"
|
||||
},
|
||||
"author": "Jay Traband",
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Apache",
|
||||
"url": "http://www.apache.org/licenses/LICENSE-2.0.html"
|
||||
}
|
||||
],
|
||||
"bugs": {
|
||||
"url": ""
|
||||
},
|
||||
"devDependencies": {
|
||||
"canonical-path": "0.0.2",
|
||||
"del": "^1.2.0",
|
||||
"dgeni": "^0.4.0",
|
||||
"dgeni-packages": "^0.10.0",
|
||||
"gulp": "^3.5.6",
|
||||
"gulp-watch": "^4.3.4",
|
||||
"path": "^0.11.14"
|
||||
},
|
||||
"contributors": [
|
||||
"Jay Traband"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
</body>
|
||||
```
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
```
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
```
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
```
|
||||
/**
|
||||
* @description This function returns a string.
|
||||
*
|
||||
* @returns {string} This string has the value 'Hello World'.
|
||||
*/
|
||||
|
||||
function helloWorld() {
|
||||
return 'Hello World';
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// #docregion all
|
||||
// #docregion log ... everything else ignored.
|
||||
/**
|
||||
* @description This function logs a string.
|
||||
*/
|
||||
function log() {
|
||||
console.log('Logging.');
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
/**
|
||||
* @description My application
|
||||
*/
|
||||
var myApp = {
|
||||
// #docregion greet
|
||||
/**
|
||||
* @description Display a greeting
|
||||
* @param {string} name The name of the person to greet
|
||||
*/
|
||||
greet: function(name) {
|
||||
console.log('hello ' + name);
|
||||
}
|
||||
// #enddocregion
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/**
|
||||
* @description
|
||||
* This file should not have documents read from it.
|
||||
*
|
||||
*/
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- #docregion script -->
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
<!-- #enddocregion -->
|
||||
</head>
|
||||
<!-- #docregion app -->
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
</body>
|
||||
<!-- #enddocregion -->
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// #docregion
|
||||
/**
|
||||
* @description This function returns a string.
|
||||
*
|
||||
* @returns {string} This string has the value 'Hello World'.
|
||||
*/
|
||||
|
||||
|
||||
function helloWorld() {
|
||||
return 'Hello World';
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// #docregion
|
||||
/**
|
||||
* @description This function returns a string.
|
||||
*
|
||||
* @returns {string} This string has the value 'Hello World'.
|
||||
*/
|
||||
function helloWorld() {
|
||||
return 'Hello World';
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// #docregion
|
||||
/**
|
||||
* @description This function returns a string.
|
||||
*
|
||||
* @returns {string} This string has the value 'Hello World'.
|
||||
*/
|
||||
|
||||
|
||||
function helloWorld() {
|
||||
return 'Hello World';
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// #docregion
|
||||
/**
|
||||
* @description This function returns a string.
|
||||
*
|
||||
* @returns {string} This string has the value 'Hello World'.
|
||||
*/
|
||||
// #docregion code2
|
||||
function helloWorld() {
|
||||
return 'Hello World';
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- #docregion main -->
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
|
||||
<!-- #enddocregion -->
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// #docregion
|
||||
function AppComponent() {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
// #docregion bootstrap
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// protractor-spec.js
|
||||
describe('Protractor quick start test', function() {
|
||||
|
||||
// #docregion javascript
|
||||
it('should display Alice with JavaScript', function() {
|
||||
browser.get('gettingstarted/js/index.html');
|
||||
});
|
||||
// #enddocregion
|
||||
|
||||
// #docregion typescript
|
||||
it('should display Alice with TypeScrip', function() {
|
||||
browser.get('gettingstarted/ts/index.html');
|
||||
});
|
||||
// #enddocregion
|
||||
|
||||
afterEach(function() {
|
||||
expect(element(by.id('output')).getText()).toEqual('My first Angular 2 App');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
|
||||
switch (arguments.length) {
|
||||
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
|
||||
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
|
||||
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
|
||||
}
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
// #docregion
|
||||
// #docregion import
|
||||
var angular2_1 = require('angular2/angular2');
|
||||
// #enddocregion
|
||||
var AppComponent = (function () {
|
||||
function AppComponent() {
|
||||
}
|
||||
AppComponent = __decorate([
|
||||
angular2_1.Component({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
angular2_1.View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppComponent);
|
||||
return AppComponent;
|
||||
})();
|
||||
// #docregion bootstrap
|
||||
angular2_1.bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
//# sourceMappingURL=main.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":["AppComponent","AppComponent.constructor"],"mappings":";;;;;;;;;;;AAEA,AAFA,UAAU;AACV,iBAAiB;AACjB,yBAAyC,mBAAmB,CAAC,CAAA;AAG7D,AAFA,aAAa;;IAEbA;IAOAC,CAACA;IAPDD;QAACA,oBAASA,CAACA;YACTA,QAAQA,EAAEA,QAAQA;SACnBA,CAACA;QACDA,eAAIA,CAACA;YACJA,QAAQA,EAAEA,6CAA6CA;SACxDA,CAACA;;qBAEDA;IAADA,mBAACA;AAADA,CAACA,AAPD,IAOC;AAGD,AADA,oBAAoB;AACpB,oBAAS,CAAC,YAAY,CAAC,CAAC;AACxB,aAAa"}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// #docregion
|
||||
// #docregion import
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
// #enddocregion
|
||||
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
exports.config = {
|
||||
onPrepare: function() {
|
||||
patchProtractorWait(browser);
|
||||
},
|
||||
seleniumAddress: 'http://localhost:4444/wd/hub',
|
||||
baseUrl: 'http://localhost:8080/',
|
||||
specs: [
|
||||
'quickstart/protractor-spec.js',
|
||||
'gettingstarted/protractor-spec.js'
|
||||
]
|
||||
};
|
||||
|
||||
// Disable waiting for Angular as we don't have an integration layer yet...
|
||||
// TODO(tbosch): Implement a proper debugging API for Ng2.0, remove this here
|
||||
// and the sleeps in all tests.
|
||||
function patchProtractorWait(browser) {
|
||||
browser.ignoreSynchronization = true;
|
||||
var _get = browser.get;
|
||||
var sleepInterval = process.env.TRAVIS || process.env.JENKINS_URL ? 14000 : 8000;
|
||||
browser.get = function() {
|
||||
var result = _get.apply(this, arguments);
|
||||
browser.sleep(sleepInterval);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
|
||||
switch (arguments.length) {
|
||||
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
|
||||
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
|
||||
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
|
||||
}
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
// #docregion
|
||||
// #docregion import
|
||||
var angular2_1 = require('angular2/angular2');
|
||||
// #enddocregion
|
||||
var MyAppComponent = (function () {
|
||||
function MyAppComponent() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
MyAppComponent = __decorate([
|
||||
angular2_1.Component({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
angular2_1.View({
|
||||
template: '<h1 id="output">Hello {{ name }}</h1>'
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], MyAppComponent);
|
||||
return MyAppComponent;
|
||||
})();
|
||||
// #docregion bootstrap
|
||||
angular2_1.bootstrap(MyAppComponent);
|
||||
// #enddocregion
|
||||
//# sourceMappingURL=app.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":["MyAppComponent","MyAppComponent.constructor"],"mappings":";;;;;;;;;;;AAEA,AAFA,UAAU;AACV,iBAAiB;AACjB,yBAAyC,mBAAmB,CAAC,CAAA;AAG7D,AAFA,aAAa;;IAWZA;QACCC,IAAIA,CAACA,IAAIA,GAAGA,OAAOA,CAACA;IACrBA,CAACA;IAXFD;QAACA,oBAASA,CAACA;YACVA,QAAQA,EAAEA,QAAQA;SAClBA,CAACA;QACDA,eAAIA,CAACA;YACLA,QAAQA,EAAEA,uCAAuCA;SACjDA,CAACA;;uBAODA;IAADA,qBAACA;AAADA,CAACA,AAZD,IAYC;AAGD,AADA,oBAAoB;AACpB,oBAAS,CAAC,cAAc,CAAC,CAAC;AAC1B,aAAa"}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
// #docregion
|
||||
// #docregion import
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
// #enddocregion
|
||||
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">Hello {{ name }}</h1>'
|
||||
})
|
||||
class MyAppComponent {
|
||||
name : string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(MyAppComponent);
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<!-- #docregion foo -->
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
|
||||
<!-- #enddocregion -->
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>System.import('app');</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// protractor-spec.js
|
||||
describe('Protractor quick start test', function() {
|
||||
beforeEach(function() {
|
||||
browser.get('quickstart/index.html');
|
||||
});
|
||||
|
||||
// #docregion test
|
||||
it('should display Alice', function() {
|
||||
expect(element(by.id('output')).getText()).toEqual('Hello Alice');
|
||||
});
|
||||
// #enddocregion
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"module": "commonjs",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,73 @@
|
|||
// Type definitions for es6-promise
|
||||
// Project: https://github.com/jakearchibald/ES6-Promise
|
||||
// Definitions by: François de Campredon <https://github.com/fdecampredon/>, vvakame <https://github.com/vvakame>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
interface Thenable<R> {
|
||||
then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
|
||||
then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => void): Thenable<U>;
|
||||
}
|
||||
|
||||
declare class Promise<R> implements Thenable<R> {
|
||||
/**
|
||||
* If you call resolve in the body of the callback passed to the constructor,
|
||||
* your promise is fulfilled with result object passed to resolve.
|
||||
* If you call reject your promise is rejected with the object passed to resolve.
|
||||
* For consistency and debugging (eg stack traces), obj should be an instanceof Error.
|
||||
* Any errors thrown in the constructor callback will be implicitly passed to reject().
|
||||
*/
|
||||
constructor(callback: (resolve : (value?: R | Thenable<R>) => void, reject: (error?: any) => void) => void);
|
||||
|
||||
/**
|
||||
* onFulfilled is called when/if "promise" resolves. onRejected is called when/if "promise" rejects.
|
||||
* Both are optional, if either/both are omitted the next onFulfilled/onRejected in the chain is called.
|
||||
* Both callbacks have a single parameter , the fulfillment value or rejection reason.
|
||||
* "then" returns a new promise equivalent to the value you return from onFulfilled/onRejected after being passed through Promise.resolve.
|
||||
* If an error is thrown in the callback, the returned promise rejects with that error.
|
||||
*
|
||||
* @param onFulfilled called when/if "promise" resolves
|
||||
* @param onRejected called when/if "promise" rejects
|
||||
*/
|
||||
then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => U | Thenable<U>): Promise<U>;
|
||||
then<U>(onFulfilled?: (value: R) => U | Thenable<U>, onRejected?: (error: any) => void): Promise<U>;
|
||||
|
||||
/**
|
||||
* Sugar for promise.then(undefined, onRejected)
|
||||
*
|
||||
* @param onRejected called when/if "promise" rejects
|
||||
*/
|
||||
catch<U>(onRejected?: (error: any) => U | Thenable<U>): Promise<U>;
|
||||
}
|
||||
|
||||
declare module Promise {
|
||||
/**
|
||||
* Make a new promise from the thenable.
|
||||
* A thenable is promise-like in as far as it has a "then" method.
|
||||
*/
|
||||
function resolve<R>(value?: R | Thenable<R>): Promise<R>;
|
||||
|
||||
/**
|
||||
* Make a promise that rejects to obj. For consistency and debugging (eg stack traces), obj should be an instanceof Error
|
||||
*/
|
||||
function reject(error: any): Promise<any>;
|
||||
|
||||
/**
|
||||
* Make a promise that fulfills when every item in the array fulfills, and rejects if (and when) any item rejects.
|
||||
* the array passed to all can be a mixture of promise-like objects and other objects.
|
||||
* The fulfillment value is an array (in order) of fulfillment values. The rejection value is the first rejection value.
|
||||
*/
|
||||
function all<R>(promises: (R | Thenable<R>)[]): Promise<R[]>;
|
||||
|
||||
/**
|
||||
* Make a Promise that fulfills when any item fulfills, and rejects if any item rejects.
|
||||
*/
|
||||
function race<R>(promises: (R | Thenable<R>)[]): Promise<R>;
|
||||
}
|
||||
|
||||
declare module 'es6-promise' {
|
||||
var foo: typeof Promise; // Temp variable to reference Promise in local context
|
||||
module rsvp {
|
||||
export var Promise: typeof foo;
|
||||
}
|
||||
export = rsvp;
|
||||
}
|
||||
|
|
@ -0,0 +1,647 @@
|
|||
// DefinitelyTyped: partial
|
||||
|
||||
// This file contains common part of defintions for rx.d.ts and rx.lite.d.ts
|
||||
// Do not include the file separately.
|
||||
|
||||
declare module Rx {
|
||||
export module internals {
|
||||
function isEqual(left: any, right: any): boolean;
|
||||
function addRef<T>(xs: Observable<T>, r: { getDisposable(): IDisposable; }): Observable<T>;
|
||||
|
||||
// Priority Queue for Scheduling
|
||||
export class PriorityQueue<TTime> {
|
||||
constructor(capacity: number);
|
||||
|
||||
length: number;
|
||||
|
||||
isHigherPriority(left: number, right: number): boolean;
|
||||
percolate(index: number): void;
|
||||
heapify(index: number): void;
|
||||
peek(): ScheduledItem<TTime>;
|
||||
removeAt(index: number): void;
|
||||
dequeue(): ScheduledItem<TTime>;
|
||||
enqueue(item: ScheduledItem<TTime>): void;
|
||||
remove(item: ScheduledItem<TTime>): boolean;
|
||||
|
||||
static count: number;
|
||||
}
|
||||
|
||||
export class ScheduledItem<TTime> {
|
||||
constructor(scheduler: IScheduler, state: any, action: (scheduler: IScheduler, state: any) => IDisposable, dueTime: TTime, comparer?: (x: TTime, y: TTime) => number);
|
||||
|
||||
scheduler: IScheduler;
|
||||
state: TTime;
|
||||
action: (scheduler: IScheduler, state: any) => IDisposable;
|
||||
dueTime: TTime;
|
||||
comparer: (x: TTime, y: TTime) => number;
|
||||
disposable: SingleAssignmentDisposable;
|
||||
|
||||
invoke(): void;
|
||||
compareTo(other: ScheduledItem<TTime>): number;
|
||||
isCancelled(): boolean;
|
||||
invokeCore(): IDisposable;
|
||||
}
|
||||
}
|
||||
|
||||
export module config {
|
||||
export var Promise: { new <T>(resolver: (resolvePromise: (value: T) => void, rejectPromise: (reason: any) => void) => void): IPromise<T>; };
|
||||
}
|
||||
|
||||
export module helpers {
|
||||
function noop(): void;
|
||||
function notDefined(value: any): boolean;
|
||||
function isScheduler(value: any): boolean;
|
||||
function identity<T>(value: T): T;
|
||||
function defaultNow(): number;
|
||||
function defaultComparer(left: any, right: any): boolean;
|
||||
function defaultSubComparer(left: any, right: any): number;
|
||||
function defaultKeySerializer(key: any): string;
|
||||
function defaultError(err: any): void;
|
||||
function isPromise(p: any): boolean;
|
||||
function asArray<T>(...args: T[]): T[];
|
||||
function not(value: any): boolean;
|
||||
function isFunction(value: any): boolean;
|
||||
}
|
||||
|
||||
export interface IDisposable {
|
||||
dispose(): void;
|
||||
}
|
||||
|
||||
export class CompositeDisposable implements IDisposable {
|
||||
constructor (...disposables: IDisposable[]);
|
||||
constructor (disposables: IDisposable[]);
|
||||
|
||||
isDisposed: boolean;
|
||||
length: number;
|
||||
|
||||
dispose(): void;
|
||||
add(item: IDisposable): void;
|
||||
remove(item: IDisposable): boolean;
|
||||
toArray(): IDisposable[];
|
||||
}
|
||||
|
||||
export class Disposable implements IDisposable {
|
||||
constructor(action: () => void);
|
||||
|
||||
static create(action: () => void): IDisposable;
|
||||
static empty: IDisposable;
|
||||
|
||||
dispose(): void;
|
||||
}
|
||||
|
||||
// Single assignment
|
||||
export class SingleAssignmentDisposable implements IDisposable {
|
||||
constructor();
|
||||
|
||||
isDisposed: boolean;
|
||||
current: IDisposable;
|
||||
|
||||
dispose(): void ;
|
||||
getDisposable(): IDisposable;
|
||||
setDisposable(value: IDisposable): void ;
|
||||
}
|
||||
|
||||
// SerialDisposable it's an alias of SingleAssignmentDisposable
|
||||
export class SerialDisposable extends SingleAssignmentDisposable {
|
||||
constructor();
|
||||
}
|
||||
|
||||
export class RefCountDisposable implements IDisposable {
|
||||
constructor(disposable: IDisposable);
|
||||
|
||||
dispose(): void;
|
||||
|
||||
isDisposed: boolean;
|
||||
getDisposable(): IDisposable;
|
||||
}
|
||||
|
||||
export interface IScheduler {
|
||||
now(): number;
|
||||
|
||||
schedule(action: () => void): IDisposable;
|
||||
scheduleWithState<TState>(state: TState, action: (scheduler: IScheduler, state: TState) => IDisposable): IDisposable;
|
||||
scheduleWithAbsolute(dueTime: number, action: () => void): IDisposable;
|
||||
scheduleWithAbsoluteAndState<TState>(state: TState, dueTime: number, action: (scheduler: IScheduler, state: TState) =>IDisposable): IDisposable;
|
||||
scheduleWithRelative(dueTime: number, action: () => void): IDisposable;
|
||||
scheduleWithRelativeAndState<TState>(state: TState, dueTime: number, action: (scheduler: IScheduler, state: TState) =>IDisposable): IDisposable;
|
||||
|
||||
scheduleRecursive(action: (action: () =>void ) =>void ): IDisposable;
|
||||
scheduleRecursiveWithState<TState>(state: TState, action: (state: TState, action: (state: TState) =>void ) =>void ): IDisposable;
|
||||
scheduleRecursiveWithAbsolute(dueTime: number, action: (action: (dueTime: number) => void) => void): IDisposable;
|
||||
scheduleRecursiveWithAbsoluteAndState<TState>(state: TState, dueTime: number, action: (state: TState, action: (state: TState, dueTime: number) => void) => void): IDisposable;
|
||||
scheduleRecursiveWithRelative(dueTime: number, action: (action: (dueTime: number) =>void ) =>void ): IDisposable;
|
||||
scheduleRecursiveWithRelativeAndState<TState>(state: TState, dueTime: number, action: (state: TState, action: (state: TState, dueTime: number) =>void ) =>void ): IDisposable;
|
||||
|
||||
schedulePeriodic(period: number, action: () => void): IDisposable;
|
||||
schedulePeriodicWithState<TState>(state: TState, period: number, action: (state: TState) => TState): IDisposable;
|
||||
}
|
||||
|
||||
export interface Scheduler extends IScheduler {
|
||||
}
|
||||
|
||||
export interface SchedulerStatic {
|
||||
new (
|
||||
now: () => number,
|
||||
schedule: (state: any, action: (scheduler: IScheduler, state: any) => IDisposable) => IDisposable,
|
||||
scheduleRelative: (state: any, dueTime: number, action: (scheduler: IScheduler, state: any) => IDisposable) => IDisposable,
|
||||
scheduleAbsolute: (state: any, dueTime: number, action: (scheduler: IScheduler, state: any) => IDisposable) => IDisposable): Scheduler;
|
||||
|
||||
normalize(timeSpan: number): number;
|
||||
|
||||
immediate: IScheduler;
|
||||
currentThread: ICurrentThreadScheduler;
|
||||
default: IScheduler; // alias for Scheduler.timeout
|
||||
timeout: IScheduler;
|
||||
}
|
||||
|
||||
export var Scheduler: SchedulerStatic;
|
||||
|
||||
// Current Thread IScheduler
|
||||
interface ICurrentThreadScheduler extends IScheduler {
|
||||
scheduleRequired(): boolean;
|
||||
}
|
||||
|
||||
// Notifications
|
||||
export class Notification<T> {
|
||||
accept(observer: IObserver<T>): void;
|
||||
accept<TResult>(onNext: (value: T) => TResult, onError?: (exception: any) => TResult, onCompleted?: () => TResult): TResult;
|
||||
toObservable(scheduler?: IScheduler): Observable<T>;
|
||||
hasValue: boolean;
|
||||
equals(other: Notification<T>): boolean;
|
||||
kind: string;
|
||||
value: T;
|
||||
exception: any;
|
||||
|
||||
static createOnNext<T>(value: T): Notification<T>;
|
||||
static createOnError<T>(exception: any): Notification<T>;
|
||||
static createOnCompleted<T>(): Notification<T>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Promise A+
|
||||
*/
|
||||
export interface IPromise<T> {
|
||||
then<R>(onFulfilled: (value: T) => IPromise<R>, onRejected: (reason: any) => IPromise<R>): IPromise<R>;
|
||||
then<R>(onFulfilled: (value: T) => IPromise<R>, onRejected?: (reason: any) => R): IPromise<R>;
|
||||
then<R>(onFulfilled: (value: T) => R, onRejected: (reason: any) => IPromise<R>): IPromise<R>;
|
||||
then<R>(onFulfilled?: (value: T) => R, onRejected?: (reason: any) => R): IPromise<R>;
|
||||
}
|
||||
|
||||
// Observer
|
||||
export interface IObserver<T> {
|
||||
onNext(value: T): void;
|
||||
onError(exception: any): void;
|
||||
onCompleted(): void;
|
||||
}
|
||||
|
||||
export interface Observer<T> extends IObserver<T> {
|
||||
toNotifier(): (notification: Notification<T>) => void;
|
||||
asObserver(): Observer<T>;
|
||||
}
|
||||
|
||||
interface ObserverStatic {
|
||||
create<T>(onNext?: (value: T) => void, onError?: (exception: any) => void, onCompleted?: () => void): Observer<T>;
|
||||
fromNotifier<T>(handler: (notification: Notification<T>, thisArg?: any) => void): Observer<T>;
|
||||
}
|
||||
|
||||
export var Observer: ObserverStatic;
|
||||
|
||||
export interface IObservable<T> {
|
||||
subscribe(observer: Observer<T>): IDisposable;
|
||||
subscribe(onNext?: (value: T) => void, onError?: (exception: any) => void, onCompleted?: () => void): IDisposable;
|
||||
|
||||
subscribeOnNext(onNext: (value: T) => void, thisArg?: any): IDisposable;
|
||||
subscribeOnError(onError: (exception: any) => void, thisArg?: any): IDisposable;
|
||||
subscribeOnCompleted(onCompleted: () => void, thisArg?: any): IDisposable;
|
||||
}
|
||||
|
||||
export interface Observable<T> extends IObservable<T> {
|
||||
forEach(onNext?: (value: T) => void, onError?: (exception: any) => void, onCompleted?: () => void): IDisposable; // alias for subscribe
|
||||
toArray(): Observable<T[]>;
|
||||
|
||||
catch(handler: (exception: any) => Observable<T>): Observable<T>;
|
||||
catchException(handler: (exception: any) => Observable<T>): Observable<T>; // alias for catch
|
||||
catch(handler: (exception: any) => IPromise<T>): Observable<T>;
|
||||
catchException(handler: (exception: any) => IPromise<T>): Observable<T>; // alias for catch
|
||||
catch(second: Observable<T>): Observable<T>;
|
||||
catchException(second: Observable<T>): Observable<T>; // alias for catch
|
||||
combineLatest<T2, TResult>(second: Observable<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, TResult>(second: IPromise<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, TResult>(second: Observable<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, TResult>(second: Observable<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, TResult>(second: IPromise<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, TResult>(second: IPromise<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: Observable<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: Observable<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: Observable<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: Observable<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: IPromise<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: IPromise<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: IPromise<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, TResult>(second: IPromise<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T2, T3, T4, T5, TResult>(second: Observable<T2>, third: Observable<T3>, fourth: Observable<T4>, fifth: Observable<T5>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4, v5: T5) => TResult): Observable<TResult>;
|
||||
combineLatest<TOther, TResult>(souces: Observable<TOther>[], resultSelector: (firstValue: T, ...otherValues: TOther[]) => TResult): Observable<TResult>;
|
||||
combineLatest<TOther, TResult>(souces: IPromise<TOther>[], resultSelector: (firstValue: T, ...otherValues: TOther[]) => TResult): Observable<TResult>;
|
||||
concat(...sources: Observable<T>[]): Observable<T>;
|
||||
concat(...sources: IPromise<T>[]): Observable<T>;
|
||||
concat(sources: Observable<T>[]): Observable<T>;
|
||||
concat(sources: IPromise<T>[]): Observable<T>;
|
||||
concatAll(): T;
|
||||
concatObservable(): T; // alias for concatAll
|
||||
concatMap<T2, R>(selector: (value: T, index: number) => Observable<T2>, resultSelector: (value1: T, value2: T2, index: number) => R): Observable<R>; // alias for selectConcat
|
||||
concatMap<T2, R>(selector: (value: T, index: number) => IPromise<T2>, resultSelector: (value1: T, value2: T2, index: number) => R): Observable<R>; // alias for selectConcat
|
||||
concatMap<R>(selector: (value: T, index: number) => Observable<R>): Observable<R>; // alias for selectConcat
|
||||
concatMap<R>(selector: (value: T, index: number) => IPromise<R>): Observable<R>; // alias for selectConcat
|
||||
concatMap<R>(sequence: Observable<R>): Observable<R>; // alias for selectConcat
|
||||
merge(maxConcurrent: number): T;
|
||||
merge(other: Observable<T>): Observable<T>;
|
||||
merge(other: IPromise<T>): Observable<T>;
|
||||
mergeAll(): T;
|
||||
mergeObservable(): T; // alias for mergeAll
|
||||
skipUntil<T2>(other: Observable<T2>): Observable<T>;
|
||||
skipUntil<T2>(other: IPromise<T2>): Observable<T>;
|
||||
switch(): T;
|
||||
switchLatest(): T; // alias for switch
|
||||
takeUntil<T2>(other: Observable<T2>): Observable<T>;
|
||||
takeUntil<T2>(other: IPromise<T2>): Observable<T>;
|
||||
zip<T2, TResult>(second: Observable<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
zip<T2, TResult>(second: IPromise<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, TResult>(second: Observable<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, TResult>(second: Observable<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, TResult>(second: IPromise<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, TResult>(second: IPromise<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: Observable<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: Observable<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: Observable<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: Observable<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: IPromise<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: IPromise<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: IPromise<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, TResult>(second: IPromise<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
zip<T2, T3, T4, T5, TResult>(second: Observable<T2>, third: Observable<T3>, fourth: Observable<T4>, fifth: Observable<T5>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4, v5: T5) => TResult): Observable<TResult>;
|
||||
zip<TOther, TResult>(second: Observable<TOther>[], resultSelector: (left: T, ...right: TOther[]) => TResult): Observable<TResult>;
|
||||
zip<TOther, TResult>(second: IPromise<TOther>[], resultSelector: (left: T, ...right: TOther[]) => TResult): Observable<TResult>;
|
||||
|
||||
asObservable(): Observable<T>;
|
||||
dematerialize<TOrigin>(): Observable<TOrigin>;
|
||||
distinctUntilChanged(skipParameter: boolean, comparer: (x: T, y: T) => boolean): Observable<T>;
|
||||
distinctUntilChanged<TValue>(keySelector?: (value: T) => TValue, comparer?: (x: TValue, y: TValue) => boolean): Observable<T>;
|
||||
do(observer: Observer<T>): Observable<T>;
|
||||
doAction(observer: Observer<T>): Observable<T>; // alias for do
|
||||
tap(observer: Observer<T>): Observable<T>; // alias for do
|
||||
do(onNext?: (value: T) => void, onError?: (exception: any) => void, onCompleted?: () => void): Observable<T>;
|
||||
doAction(onNext?: (value: T) => void, onError?: (exception: any) => void, onCompleted?: () => void): Observable<T>; // alias for do
|
||||
tap(onNext?: (value: T) => void, onError?: (exception: any) => void, onCompleted?: () => void): Observable<T>; // alias for do
|
||||
|
||||
doOnNext(onNext: (value: T) => void, thisArg?: any): Observable<T>;
|
||||
doOnError(onError: (exception: any) => void, thisArg?: any): Observable<T>;
|
||||
doOnCompleted(onCompleted: () => void, thisArg?: any): Observable<T>;
|
||||
tapOnNext(onNext: (value: T) => void, thisArg?: any): Observable<T>;
|
||||
tapOnError(onError: (exception: any) => void, thisArg?: any): Observable<T>;
|
||||
tapOnCompleted(onCompleted: () => void, thisArg?: any): Observable<T>;
|
||||
|
||||
finally(action: () => void): Observable<T>;
|
||||
finallyAction(action: () => void): Observable<T>; // alias for finally
|
||||
ignoreElements(): Observable<T>;
|
||||
materialize(): Observable<Notification<T>>;
|
||||
repeat(repeatCount?: number): Observable<T>;
|
||||
retry(retryCount?: number): Observable<T>;
|
||||
scan<TAcc>(seed: TAcc, accumulator: (acc: TAcc, value: T) => TAcc): Observable<TAcc>;
|
||||
scan(accumulator: (acc: T, value: T) => T): Observable<T>;
|
||||
skipLast(count: number): Observable<T>;
|
||||
startWith(...values: T[]): Observable<T>;
|
||||
startWith(scheduler: IScheduler, ...values: T[]): Observable<T>;
|
||||
takeLast(count: number): Observable<T>;
|
||||
takeLastBuffer(count: number): Observable<T[]>;
|
||||
|
||||
select<TResult>(selector: (value: T, index: number, source: Observable<T>) => TResult, thisArg?: any): Observable<TResult>;
|
||||
map<TResult>(selector: (value: T, index: number, source: Observable<T>) => TResult, thisArg?: any): Observable<TResult>; // alias for select
|
||||
pluck<TResult>(prop: string): Observable<TResult>;
|
||||
selectMany<TOther, TResult>(selector: (value: T) => Observable<TOther>, resultSelector: (item: T, other: TOther) => TResult): Observable<TResult>;
|
||||
selectMany<TOther, TResult>(selector: (value: T) => IPromise<TOther>, resultSelector: (item: T, other: TOther) => TResult): Observable<TResult>;
|
||||
selectMany<TResult>(selector: (value: T) => Observable<TResult>): Observable<TResult>;
|
||||
selectMany<TResult>(selector: (value: T) => IPromise<TResult>): Observable<TResult>;
|
||||
selectMany<TResult>(other: Observable<TResult>): Observable<TResult>;
|
||||
selectMany<TResult>(other: IPromise<TResult>): Observable<TResult>;
|
||||
flatMap<TOther, TResult>(selector: (value: T) => Observable<TOther>, resultSelector: (item: T, other: TOther) => TResult): Observable<TResult>; // alias for selectMany
|
||||
flatMap<TOther, TResult>(selector: (value: T) => IPromise<TOther>, resultSelector: (item: T, other: TOther) => TResult): Observable<TResult>; // alias for selectMany
|
||||
flatMap<TResult>(selector: (value: T) => Observable<TResult>): Observable<TResult>; // alias for selectMany
|
||||
flatMap<TResult>(selector: (value: T) => IPromise<TResult>): Observable<TResult>; // alias for selectMany
|
||||
flatMap<TResult>(other: Observable<TResult>): Observable<TResult>; // alias for selectMany
|
||||
flatMap<TResult>(other: IPromise<TResult>): Observable<TResult>; // alias for selectMany
|
||||
|
||||
selectConcat<T2, R>(selector: (value: T, index: number) => Observable<T2>, resultSelector: (value1: T, value2: T2, index: number) => R): Observable<R>;
|
||||
selectConcat<T2, R>(selector: (value: T, index: number) => IPromise<T2>, resultSelector: (value1: T, value2: T2, index: number) => R): Observable<R>;
|
||||
selectConcat<R>(selector: (value: T, index: number) => Observable<R>): Observable<R>;
|
||||
selectConcat<R>(selector: (value: T, index: number) => IPromise<R>): Observable<R>;
|
||||
selectConcat<R>(sequence: Observable<R>): Observable<R>;
|
||||
|
||||
/**
|
||||
* Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then
|
||||
* transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.
|
||||
* @param selector A transform function to apply to each source element; the second parameter of the function represents the index of the source element.
|
||||
* @param [thisArg] Object to use as this when executing callback.
|
||||
* @returns An observable sequence whose elements are the result of invoking the transform function on each element of source producing an Observable of Observable sequences
|
||||
* and that at any point in time produces the elements of the most recent inner observable sequence that has been received.
|
||||
*/
|
||||
selectSwitch<TResult>(selector: (value: T, index: number, source: Observable<T>) => Observable<TResult>, thisArg?: any): Observable<TResult>;
|
||||
/**
|
||||
* Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then
|
||||
* transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.
|
||||
* @param selector A transform function to apply to each source element; the second parameter of the function represents the index of the source element.
|
||||
* @param [thisArg] Object to use as this when executing callback.
|
||||
* @returns An observable sequence whose elements are the result of invoking the transform function on each element of source producing an Observable of Observable sequences
|
||||
* and that at any point in time produces the elements of the most recent inner observable sequence that has been received.
|
||||
*/
|
||||
flatMapLatest<TResult>(selector: (value: T, index: number, source: Observable<T>) => Observable<TResult>, thisArg?: any): Observable<TResult>; // alias for selectSwitch
|
||||
/**
|
||||
* Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then
|
||||
* transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.
|
||||
* @param selector A transform function to apply to each source element; the second parameter of the function represents the index of the source element.
|
||||
* @param [thisArg] Object to use as this when executing callback.
|
||||
* @since 2.2.28
|
||||
* @returns An observable sequence whose elements are the result of invoking the transform function on each element of source producing an Observable of Observable sequences
|
||||
* and that at any point in time produces the elements of the most recent inner observable sequence that has been received.
|
||||
*/
|
||||
switchMap<TResult>(selector: (value: T, index: number, source: Observable<T>) => TResult, thisArg?: any): Observable<TResult>; // alias for selectSwitch
|
||||
|
||||
skip(count: number): Observable<T>;
|
||||
skipWhile(predicate: (value: T, index: number, source: Observable<T>) => boolean, thisArg?: any): Observable<T>;
|
||||
take(count: number, scheduler?: IScheduler): Observable<T>;
|
||||
takeWhile(predicate: (value: T, index: number, source: Observable<T>) => boolean, thisArg?: any): Observable<T>;
|
||||
where(predicate: (value: T, index: number, source: Observable<T>) => boolean, thisArg?: any): Observable<T>;
|
||||
filter(predicate: (value: T, index: number, source: Observable<T>) => boolean, thisArg?: any): Observable<T>; // alias for where
|
||||
|
||||
/**
|
||||
* Converts an existing observable sequence to an ES6 Compatible Promise
|
||||
* @example
|
||||
* var promise = Rx.Observable.return(42).toPromise(RSVP.Promise);
|
||||
* @param promiseCtor The constructor of the promise.
|
||||
* @returns An ES6 compatible promise with the last value from the observable sequence.
|
||||
*/
|
||||
toPromise<TPromise extends IPromise<T>>(promiseCtor: { new (resolver: (resolvePromise: (value: T) => void, rejectPromise: (reason: any) => void) => void): TPromise; }): TPromise;
|
||||
/**
|
||||
* Converts an existing observable sequence to an ES6 Compatible Promise
|
||||
* @example
|
||||
* var promise = Rx.Observable.return(42).toPromise(RSVP.Promise);
|
||||
*
|
||||
* // With config
|
||||
* Rx.config.Promise = RSVP.Promise;
|
||||
* var promise = Rx.Observable.return(42).toPromise();
|
||||
* @param [promiseCtor] The constructor of the promise. If not provided, it looks for it in Rx.config.Promise.
|
||||
* @returns An ES6 compatible promise with the last value from the observable sequence.
|
||||
*/
|
||||
toPromise(promiseCtor?: { new (resolver: (resolvePromise: (value: T) => void, rejectPromise: (reason: any) => void) => void): IPromise<T>; }): IPromise<T>;
|
||||
|
||||
// Experimental Flattening
|
||||
|
||||
/**
|
||||
* Performs a exclusive waiting for the first to finish before subscribing to another observable.
|
||||
* Observables that come in between subscriptions will be dropped on the floor.
|
||||
* Can be applied on `Observable<Observable<R>>` or `Observable<IPromise<R>>`.
|
||||
* @since 2.2.28
|
||||
* @returns A exclusive observable with only the results that happen when subscribed.
|
||||
*/
|
||||
exclusive<R>(): Observable<R>;
|
||||
|
||||
/**
|
||||
* Performs a exclusive map waiting for the first to finish before subscribing to another observable.
|
||||
* Observables that come in between subscriptions will be dropped on the floor.
|
||||
* Can be applied on `Observable<Observable<I>>` or `Observable<IPromise<I>>`.
|
||||
* @since 2.2.28
|
||||
* @param selector Selector to invoke for every item in the current subscription.
|
||||
* @param [thisArg] An optional context to invoke with the selector parameter.
|
||||
* @returns {An exclusive observable with only the results that happen when subscribed.
|
||||
*/
|
||||
exclusiveMap<I, R>(selector: (value: I, index: number, source: Observable<I>) => R, thisArg?: any): Observable<R>;
|
||||
}
|
||||
|
||||
interface ObservableStatic {
|
||||
create<T>(subscribe: (observer: Observer<T>) => IDisposable): Observable<T>;
|
||||
create<T>(subscribe: (observer: Observer<T>) => () => void): Observable<T>;
|
||||
create<T>(subscribe: (observer: Observer<T>) => void): Observable<T>;
|
||||
createWithDisposable<T>(subscribe: (observer: Observer<T>) => IDisposable): Observable<T>;
|
||||
defer<T>(observableFactory: () => Observable<T>): Observable<T>;
|
||||
defer<T>(observableFactory: () => IPromise<T>): Observable<T>;
|
||||
empty<T>(scheduler?: IScheduler): Observable<T>;
|
||||
|
||||
/**
|
||||
* This method creates a new Observable sequence from an array object.
|
||||
* @param array An array-like or iterable object to convert to an Observable sequence.
|
||||
* @param mapFn Map function to call on every element of the array.
|
||||
* @param [thisArg] The context to use calling the mapFn if provided.
|
||||
* @param [scheduler] Optional scheduler to use for scheduling. If not provided, defaults to Scheduler.currentThread.
|
||||
*/
|
||||
from<T, TResult>(array: T[], mapFn: (value: T, index: number) => TResult, thisArg?: any, scheduler?: IScheduler): Observable<TResult>;
|
||||
/**
|
||||
* This method creates a new Observable sequence from an array object.
|
||||
* @param array An array-like or iterable object to convert to an Observable sequence.
|
||||
* @param [mapFn] Map function to call on every element of the array.
|
||||
* @param [thisArg] The context to use calling the mapFn if provided.
|
||||
* @param [scheduler] Optional scheduler to use for scheduling. If not provided, defaults to Scheduler.currentThread.
|
||||
*/
|
||||
from<T>(array: T[], mapFn?: (value: T, index: number) => T, thisArg?: any, scheduler?: IScheduler): Observable<T>;
|
||||
|
||||
/**
|
||||
* This method creates a new Observable sequence from an array-like object.
|
||||
* @param array An array-like or iterable object to convert to an Observable sequence.
|
||||
* @param mapFn Map function to call on every element of the array.
|
||||
* @param [thisArg] The context to use calling the mapFn if provided.
|
||||
* @param [scheduler] Optional scheduler to use for scheduling. If not provided, defaults to Scheduler.currentThread.
|
||||
*/
|
||||
from<T, TResult>(array: { length: number;[index: number]: T; }, mapFn: (value: T, index: number) => TResult, thisArg?: any, scheduler?: IScheduler): Observable<TResult>;
|
||||
/**
|
||||
* This method creates a new Observable sequence from an array-like object.
|
||||
* @param array An array-like or iterable object to convert to an Observable sequence.
|
||||
* @param [mapFn] Map function to call on every element of the array.
|
||||
* @param [thisArg] The context to use calling the mapFn if provided.
|
||||
* @param [scheduler] Optional scheduler to use for scheduling. If not provided, defaults to Scheduler.currentThread.
|
||||
*/
|
||||
from<T>(array: { length: number;[index: number]: T; }, mapFn?: (value: T, index: number) => T, thisArg?: any, scheduler?: IScheduler): Observable<T>;
|
||||
|
||||
/**
|
||||
* This method creates a new Observable sequence from an array-like or iterable object.
|
||||
* @param array An array-like or iterable object to convert to an Observable sequence.
|
||||
* @param [mapFn] Map function to call on every element of the array.
|
||||
* @param [thisArg] The context to use calling the mapFn if provided.
|
||||
* @param [scheduler] Optional scheduler to use for scheduling. If not provided, defaults to Scheduler.currentThread.
|
||||
*/
|
||||
from<T>(iterable: any, mapFn?: (value: any, index: number) => T, thisArg?: any, scheduler?: IScheduler): Observable<T>;
|
||||
|
||||
fromArray<T>(array: T[], scheduler?: IScheduler): Observable<T>;
|
||||
fromArray<T>(array: { length: number;[index: number]: T; }, scheduler?: IScheduler): Observable<T>;
|
||||
|
||||
/**
|
||||
* Converts an iterable into an Observable sequence
|
||||
*
|
||||
* @example
|
||||
* var res = Rx.Observable.fromIterable(new Map());
|
||||
* var res = Rx.Observable.fromIterable(function* () { yield 42; });
|
||||
* var res = Rx.Observable.fromIterable(new Set(), Rx.Scheduler.timeout);
|
||||
* @param generator Generator to convert from.
|
||||
* @param [scheduler] Scheduler to run the enumeration of the input sequence on.
|
||||
* @returns The observable sequence whose elements are pulled from the given generator sequence.
|
||||
*/
|
||||
fromIterable<T>(generator: () => { next(): { done: boolean; value?: T; }; }, scheduler?: IScheduler): Observable<T>;
|
||||
|
||||
/**
|
||||
* Converts an iterable into an Observable sequence
|
||||
*
|
||||
* @example
|
||||
* var res = Rx.Observable.fromIterable(new Map());
|
||||
* var res = Rx.Observable.fromIterable(new Set(), Rx.Scheduler.timeout);
|
||||
* @param iterable Iterable to convert from.
|
||||
* @param [scheduler] Scheduler to run the enumeration of the input sequence on.
|
||||
* @returns The observable sequence whose elements are pulled from the given generator sequence.
|
||||
*/
|
||||
fromIterable<T>(iterable: {}, scheduler?: IScheduler): Observable<T>; // todo: can't describe ES6 Iterable via TypeScript type system
|
||||
generate<TState, TResult>(initialState: TState, condition: (state: TState) => boolean, iterate: (state: TState) => TState, resultSelector: (state: TState) => TResult, scheduler?: IScheduler): Observable<TResult>;
|
||||
never<T>(): Observable<T>;
|
||||
|
||||
/**
|
||||
* This method creates a new Observable instance with a variable number of arguments, regardless of number or type of the arguments.
|
||||
*
|
||||
* @example
|
||||
* var res = Rx.Observable.of(1, 2, 3);
|
||||
* @since 2.2.28
|
||||
* @returns The observable sequence whose elements are pulled from the given arguments.
|
||||
*/
|
||||
of<T>(...values: T[]): Observable<T>;
|
||||
|
||||
/**
|
||||
* This method creates a new Observable instance with a variable number of arguments, regardless of number or type of the arguments.
|
||||
* @example
|
||||
* var res = Rx.Observable.ofWithScheduler(Rx.Scheduler.timeout, 1, 2, 3);
|
||||
* @since 2.2.28
|
||||
* @param [scheduler] A scheduler to use for scheduling the arguments.
|
||||
* @returns The observable sequence whose elements are pulled from the given arguments.
|
||||
*/
|
||||
ofWithScheduler<T>(scheduler?: IScheduler, ...values: T[]): Observable<T>;
|
||||
range(start: number, count: number, scheduler?: IScheduler): Observable<number>;
|
||||
repeat<T>(value: T, repeatCount?: number, scheduler?: IScheduler): Observable<T>;
|
||||
return<T>(value: T, scheduler?: IScheduler): Observable<T>;
|
||||
/**
|
||||
* @since 2.2.28
|
||||
*/
|
||||
just<T>(value: T, scheduler?: IScheduler): Observable<T>; // alias for return
|
||||
returnValue<T>(value: T, scheduler?: IScheduler): Observable<T>; // alias for return
|
||||
throw<T>(exception: Error, scheduler?: IScheduler): Observable<T>;
|
||||
throw<T>(exception: any, scheduler?: IScheduler): Observable<T>;
|
||||
throwException<T>(exception: Error, scheduler?: IScheduler): Observable<T>; // alias for throw
|
||||
throwException<T>(exception: any, scheduler?: IScheduler): Observable<T>; // alias for throw
|
||||
throwError<T>(error: Error, scheduler?: IScheduler): Observable<T>; // alias for throw
|
||||
throwError<T>(error: any, scheduler?: IScheduler): Observable<T>; // alias for throw
|
||||
|
||||
catch<T>(sources: Observable<T>[]): Observable<T>;
|
||||
catch<T>(sources: IPromise<T>[]): Observable<T>;
|
||||
catchException<T>(sources: Observable<T>[]): Observable<T>; // alias for catch
|
||||
catchException<T>(sources: IPromise<T>[]): Observable<T>; // alias for catch
|
||||
catchError<T>(sources: Observable<T>[]): Observable<T>; // alias for catch
|
||||
catchError<T>(sources: IPromise<T>[]): Observable<T>; // alias for catch
|
||||
catch<T>(...sources: Observable<T>[]): Observable<T>;
|
||||
catch<T>(...sources: IPromise<T>[]): Observable<T>;
|
||||
catchException<T>(...sources: Observable<T>[]): Observable<T>; // alias for catch
|
||||
catchException<T>(...sources: IPromise<T>[]): Observable<T>; // alias for catch
|
||||
catchError<T>(...sources: Observable<T>[]): Observable<T>; // alias for catch
|
||||
catchError<T>(...sources: IPromise<T>[]): Observable<T>; // alias for catch
|
||||
|
||||
combineLatest<T, T2, TResult>(first: Observable<T>, second: Observable<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, TResult>(first: IPromise<T>, second: Observable<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, TResult>(first: Observable<T>, second: IPromise<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, TResult>(first: IPromise<T>, second: IPromise<T2>, resultSelector: (v1: T, v2: T2) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: Observable<T>, second: Observable<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: Observable<T>, second: Observable<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: Observable<T>, second: IPromise<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: Observable<T>, second: IPromise<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: IPromise<T>, second: Observable<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: IPromise<T>, second: Observable<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: IPromise<T>, second: IPromise<T2>, third: Observable<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, TResult>(first: IPromise<T>, second: IPromise<T2>, third: IPromise<T3>, resultSelector: (v1: T, v2: T2, v3: T3) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: Observable<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: Observable<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: Observable<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: Observable<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: IPromise<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: IPromise<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: IPromise<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: Observable<T>, second: IPromise<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: Observable<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: Observable<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: Observable<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: Observable<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: IPromise<T2>, third: Observable<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: IPromise<T2>, third: Observable<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: IPromise<T2>, third: IPromise<T3>, fourth: Observable<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, TResult>(first: IPromise<T>, second: IPromise<T2>, third: IPromise<T3>, fourth: IPromise<T4>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4) => TResult): Observable<TResult>;
|
||||
combineLatest<T, T2, T3, T4, T5, TResult>(first: Observable<T>, second: Observable<T2>, third: Observable<T3>, fourth: Observable<T4>, fifth: Observable<T5>, resultSelector: (v1: T, v2: T2, v3: T3, v4: T4, v5: T5) => TResult): Observable<TResult>;
|
||||
combineLatest<TOther, TResult>(souces: Observable<TOther>[], resultSelector: (...otherValues: TOther[]) => TResult): Observable<TResult>;
|
||||
combineLatest<TOther, TResult>(souces: IPromise<TOther>[], resultSelector: (...otherValues: TOther[]) => TResult): Observable<TResult>;
|
||||
|
||||
concat<T>(...sources: Observable<T>[]): Observable<T>;
|
||||
concat<T>(...sources: IPromise<T>[]): Observable<T>;
|
||||
concat<T>(sources: Observable<T>[]): Observable<T>;
|
||||
concat<T>(sources: IPromise<T>[]): Observable<T>;
|
||||
merge<T>(...sources: Observable<T>[]): Observable<T>;
|
||||
merge<T>(...sources: IPromise<T>[]): Observable<T>;
|
||||
merge<T>(sources: Observable<T>[]): Observable<T>;
|
||||
merge<T>(sources: IPromise<T>[]): Observable<T>;
|
||||
merge<T>(scheduler: IScheduler, ...sources: Observable<T>[]): Observable<T>;
|
||||
merge<T>(scheduler: IScheduler, ...sources: IPromise<T>[]): Observable<T>;
|
||||
merge<T>(scheduler: IScheduler, sources: Observable<T>[]): Observable<T>;
|
||||
merge<T>(scheduler: IScheduler, sources: IPromise<T>[]): Observable<T>;
|
||||
|
||||
pairs<T>(obj: { [key: string]: T }, scheduler?: IScheduler): Observable<[string, T]>;
|
||||
|
||||
zip<T1, T2, TResult>(first: Observable<T1>, sources: Observable<T2>[], resultSelector: (item1: T1, ...right: T2[]) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, TResult>(first: Observable<T1>, sources: IPromise<T2>[], resultSelector: (item1: T1, ...right: T2[]) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, TResult>(source1: Observable<T1>, source2: Observable<T2>, resultSelector: (item1: T1, item2: T2) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, TResult>(source1: Observable<T1>, source2: IPromise<T2>, resultSelector: (item1: T1, item2: T2) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, TResult>(source1: Observable<T1>, source2: Observable<T2>, source3: Observable<T3>, resultSelector: (item1: T1, item2: T2, item3: T3) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, TResult>(source1: Observable<T1>, source2: Observable<T2>, source3: IPromise<T3>, resultSelector: (item1: T1, item2: T2, item3: T3) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, TResult>(source1: Observable<T1>, source2: IPromise<T2>, source3: Observable<T3>, resultSelector: (item1: T1, item2: T2, item3: T3) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, TResult>(source1: Observable<T1>, source2: IPromise<T2>, source3: IPromise<T3>, resultSelector: (item1: T1, item2: T2, item3: T3) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: Observable<T2>, source3: Observable<T3>, source4: Observable<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: Observable<T2>, source3: Observable<T3>, source4: IPromise<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: Observable<T2>, source3: IPromise<T3>, source4: Observable<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: Observable<T2>, source3: IPromise<T3>, source4: IPromise<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: IPromise<T2>, source3: Observable<T3>, source4: Observable<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: IPromise<T2>, source3: Observable<T3>, source4: IPromise<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: IPromise<T2>, source3: IPromise<T3>, source4: Observable<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, TResult>(source1: Observable<T1>, source2: IPromise<T2>, source3: IPromise<T3>, source4: IPromise<T4>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4) => TResult): Observable<TResult>;
|
||||
zip<T1, T2, T3, T4, T5, TResult>(source1: Observable<T1>, source2: Observable<T2>, source3: Observable<T3>, source4: Observable<T4>, source5: Observable<T5>, resultSelector: (item1: T1, item2: T2, item3: T3, item4: T4, item5: T5) => TResult): Observable<TResult>;
|
||||
zipArray<T>(...sources: Observable<T>[]): Observable<T[]>;
|
||||
zipArray<T>(sources: Observable<T>[]): Observable<T[]>;
|
||||
|
||||
/**
|
||||
* Converts a Promise to an Observable sequence
|
||||
* @param promise An ES6 Compliant promise.
|
||||
* @returns An Observable sequence which wraps the existing promise success and failure.
|
||||
*/
|
||||
fromPromise<T>(promise: IPromise<T>): Observable<T>;
|
||||
}
|
||||
|
||||
export var Observable: ObservableStatic;
|
||||
|
||||
interface ISubject<T> extends Observable<T>, Observer<T>, IDisposable {
|
||||
hasObservers(): boolean;
|
||||
}
|
||||
|
||||
export interface Subject<T> extends ISubject<T> {
|
||||
}
|
||||
|
||||
interface SubjectStatic {
|
||||
new <T>(): Subject<T>;
|
||||
create<T>(observer?: Observer<T>, observable?: Observable<T>): ISubject<T>;
|
||||
}
|
||||
|
||||
export var Subject: SubjectStatic;
|
||||
|
||||
export interface AsyncSubject<T> extends Subject<T> {
|
||||
}
|
||||
|
||||
interface AsyncSubjectStatic {
|
||||
new <T>(): AsyncSubject<T>;
|
||||
}
|
||||
|
||||
export var AsyncSubject: AsyncSubjectStatic;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
// Type definitions for RxJS v2.2.28
|
||||
// Project: http://rx.codeplex.com/
|
||||
// Definitions by: gsino <http://www.codeplex.com/site/users/view/gsino>, Igor Oleinikov <https://github.com/Igorbek>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
///<reference path="rx-lite.d.ts"/>
|
||||
|
||||
declare module Rx {
|
||||
export interface IScheduler {
|
||||
catch(handler: (exception: any) => boolean): IScheduler;
|
||||
catchException(handler: (exception: any) => boolean): IScheduler;
|
||||
}
|
||||
|
||||
// Observer
|
||||
export interface Observer<T> {
|
||||
checked(): Observer<any>;
|
||||
}
|
||||
|
||||
interface ObserverStatic {
|
||||
/**
|
||||
* Schedules the invocation of observer methods on the given scheduler.
|
||||
* @param scheduler Scheduler to schedule observer messages on.
|
||||
* @returns Observer whose messages are scheduled on the given scheduler.
|
||||
*/
|
||||
notifyOn<T>(scheduler: IScheduler): Observer<T>;
|
||||
}
|
||||
|
||||
export interface Observable<T> {
|
||||
observeOn(scheduler: IScheduler): Observable<T>;
|
||||
subscribeOn(scheduler: IScheduler): Observable<T>;
|
||||
|
||||
amb(rightSource: Observable<T>): Observable<T>;
|
||||
amb(rightSource: IPromise<T>): Observable<T>;
|
||||
onErrorResumeNext(second: Observable<T>): Observable<T>;
|
||||
onErrorResumeNext(second: IPromise<T>): Observable<T>;
|
||||
bufferWithCount(count: number, skip?: number): Observable<T[]>;
|
||||
windowWithCount(count: number, skip?: number): Observable<Observable<T>>;
|
||||
defaultIfEmpty(defaultValue?: T): Observable<T>;
|
||||
distinct(skipParameter: boolean, valueSerializer: (value: T) => string): Observable<T>;
|
||||
distinct<TKey>(keySelector?: (value: T) => TKey, keySerializer?: (key: TKey) => string): Observable<T>;
|
||||
groupBy<TKey, TElement>(keySelector: (value: T) => TKey, skipElementSelector?: boolean, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, T>>;
|
||||
groupBy<TKey, TElement>(keySelector: (value: T) => TKey, elementSelector: (value: T) => TElement, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, T>>;
|
||||
groupByUntil<TKey, TDuration>(keySelector: (value: T) => TKey, skipElementSelector: boolean, durationSelector: (group: GroupedObservable<TKey, T>) => Observable<TDuration>, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, T>>;
|
||||
groupByUntil<TKey, TElement, TDuration>(keySelector: (value: T) => TKey, elementSelector: (value: T) => TElement, durationSelector: (group: GroupedObservable<TKey, TElement>) => Observable<TDuration>, keySerializer?: (key: TKey) => string): Observable<GroupedObservable<TKey, TElement>>;
|
||||
}
|
||||
|
||||
interface ObservableStatic {
|
||||
using<TSource, TResource extends IDisposable>(resourceFactory: () => TResource, observableFactory: (resource: TResource) => Observable<TSource>): Observable<TSource>;
|
||||
amb<T>(...sources: Observable<T>[]): Observable<T>;
|
||||
amb<T>(...sources: IPromise<T>[]): Observable<T>;
|
||||
amb<T>(sources: Observable<T>[]): Observable<T>;
|
||||
amb<T>(sources: IPromise<T>[]): Observable<T>;
|
||||
onErrorResumeNext<T>(...sources: Observable<T>[]): Observable<T>;
|
||||
onErrorResumeNext<T>(...sources: IPromise<T>[]): Observable<T>;
|
||||
onErrorResumeNext<T>(sources: Observable<T>[]): Observable<T>;
|
||||
onErrorResumeNext<T>(sources: IPromise<T>[]): Observable<T>;
|
||||
}
|
||||
|
||||
interface GroupedObservable<TKey, TElement> extends Observable<TElement> {
|
||||
key: TKey;
|
||||
underlyingObservable: Observable<TElement>;
|
||||
}
|
||||
}
|
||||
|
||||
declare module "rx" {
|
||||
export = Rx
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
```
|
||||
function AppComponent() {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
###
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
it('should display Alice with JavaScript', function() {
|
||||
browser.get('gettingstarted/js/index.html');
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
it('should display Alice with TypeScrip', function() {
|
||||
browser.get('gettingstarted/ts/index.html');
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
angular2_1.bootstrap(AppComponent);
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
bootstrap(AppComponent);
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
var angular2_1 = require('angular2/angular2');
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
```
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
```
|
||||
var angular2_1 = require('angular2/angular2');
|
||||
var AppComponent = (function () {
|
||||
function AppComponent() {
|
||||
}
|
||||
AppComponent = __decorate([
|
||||
angular2_1.Component({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
angular2_1.View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppComponent);
|
||||
return AppComponent;
|
||||
})();
|
||||
angular2_1.bootstrap(AppComponent);
|
||||
//# sourceMappingURL=main.js.map
|
||||
```
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
```
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
bootstrap(AppComponent);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
angular2_1.bootstrap(MyAppComponent);
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
bootstrap(MyAppComponent);
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
var angular2_1 = require('angular2/angular2');
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
```
|
||||
var angular2_1 = require('angular2/angular2');
|
||||
var MyAppComponent = (function () {
|
||||
function MyAppComponent() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
MyAppComponent = __decorate([
|
||||
angular2_1.Component({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
angular2_1.View({
|
||||
template: '<h1 id="output">Hello {{ name }}</h1>'
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], MyAppComponent);
|
||||
return MyAppComponent;
|
||||
})();
|
||||
angular2_1.bootstrap(MyAppComponent);
|
||||
//# sourceMappingURL=app.js.map
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
```
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">Hello {{ name }}</h1>'
|
||||
})
|
||||
class MyAppComponent {
|
||||
name : string;
|
||||
|
||||
constructor() {
|
||||
this.name = 'Alice';
|
||||
}
|
||||
}
|
||||
|
||||
bootstrap(MyAppComponent);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
```
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
|
||||
```
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
```
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>System.import('app');</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
it('should display Alice', function() {
|
||||
expect(element(by.id('output')).getText()).toEqual('Hello Alice');
|
||||
});
|
||||
```
|
||||
|
|
@ -9,6 +9,11 @@
|
|||
"title": "Getting Started"
|
||||
},
|
||||
|
||||
"setupAlt": {
|
||||
"title": "Getting Started-testable examples version"
|
||||
},
|
||||
|
||||
|
||||
"displaying-data": {
|
||||
"title": "Displaying Data",
|
||||
"intro": "Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML templates and Angular automatically updates the UI as data changes."
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
include ../../../../_includes/_util-fns
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Install Angular2
|
||||
There are four steps to create any Angular app:
|
||||
|
||||
1. Create an entry point HTML file where users will start
|
||||
1. Load the Angular library at the top of the file
|
||||
1. Make a root component for your application
|
||||
1. Bootstrap Angular
|
||||
|
||||
You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
|
||||
|
||||
When you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code python -m SimpleHTTPServer 8000
|
||||
|
||||
.callout.is-helpful
|
||||
header Typescript vs ES5
|
||||
:markdown
|
||||
Although we work through the examples in TypeScript, you can also use
|
||||
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
|
||||
version. Note that in ES5, you'd want to name your files `.js` rather than
|
||||
`.ts`.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Create an entry point
|
||||
Create an `index.html` file and add the Angular library tags and a `main.ts` file where
|
||||
you'll build your first component.
|
||||
|
||||
In the `<body>`, add an element called `<my-app>` that will be the root of your
|
||||
application.
|
||||
|
||||
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
|
||||
|
||||
+makeTabs('gettingstarted', 'ts/index.html,js/index.html', 'TypeScript, JavaScript')
|
||||
|
||||
.callout.is-helpful
|
||||
header Don't use code.angularjs.org in a live app
|
||||
:markdown
|
||||
This example serves the Angular library from <a href="http://code.angularjs.org">code.angularjs.org</a>. This is
|
||||
fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Set up the starting component
|
||||
|
||||
In `main.ts`, create a class called `AppComponent`, configure it to bind to the
|
||||
`<my-app>` element in `index.html`, and call Angular's `bootstrap()` to kick
|
||||
it all off like this:
|
||||
|
||||
+makeTabs("gettingstarted", "ts/main.ts, js/main.js", "TypeScript, JavaScript")
|
||||
|
||||
.callout.is-helpful
|
||||
header Annotations vs Decorators
|
||||
:markdown
|
||||
If you are transpiling using a tool that translates the `@` symbols to
|
||||
annotations (for example Traceur), you will need to import the annotation versions of
|
||||
Component and View. That can be easily achieved using
|
||||
`import {ComponentAnnotation as Component, ViewAnnotation as View}`.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Run it!
|
||||
|
||||
Open `index.html` through your web server and you should see:
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Explanations
|
||||
|
||||
This basic Angular app contains the structure for any app you'll build.
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### It's all a tree
|
||||
|
||||
You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top
|
||||
level container for the rest of your application. You've named this one `AppComponent`, but there's
|
||||
nothing special about the name and you can use whatever makes sense to you.
|
||||
|
||||
The root component's job is to give a location in the `index.html` file where your application will
|
||||
render through its element, in this case `<my-app>`. There is also nothing special about this
|
||||
element name; you can pick it as you like.
|
||||
|
||||
The root component loads the initial template for the application that will load other components to perform
|
||||
whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of
|
||||
these in the following pages.
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### @Component and @View annotations
|
||||
|
||||
A component annotation describes details about the component. An annotation can be identified by its at-sign (`@`).
|
||||
|
||||
The `@Component` annotation defines the HTML tag for the component by specifying the component's CSS selector.
|
||||
|
||||
The `@View` annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### import vs. window.angular
|
||||
|
||||
The main difference between the ES5 and TypeScript versions is the loading of modules.
|
||||
|
||||
**TypeScript**<br/>
|
||||
TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app.
|
||||
|
||||
**Javascript**<br/>
|
||||
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
|
||||
|
||||
+makeTabs('gettingstarted', 'ts/main-import.ts', 'TypeScript')
|
||||
+makeTabs('gettingstarted', 'ts/main-bootstrap.ts,js/main-bootstrap.js', 'TypeScript, JavaScript')
|
||||
Loading…
Reference in New Issue