improved infrastructure for devguide and revised getting started (TS)
This commit is contained in:
Jay Traband
Naomi Black
parent
c350d01cec
commit
50e758ba60
|
|
@ -7,16 +7,17 @@ Angular.io is currently the preview site for Angular 2. This site also includes
|
|||
|
||||
|
||||
## Development Setup
|
||||
1. Install version 0.17 of [Harp](http://harpjs.com/) (This is the current harp version.)
|
||||
1. install version 0.17 of [Harp](http://harpjs.com/) (This is the current harp version.)
|
||||
2. cd into root directory `angular.io/`
|
||||
3. install local packages by running `npm install`
|
||||
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.
|
||||
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/`
|
||||
|
|
|
|||
198
gulpfile.js
198
gulpfile.js
|
|
@ -1,9 +1,12 @@
|
|||
var gulp = require('gulp');
|
||||
var watch = require('gulp-watch');
|
||||
var gutil = require('gulp-util');
|
||||
var path = require('path');
|
||||
var taskListing = require('gulp-task-listing');
|
||||
var path = require('canonical-path');
|
||||
var del = require('del');
|
||||
var _ = require('lodash');
|
||||
var Git = require("nodegit");
|
||||
var argv = require('yargs').argv;
|
||||
|
||||
var docShredder = require('./public/doc-shredder/doc-shredder');
|
||||
|
||||
|
|
@ -13,6 +16,78 @@ var _shredOptions = {
|
|||
fragmentsDir: "_fragments"
|
||||
};
|
||||
|
||||
// TODO: 'extractFragment' will be moved into _utilFns in the next release.
|
||||
|
||||
// Extract a subset of a json file in a specified order defined
|
||||
// by extractPaths while retaining original order for any
|
||||
// unspecified subobjects.
|
||||
//
|
||||
// based on the principle that JSON.parse(source) constructs objects
|
||||
// in order from the top down in 'source' and JSON.stringify(source) iterates 'source'
|
||||
// properties according to the order in which they were inserted. ( the spec actually
|
||||
// discourages this assumption but this method will only
|
||||
// run on node (v8) and the assumption seems safe there. )
|
||||
function extractFragment(source, rootPath, extractPaths, space) {
|
||||
|
||||
var objSource = JSON.parse(source);
|
||||
if (rootPath && rootPath.length > 0) {
|
||||
objSource = getSubObject(objSource, rootPath);
|
||||
}
|
||||
var objDest = {};
|
||||
extractPaths.trim().split(",").forEach(function(dotPath) {
|
||||
processPath(objSource, objDest, dotPath );
|
||||
});
|
||||
var result = JSON.stringify(objDest, null, space);
|
||||
return result;
|
||||
|
||||
function getSubObject(source, path) {
|
||||
var nextSource = source;
|
||||
var pathParts = path.trim().split(".");
|
||||
while (pathParts.length > 0) {
|
||||
var nextProp = pathParts.shift();
|
||||
nextSource = nextSource[nextProp];
|
||||
}
|
||||
return nextSource;
|
||||
}
|
||||
|
||||
function processPath(source, dest, dotPath) {
|
||||
var nextSource = source;
|
||||
var nextDest = dest;
|
||||
var pathParts = dotPath.trim().split(".");
|
||||
while (pathParts.length > 0) {
|
||||
var nextProp = pathParts.shift();
|
||||
nextSource = nextSource[nextProp];
|
||||
if (pathParts.length > 0) {
|
||||
var val = nextDest[nextProp] || {};
|
||||
nextDest[nextProp] = val;
|
||||
nextDest = val;
|
||||
} else {
|
||||
nextDest[nextProp] = nextSource;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: will be moved into _utilFns in the next release.
|
||||
gulp.task('test-extract-fragments', function() {
|
||||
var json = '{ ' +
|
||||
'"foo": "foo value", ' +
|
||||
'"bar": 3, ' +
|
||||
'"x": {' +
|
||||
' "y": {' +
|
||||
' "y3": "zzz", ' +
|
||||
' "y1": true, ' +
|
||||
' "y2": 7 ' +
|
||||
' }, ' +
|
||||
' "cat": "z value", ' +
|
||||
' "dog": "exclude" ' +
|
||||
'} ' +
|
||||
"}";
|
||||
|
||||
var f1 = extractFragment( json, null, "x.y, x.cat, foo", 2);
|
||||
var f2 = extractFragment( json, "x" , "y.y2, y.y1", 2);
|
||||
});
|
||||
|
||||
/*
|
||||
Within this repo generated files are checked in so that we can avoid running the
|
||||
shredder over the entire _examples dir each time someone refreshes the repo
|
||||
|
|
@ -21,6 +96,8 @@ a ‘partial’ shredder. It only shred’s files in directories changed during
|
|||
the current session.
|
||||
*/
|
||||
|
||||
gulp.task('help', taskListing);
|
||||
|
||||
gulp.task('serve-and-sync', function (cb) {
|
||||
execCommands(['harp server'], {}, cb);
|
||||
|
||||
|
|
@ -55,14 +132,123 @@ gulp.task('shred-clean', function(cb) {
|
|||
});
|
||||
|
||||
gulp.task('build-shred-maps', ['shred-full'], function() {
|
||||
return buildShredMaps(true);
|
||||
});
|
||||
|
||||
// Called with an sha parameter - like this
|
||||
// gulp git-changed-examples --sha 4d2ac96fa247306ddd2d4c4e0c8dee2223502eb2
|
||||
gulp.task('git-changed-examples', function(){
|
||||
|
||||
|
||||
var jadeShredMap;
|
||||
return buildShredMaps(false).then(function(docs) {
|
||||
jadeShredMap = docs[0];
|
||||
// return getChangedExamples('7e6ff558e35fce3b6df45c66c43514c72fbf69e0 ').then(function(filePaths) {
|
||||
return getChangedExamples(argv.sha);
|
||||
}).then(function(examplePaths) {
|
||||
console.log('Examples changed on commit: ' + (argv.sha ? argv.sha : '[last commit]'));
|
||||
console.log(examplePaths)
|
||||
console.log("Jade files and associated changed example files")
|
||||
var jadeExampleMap = jadeShredMapToJadeExampleMap(jadeShredMap, examplePaths);
|
||||
console.log(JSON.stringify(jadeExampleMap, null, " "));
|
||||
}).catch(function(err) {
|
||||
throw err;
|
||||
});
|
||||
});
|
||||
|
||||
//gulp.task('git-review-jade', function() {
|
||||
//
|
||||
//});
|
||||
|
||||
function jadeShredMapToJadeExampleMap(jadeShredMap, examplePaths) {
|
||||
var exampleSet = {};
|
||||
examplePaths.forEach(function(examplePath) {
|
||||
exampleSet[examplePath] = examplePath;
|
||||
});
|
||||
var basePath = jadeShredMap.basePath;
|
||||
var jadeToFragMap = jadeShredMap.jadeToFragMap;
|
||||
var jadeExampleMap = {};
|
||||
for (var jadePath in jadeToFragMap) {
|
||||
var fullJadePath = path.join(basePath, jadePath);
|
||||
var vals = jadeToFragMap[jadePath];
|
||||
vals.forEach(function(val) {
|
||||
var examplePath = path.join(basePath, val.examplePath);
|
||||
if (exampleSet[examplePath] != null) {
|
||||
addKeyValue(jadeExampleMap, fullJadePath, examplePath);
|
||||
}
|
||||
});
|
||||
}
|
||||
return jadeExampleMap;
|
||||
}
|
||||
|
||||
function jadeShredMapToExampleJadeMap(jadeShredMap) {
|
||||
var basePath = jadeShredMap.basePath;
|
||||
var jadeToFragMap = jadeShredMap.jadeToFragMap;
|
||||
var exampleJadeMap = {};
|
||||
for (var jadePath in jadeToFragMap) {
|
||||
var fullJadePath = path.join(basePath, jadePath);
|
||||
var vals = jadeToFragMap[jadePath];
|
||||
vals.forEach(function(val) {
|
||||
var examplePath = path.join(basePath, val.examplePath);
|
||||
addKeyValue(exampleJadeMap, examplePath, fullJadePath);
|
||||
});
|
||||
}
|
||||
return exampleJadeMap;
|
||||
}
|
||||
|
||||
function addKeyValue(map, key, value) {
|
||||
var vals = map[key];
|
||||
if (vals) {
|
||||
vals.push(value);
|
||||
} else {
|
||||
map[key] = [value];
|
||||
}
|
||||
}
|
||||
|
||||
function buildShredMaps(shouldWrite) {
|
||||
var options = _.extend(_shredOptions, {
|
||||
jadeDir: '.',
|
||||
outputDir: '.'
|
||||
outputDir: '.',
|
||||
writeFilesEnabled: shouldWrite
|
||||
});
|
||||
return docShredder.buildShredMap(options).then(function(x) {
|
||||
// var json = x[2];
|
||||
return docShredder.buildShredMap(options).then(function(docs) {
|
||||
return docs;
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// returns a promise containing filePaths with any changed or added examples;
|
||||
function getChangedExamples(sha) {
|
||||
var examplesPath = path.join(_shredOptions.basePath, _shredOptions.examplesDir);
|
||||
var relativePath = path.relative(process.cwd(), examplesPath);
|
||||
return Git.Repository.open(".").then(function(repo) {
|
||||
if (sha) {
|
||||
return repo.getCommit(sha);
|
||||
} else {
|
||||
return repo.getHeadCommit();
|
||||
}
|
||||
}).then(function(commit) {
|
||||
return commit.getDiff();
|
||||
}).then(function(diffList) {
|
||||
var filePaths = [];
|
||||
diffList.forEach(function(diff) {
|
||||
diff.patches().forEach(function(patch) {
|
||||
if (patch.isAdded() || patch.isModified) {
|
||||
var filePath = path.normalize(patch.newFile().path());
|
||||
var isExample = filePath.indexOf(relativePath) >= 0;
|
||||
// console.log(filePath + " isExample: " + isExample);
|
||||
if (isExample) {
|
||||
filePaths.push(filePath);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return filePaths;
|
||||
}).catch(function(err) {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function shredWatch(shredOptions, postShredAction) {
|
||||
var pattern = path.join(shredOptions.basePath, shredOptions.examplesDir, "**/*.*");
|
||||
|
|
@ -109,4 +295,4 @@ function execCommands(cmds, options, cb) {
|
|||
|
||||
|
||||
|
||||
gulp.task('default', ['shred-full']);
|
||||
gulp.task('default', taskListing);
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
"dgeni": "^0.4.0",
|
||||
"dgeni-packages": "^0.10.0",
|
||||
"gulp": "^3.5.6",
|
||||
"gulp-task-listing": "^1.0.1",
|
||||
"gulp-util": "^3.0.6",
|
||||
"gulp-watch": "^4.3.4",
|
||||
"jasmine-core": "^2.3.4",
|
||||
|
|
@ -33,8 +34,10 @@
|
|||
"karma-chrome-launcher": "^0.2.0",
|
||||
"karma-jasmine": "^0.3.6",
|
||||
"lodash": "^3.10.1",
|
||||
"nodegit": "^0.4.1",
|
||||
"path": "^0.11.14",
|
||||
"q": "^1.4.1"
|
||||
"q": "^1.4.1",
|
||||
"yargs": "^3.23.0"
|
||||
},
|
||||
"contributors": [
|
||||
"Jay Traband <jayt@ideablade.com>"
|
||||
|
|
|
|||
|
|
@ -1,45 +1,84 @@
|
|||
- var getFrag = function(fileName) {
|
||||
|
||||
|
||||
|
||||
|
||||
- var getFrag = function(fileName, stylePatterns) {
|
||||
- var frag = partial(fileName);
|
||||
- if (frag == null) {
|
||||
- return "BAD FILENAME: " + fileName + " Current path: " + current.path;
|
||||
- return "BAD FILENAME: " + fileName + " Current path: " + current.path + " Fragment path: " + current.pathToFrags;
|
||||
- } 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);
|
||||
- if (stylePatterns) {
|
||||
- for (var styleName in stylePatterns) {
|
||||
- var rxs = stylePatterns[styleName];
|
||||
- rxs = Array.isArray(rxs) ? rxs : [rxs];
|
||||
- rxs.forEach(function(rx) {
|
||||
- r = annotate(r, styleName, rx );
|
||||
- });
|
||||
- }
|
||||
- }
|
||||
- return r;
|
||||
- }
|
||||
- }
|
||||
|
||||
- var annotate = function(str, styleName, rx) {
|
||||
- var repls = {};
|
||||
- var matches;
|
||||
- do {
|
||||
- matches = rx.exec(str);
|
||||
- if (matches) {
|
||||
- matches.slice(1).forEach(function(match) {
|
||||
- var repl = '<span class="' + styleName + '">' + match + '</span>';
|
||||
- repls[match] = { repl: repl, isGlobal: rx.global };
|
||||
- });
|
||||
- }
|
||||
- } while (matches != null && rx.global );
|
||||
- for (var match in repls) {
|
||||
- var repl = repls[match];
|
||||
- var rx2 = new RegExp(match, repl.isGlobal ? "g" : "");
|
||||
- str = str.replace(rx2, repl.repl);
|
||||
- };
|
||||
- return str;
|
||||
- }
|
||||
|
||||
- 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 getPathToFrags = function() {
|
||||
- var currentPath = current.path;
|
||||
- // simple way to only take as many '../' sections as we need to back up to the 'docs' dir
|
||||
- // from the current document
|
||||
- // we will almost certainly never go 10 or 11 deep but ...
|
||||
- return current.pathToFrags || "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/";
|
||||
- }
|
||||
|
||||
// simple way to only take as many '../' sections as we need to back up to the 'docs' dir
|
||||
// from the current document
|
||||
// we will almost certainly never go 10 or 11 deep but ...
|
||||
- var pathToFrags = "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/";
|
||||
mixin makeExample(path, fileName, title, stylePatterns)
|
||||
|
||||
- var language = attributes.language || getExtn(fileName);
|
||||
- var format = attributes.format || "linenums";
|
||||
- var extPath = getPathToFrags() + path + "/";
|
||||
|
||||
mixin makeExample(path, fileName, title)
|
||||
- var extn = getExtn(fileName);
|
||||
- var extPath = pathToFrags + path + "/";
|
||||
if (title)
|
||||
.example-title #{title}
|
||||
code-example(language="#{extn}" format="linenums")
|
||||
!= getFrag(extPath + fileName + ".md")
|
||||
code-example(language="#{language}" format="#{format}")
|
||||
!= getFrag(extPath + fileName + ".md", stylePatterns)
|
||||
|
||||
mixin makeTabs(path, fileNames, tabNames)
|
||||
mixin makeTabs(path, fileNames, tabNames, stylePatterns)
|
||||
- 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 + "/";
|
||||
code-pane(language="#{extn}" name="#{tabName}" format="linenums")
|
||||
!= getFrag(extPath + fileName + ".md")
|
||||
- var language = attributes.language || getExtn(fileName);
|
||||
- var format = attributes.format || "linenums";
|
||||
- var extPath = getPathToFrags() + path + "/";
|
||||
- var sps = Array.isArray(stylePatterns) ? stylePatterns[index] : stylePatterns;
|
||||
code-pane(language="#{language}" name="#{tabName}" format="#{format}")
|
||||
!= getFrag(extPath + fileName + ".md", sps)
|
||||
|
|
|
|||
|
|
@ -26,6 +26,12 @@ mixin tree(directory, urlPrefix, name, latest)
|
|||
|
||||
|
||||
<!-- BUTTON TITLE GENERATION -->
|
||||
if language == 'ts'
|
||||
if version == "latest"
|
||||
- var title = 'Angular 2 for TypeScript'
|
||||
else
|
||||
- var title = 'Angular ' + version + ' for TypeScript'
|
||||
|
||||
if language == 'js'
|
||||
if version == "latest"
|
||||
- var title = 'Angular 2 for JavaScript'
|
||||
|
|
@ -47,6 +53,7 @@ nav.hero-subtitle.text-subhead.dropdown
|
|||
|
||||
<!-- DROPDOWN MENU -->
|
||||
div(class="dropdown-menu" ng-class="showMenu ? 'is-visible' : ''")
|
||||
mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript")
|
||||
mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript")
|
||||
mixin tree(public.docs.dart, "/docs/dart", "Angular 2 for Dart")
|
||||
ul
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
var gulp = require('gulp');
|
||||
var path = require('canonical-path');
|
||||
var Dgeni = require('dgeni');
|
||||
var del = require('del');
|
||||
var watch = require('gulp-watch');
|
||||
var taskListing = require('gulp-task-listing');
|
||||
|
||||
var docShredder = require('../doc-shredder');
|
||||
|
||||
|
|
@ -11,6 +11,8 @@ var shredOptions = {
|
|||
fragmentsDir: "test_fragments"
|
||||
};
|
||||
|
||||
gulp.task('help', taskListing);
|
||||
|
||||
gulp.task('shred', function() {
|
||||
return docShredder.shred(shredOptions);
|
||||
});
|
||||
|
|
@ -45,5 +47,5 @@ gulp.task('map', function() {
|
|||
|
||||
});
|
||||
|
||||
gulp.task('default', ['shred']);
|
||||
gulp.task('default', taskListing);
|
||||
|
||||
|
|
|
|||
|
|
@ -51,8 +51,6 @@ var buildShredMap = function(shredMapOptions) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
module.exports = {
|
||||
shred: shred,
|
||||
shredSingleDir: shredSingleDir,
|
||||
|
|
@ -140,9 +138,16 @@ var createShredMapPackage = function(mapOptions) {
|
|||
basePath: options.jadeDir
|
||||
} ];
|
||||
})
|
||||
.config(function(writeFilesProcessor) {
|
||||
.config(function(writeFilesProcessor, renderDocsProcessor, unescapeCommentsProcessor) {
|
||||
if (!mapOptions.writeFilesEnabled) {
|
||||
// dgeni hack to allow a geni task to simply return the results of the shredMapProcessor directly
|
||||
renderDocsProcessor.$enabled = false;
|
||||
writeFilesProcessor.$enabled = false;
|
||||
unescapeCommentsProcessor.$enabled = false;
|
||||
} else {
|
||||
// Specify where the writeFilesProcessor will write our generated doc files
|
||||
writeFilesProcessor.outputFolder = options.outputDir;
|
||||
}
|
||||
})
|
||||
.config(function(templateFinder) {
|
||||
// look for templates in this folder
|
||||
|
|
@ -171,6 +176,8 @@ var createShredMapPackage = function(mapOptions) {
|
|||
//});
|
||||
});
|
||||
|
||||
|
||||
|
||||
return pkg;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ var path = require('canonical-path');
|
|||
|
||||
module.exports = function extractPathsReader(log) {
|
||||
// regex for makeTabs line
|
||||
var rx = /\s*\+makeTabs\(\s*["'](.*?)["']\s*,\s*["'](.*?)["'].*?\)/g
|
||||
var rx = /\s*\+make(?:=Tabs|Example)\(\s*["'](.*?)["']\s*,\s*["'](.*?)["'].*?\)/g
|
||||
return {
|
||||
name: 'extractPathsReader',
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
var path = require('canonical-path');
|
||||
var fs = require('fs');
|
||||
var _ = require('lodash');
|
||||
|
||||
module.exports = function shredMapProcessor(log) {
|
||||
return {
|
||||
|
|
@ -21,6 +22,7 @@ module.exports = function shredMapProcessor(log) {
|
|||
var fragInfos = doc.fragPaths.map(function(fragPath) {
|
||||
var relativeFragPath = path.join(options.fragmentsDir, fragPath) + '.md';
|
||||
var fullPath = path.join(options.basePath, relativeFragPath);
|
||||
|
||||
var examplePath = getExampleName(fragPath);
|
||||
var relativeExamplePath = path.join(options.examplesDir, examplePath);
|
||||
var fragInfo = { fragPath: relativeFragPath, examplePath: relativeExamplePath, exists: fs.existsSync(fullPath) };
|
||||
|
|
@ -36,27 +38,34 @@ module.exports = function shredMapProcessor(log) {
|
|||
});
|
||||
jadeToFragMap[jadePath] = fragInfos;
|
||||
});
|
||||
var basePath = path.relative(process.cwd(), this.options.basePath);
|
||||
var shredMap = {
|
||||
basePath: basePath,
|
||||
jadeToFragMap: jadeToFragMap
|
||||
};
|
||||
|
||||
if (!options.writeFilesEnabled) {
|
||||
return [ shredMap ];
|
||||
} else {
|
||||
var newDocs = [ {
|
||||
docType: 'xref-doc.json',
|
||||
json: JSON.stringify(shredMap, null, 2),
|
||||
outputPath: 'xref-jade.json'
|
||||
}, {
|
||||
docType: 'xref-jade.html',
|
||||
basePath: this.options.basePath,
|
||||
basePath: basePath,
|
||||
jadeToFragMap: jadeToFragMap,
|
||||
outputPath: 'xref-jade-to-frag.html'
|
||||
}, {
|
||||
docType: 'xref-frag.html',
|
||||
basePath: this.options.basePath,
|
||||
basePath: basePath,
|
||||
fragToJadeMap: fragToJadeMap,
|
||||
outputPath: 'xref-frag-to-jade.html'
|
||||
}, {
|
||||
docType: 'xref-doc.json',
|
||||
json: JSON.stringify({
|
||||
basePath: this.options.basePath,
|
||||
jadeToFragMap: jadeToFragMap,
|
||||
}, null, 2),
|
||||
outputPath: 'xref-jade.json'
|
||||
}]
|
||||
}];
|
||||
return newDocs;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function getExampleName(fragPath) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
typings
|
||||
*.js.map
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/*global browser, element, by */
|
||||
describe('Getting Started E2E Tests', function() {
|
||||
|
||||
// #docregion shared
|
||||
var expectedMsg = 'My First Angular 2 App';
|
||||
|
||||
// tests shared across languages
|
||||
function sharedTests(basePath) {
|
||||
beforeEach(function () {
|
||||
browser.get(basePath + 'index.html');
|
||||
});
|
||||
|
||||
it('should display: '+ expectedMsg, function() {
|
||||
expect(element(by.id('output')).getText()).toEqual(expectedMsg);
|
||||
});
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
describe('Getting Started in JavaScript', function() {
|
||||
sharedTests('gettingstarted/js/');
|
||||
});
|
||||
|
||||
describe('Getting Started in TypeScript', function() {
|
||||
sharedTests('gettingstarted/ts/');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function() {
|
||||
// #docregion
|
||||
// #docregion class-w-annotations
|
||||
var AppComponent = ng
|
||||
// #docregion component
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
// #enddocregion
|
||||
// #docregion view
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
// #enddocregion
|
||||
// #docregion class
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
||||
// #docregion bootstrap
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ng.bootstrap(AppComponent);
|
||||
});
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
||||
})();
|
||||
|
||||
/* Non DSL Approach */
|
||||
(function() {
|
||||
|
||||
// #docregion no-dsl
|
||||
function AppComponent () {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new ng.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new ng.ViewAnnotation({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
// #enddocregion
|
||||
})();
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
<!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>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
// #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
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
// 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');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -13,6 +13,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|||
// #docregion import
|
||||
var angular2_1 = require('angular2/angular2');
|
||||
// #enddocregion
|
||||
// #docregion class-w-annotations
|
||||
var AppComponent = (function () {
|
||||
function AppComponent() {
|
||||
}
|
||||
|
|
@ -21,13 +22,16 @@ var AppComponent = (function () {
|
|||
selector: 'my-app'
|
||||
}),
|
||||
angular2_1.View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppComponent);
|
||||
return AppComponent;
|
||||
})();
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
// #docregion bootstrap
|
||||
angular2_1.bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
//# sourceMappingURL=main.js.map
|
||||
// #enddocregion
|
||||
//# sourceMappingURL=app.js.map
|
||||
|
|
@ -3,14 +3,19 @@
|
|||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
// #enddocregion
|
||||
|
||||
// #docregion class-w-annotations
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
// #docregion class
|
||||
class AppComponent { }
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
describe("Jasmine sample test", function() {
|
||||
|
||||
it("1+1 should be 2", function() {
|
||||
|
||||
var result = 1 + 1;
|
||||
|
||||
expect(result).toBe(2);
|
||||
});
|
||||
});
|
||||
|
|
@ -4,12 +4,12 @@
|
|||
<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>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('main');
|
||||
System.import('app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
{"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,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"module": "commonjs"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
// Karma configuration
|
||||
// Generated on Mon Aug 10 2015 11:36:40 GMT-0700 (Pacific Daylight Time)
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
|
||||
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||
basePath: '',
|
||||
|
||||
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['jasmine'],
|
||||
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
{ pattern: 'https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js', watched: false },
|
||||
{ pattern: 'https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js', watched: false },
|
||||
{ pattern: 'https://jspm.io/system@0.16.js', watched: false },
|
||||
'**/spec.js',
|
||||
'**/*.spec.js',
|
||||
'**/js/*.js',
|
||||
{ pattern: '**/ts/*.js', included: false },
|
||||
],
|
||||
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [
|
||||
'**/e2e-spec.js',
|
||||
'**/*.e2e-spec.js'
|
||||
],
|
||||
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {
|
||||
},
|
||||
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress'
|
||||
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
reporters: ['progress'],
|
||||
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
logLevel: config.LOG_INFO,
|
||||
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch: true,
|
||||
|
||||
|
||||
// start these browsers
|
||||
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||
browsers: ['Chrome'],
|
||||
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
singleRun: false
|
||||
})
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@ module.exports = function(config) {
|
|||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
{ pattern: 'https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js', watched: false },
|
||||
{ pattern: 'https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js', watched: false },
|
||||
|
||||
'**/js/*.js',
|
||||
],
|
||||
|
|
@ -23,7 +23,7 @@ module.exports = function(config) {
|
|||
|
||||
// list of files to exclude
|
||||
exclude: [
|
||||
'**/protractor-spec.js'
|
||||
'**/*.e2e-spec.js'
|
||||
],
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -17,15 +17,15 @@ module.exports = function(config) {
|
|||
files: [
|
||||
{ pattern: 'https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js', watched: false },
|
||||
{ pattern: 'https://jspm.io/system@0.16.js', watched: false },
|
||||
{ pattern: 'https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js', watched: false },
|
||||
{ pattern: 'https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js', watched: false },
|
||||
|
||||
'**/ts/*.js',
|
||||
'**/ts/**/*.spec.js'
|
||||
],
|
||||
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [
|
||||
'**/protractor-spec.js'
|
||||
'**/*.e2e-spec.js'
|
||||
],
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ exports.config = {
|
|||
seleniumAddress: 'http://localhost:4444/wd/hub',
|
||||
baseUrl: 'http://localhost:8080/',
|
||||
specs: [
|
||||
'quickstart/protractor-spec.js',
|
||||
'gettingstarted/protractor-spec.js'
|
||||
'**/*e2e-spec.js'
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +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"}
|
||||
{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":["MyAppComponent","MyAppComponent.constructor"],"mappings":";;;;;;;;;;;AAEA,AAFA,aAAa;AACb,oBAAoB;AACpB,yBAAyC,mBAAmB,CAAC,CAAA;AAG7D,AAFA,gBAAgB;;IAWfA;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,uBAAuB;AACvB,oBAAS,CAAC,cAAc,CAAC,CAAC;AAC1B,gBAAgB"}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
// protractor-spec.js
|
||||
describe('Protractor quick start test', function() {
|
||||
beforeEach(function() {
|
||||
browser.get('quickstart/index.html');
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<!-- #docregion foo -->
|
||||
<!-- #docregion 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
/*global browser, element, by */
|
||||
describe('Getting Started E2E Tests', function() {
|
||||
|
||||
// #docregion shared
|
||||
var expectedMsg = 'My First Angular 2 App';
|
||||
|
||||
// tests shared across languages
|
||||
function sharedTests(basePath) {
|
||||
beforeEach(function () {
|
||||
browser.get(basePath + 'index.html');
|
||||
});
|
||||
|
||||
it('should display: '+ expectedMsg, function() {
|
||||
expect(element(by.id('output')).getText()).toEqual(expectedMsg);
|
||||
});
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
describe('Getting Started in JavaScript', function() {
|
||||
sharedTests('gettingstarted/js/');
|
||||
});
|
||||
|
||||
describe('Getting Started in TypeScript', function() {
|
||||
sharedTests('gettingstarted/ts/');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
(function() {
|
||||
// #docregion
|
||||
// #docregion class-w-annotations
|
||||
var AppComponent = ng
|
||||
// #docregion component
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
// #enddocregion
|
||||
// #docregion view
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
// #enddocregion
|
||||
// #docregion class
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
||||
// #docregion bootstrap
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ng.bootstrap(AppComponent);
|
||||
});
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
||||
})();
|
||||
|
||||
/* Non DSL Approach */
|
||||
(function() {
|
||||
|
||||
// #docregion no-dsl
|
||||
function AppComponent () {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new ng.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new ng.ViewAnnotation({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
// #enddocregion
|
||||
})();
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// #docregion
|
||||
describe("Jasmine sample test", function() {
|
||||
|
||||
it("1+1 should be 2", function() {
|
||||
var result = 1 + 1;
|
||||
expect(result).toBe(2);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
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
|
||||
// #docregion class-w-annotations
|
||||
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;
|
||||
})();
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
// #docregion bootstrap
|
||||
angular2_1.bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
//# sourceMappingURL=app.js.map
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// #docregion
|
||||
// #docregion import
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
// #enddocregion
|
||||
|
||||
// #docregion class-w-annotations
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
// #docregion class
|
||||
class AppComponent { }
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
describe("Jasmine sample test", function() {
|
||||
|
||||
it("1+1 should be 2", function() {
|
||||
|
||||
var result = 1 + 1;
|
||||
|
||||
expect(result).toBe(2);
|
||||
});
|
||||
});
|
||||
|
|
@ -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.34/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"version": "v4",
|
||||
"repo": "borisyankov/DefinitelyTyped",
|
||||
"ref": "master",
|
||||
"path": "typings",
|
||||
"bundle": "typings/tsd.d.ts",
|
||||
"installed": {
|
||||
"es6-promise/es6-promise.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
},
|
||||
"rx/rx.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
},
|
||||
"rx/rx-lite.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
},
|
||||
"angular2/angular2.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
},
|
||||
"jasmine/jasmine.d.ts": {
|
||||
"commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,73 +0,0 @@
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -1,647 +0,0 @@
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
// 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,14 @@
|
|||
```
|
||||
var expectedMsg = 'My First Angular 2 App';
|
||||
|
||||
// tests shared across languages
|
||||
function sharedTests(basePath) {
|
||||
beforeEach(function () {
|
||||
browser.get(basePath + 'index.html');
|
||||
});
|
||||
|
||||
it('should display: '+ expectedMsg, function() {
|
||||
expect(element(by.id('output')).getText()).toEqual(expectedMsg);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
```
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
ng.bootstrap(AppComponent);
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
```
|
||||
var AppComponent = ng
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
```
|
||||
function AppComponent () {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new ng.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new ng.ViewAnnotation({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
```
|
||||
var AppComponent = ng
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ng.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
<!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>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
```
|
||||
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);
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
```
|
||||
it('should display Alice with JavaScript', function() {
|
||||
browser.get('gettingstarted/js/index.html');
|
||||
});
|
||||
```
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
```
|
||||
it('should display Alice with TypeScrip', function() {
|
||||
browser.get('gettingstarted/ts/index.html');
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
```
|
||||
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;
|
||||
})();
|
||||
```
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
```
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent { }
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
class AppComponent { }
|
||||
```
|
||||
|
|
@ -8,12 +8,11 @@ var AppComponent = (function () {
|
|||
selector: 'my-app'
|
||||
}),
|
||||
angular2_1.View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppComponent);
|
||||
return AppComponent;
|
||||
})();
|
||||
angular2_1.bootstrap(AppComponent);
|
||||
//# sourceMappingURL=main.js.map
|
||||
|
||||
```
|
||||
|
|
@ -5,10 +5,10 @@ import {Component, View, bootstrap} from 'angular2/angular2';
|
|||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
class AppComponent { }
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
```
|
||||
|
|
@ -4,12 +4,12 @@
|
|||
<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>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('main');
|
||||
System.import('app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
```
|
||||
var expectedMsg = 'My First Angular 2 App';
|
||||
|
||||
// tests shared across languages
|
||||
function sharedTests(basePath) {
|
||||
beforeEach(function () {
|
||||
browser.get(basePath + 'index.html');
|
||||
});
|
||||
|
||||
it('should display: '+ expectedMsg, function() {
|
||||
expect(element(by.id('output')).getText()).toEqual(expectedMsg);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ng.bootstrap(AppComponent);
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
```
|
||||
var AppComponent = ng
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
```
|
||||
function AppComponent () {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new ng.ComponentAnnotation({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new ng.ViewAnnotation({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
```
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
```
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
```
|
||||
var AppComponent = ng
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
ng.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
```
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
```
|
||||
describe("Jasmine sample test", function() {
|
||||
|
||||
it("1+1 should be 2", function() {
|
||||
var result = 1 + 1;
|
||||
expect(result).toBe(2);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
angular2_1.bootstrap(AppComponent);
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
bootstrap(AppComponent);
|
||||
```
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
```
|
||||
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;
|
||||
})();
|
||||
```
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
```
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent { }
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
```
|
||||
class 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,18 @@
|
|||
```
|
||||
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;
|
||||
})();
|
||||
|
||||
```
|
||||
|
|
@ -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,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.34/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.import('app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
|
@ -1,33 +1,240 @@
|
|||
include ../../../_includes/_util-fns
|
||||
|
||||
- current.pathToFrags = "../../_fragments/";
|
||||
|
||||
#sg-code.showcase.shadow-1
|
||||
header.showcase-header
|
||||
h2 Code Examples
|
||||
p Below are some examples of how you can add/customize code examples in a page.
|
||||
|
||||
strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
|
||||
ul
|
||||
li <strong>name</strong> Name displayed in Tab (required for tabs)
|
||||
li <strong>language</strong> javascript, html, etc.
|
||||
li <strong>escape</strong> html (escapes html, woot!)
|
||||
li <strong>format</strong> linenums (or linenums:4 specify starting line)
|
||||
|
||||
.showcase-content
|
||||
.l-sub-section
|
||||
|
||||
:markdown
|
||||
### Including a code example from the `_examples` folder
|
||||
|
||||
One of the design goals for this documention was that any code samples that appear within the documentation be 'testable'.
|
||||
In practice this means that a set of standalone testable examples exist somewhere in the same repository as the rest
|
||||
of the documentation. These examples will each typically consist of a collection of html, javascript and css files.
|
||||
|
||||
Clearly there also needs to be some mechanism for including fragments of these files into the jade/harp generated
|
||||
html. By convention all of the 'testable' examples within this repository should be created within the `docs\_examples` folder.
|
||||
|
||||
To include an example from somewhere in the `doc\_examples` folder you can use the `makeExample` mixin.
|
||||
This mixin along with the `makeTabs` mixin both require that the 'included' file be marked
|
||||
up with special comment markers. This markup will be described a bit later.
|
||||
|
||||
In addition there are several custom gulp tasks that must be run before any of the edits described below. These
|
||||
gulp tasks are documented elsewhere.
|
||||
|
||||
In order to use the `makeExample` or `makeTabs` mixins each page that references the mixins must include the '_utilFns.jade'
|
||||
file on the current page. This is usually accomplished simply by adding a path to this file at the top of any
|
||||
page that needs either of these mixins.
|
||||
|
||||
code-example(language="js").
|
||||
include ../../../../_includes/_util-fns
|
||||
|
||||
:markdown
|
||||
The syntax for the `makeExample` mixin is:
|
||||
|
||||
#### +makeExample(basePath, filePath, title, stylePattern)
|
||||
- *basePath:* base path under '_examples'
|
||||
- *filePath:* will be combined with the base path to locate the actual file
|
||||
- *title:* title displayed above the included text.
|
||||
- *stylePattern:* (*optional) allows additional styling via regular expression ( described later).
|
||||
|
||||
#### Example:
|
||||
|
||||
code-example(format="linenums" language="html").
|
||||
+makeExample('styleguide', 'js/index.html', 'index.html')
|
||||
|
||||
:markdown
|
||||
This will read the *_examples/styleguide/js/index.html* file and include it
|
||||
with the heading 'index.html'. Note that the file will be properly escaped and
|
||||
color coded according to the extension on the file ( html in this case).
|
||||
|
||||
+makeExample('styleguide', 'js/index.html', 'index.html')
|
||||
|
||||
:markdown
|
||||
There is a similar `makeTabs` mixin that provides the same service but for multiple examples
|
||||
within a tabbed interface.
|
||||
|
||||
#### +makeTabs(basePath, filePaths, titles, stylePatterns)
|
||||
- *basePath:* base path under '_examples'
|
||||
- *filePaths:* a comma delimited string of paths that will each be combined with the base path to locate the actual file
|
||||
- *titles:* a comma delimited string of titles corresponding to each of the filePaths above.
|
||||
- *stylePatterns:* (*optional) allows additional styling via regular expression( described later).
|
||||
|
||||
#### Example:
|
||||
|
||||
code-example(format="linenums" language="html").
|
||||
+makeTabs('styleguide', 'js/index.html, js/spec.js', 'index.html,unit test')
|
||||
|
||||
:markdown
|
||||
This will create two tabs, each with its own title and appropriately color coded.
|
||||
|
||||
+makeTabs('styleguide', 'js/index.html, js/spec.js', 'index.html,unit test')
|
||||
|
||||
.l-sub-section
|
||||
h3 Inline Code Examples
|
||||
:markdown
|
||||
### Marking up an example file for use by the `makeExample` and `makeTabs` mixins
|
||||
|
||||
p.
|
||||
Inline code example <code ng-non-bindable>{{username}}</code>
|
||||
At a minimum, marking up an example file simply consists of adding a single comment line to the top of the file
|
||||
containing the string `#docregion`. Following this a second string that is the 'name' of the region is also allowed
|
||||
but not required. A file may have any number of `#docregion` comments with the only requirement being that the names
|
||||
of each region within a single file be unique. This also means that there can only be one *blank* docregion.
|
||||
|
||||
#### Example of a simple #docregion
|
||||
|
||||
code-example(format="linenums" language="js").
|
||||
// #docregion
|
||||
describe("Jasmine sample test", function() {
|
||||
it("1+1 should be 2", function() {
|
||||
var result = 1 + 1;
|
||||
expect(result).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
:markdown
|
||||
If a file only has a single `#docregion` then the entire file AFTER the `#docregion` comment is available for inclusion
|
||||
via mixin. Portions of the file can be indicated by surrounding an area of the file with
|
||||
`#docregion` and an `#enddocregion` tags. These regions, each with its own name, may be nested to any level and any regions that are not 'ended' explicitly
|
||||
are assumed to be ended automatically at the bottom of the file. Any individual region within the file is accessible
|
||||
to the `makeExample` and `makeTabs` mixins.
|
||||
|
||||
#### Example of a nested #docregion
|
||||
|
||||
code-example(format="linenums" language="js" escape="html").
|
||||
(function() {
|
||||
// #docregion
|
||||
// #docregion class-w-annotations
|
||||
var AppComponent = ng
|
||||
// #docregion component
|
||||
.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
// #enddocregion
|
||||
// #docregion view
|
||||
.View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
})
|
||||
// #enddocregion
|
||||
// #docregion class
|
||||
.Class({
|
||||
constructor: function () { }
|
||||
});
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
||||
:markdown
|
||||
HTML files can also contain #docregion comments:
|
||||
|
||||
code-example(format="linenums" language="html" escape="html").
|
||||
Inline code example <code ng-non-bindable>{{username}}</code>
|
||||
<!-- #docregion -->
|
||||
...
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
|
||||
<script src="app.js"></script>
|
||||
...
|
||||
|
||||
p.
|
||||
Notice the <strong>ng-non-bindable</strong> attribute. This is only
|
||||
needed when using code examples inline <strong>code-tabs and code-example directives
|
||||
automatically do this</strong>.
|
||||
:markdown
|
||||
as can CSS files:
|
||||
|
||||
code-example(format="linenums" language="css").
|
||||
/* #docregion bar */
|
||||
.center-global {
|
||||
max-width: 1020px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.l-sub-section
|
||||
h3 Adding a code example
|
||||
:markdown
|
||||
### Including a named #docregion via the makeExample or makeTabs mixins.
|
||||
|
||||
In order to include just a portion of an example file that has been marked up with a 'named' `#docregion`
|
||||
you will pass in an 'extended' file name that indicates the name of both the file and the region.
|
||||
An extended file name is simply the file name with the name of the file suffixed with a "-" followed by the
|
||||
name of the region. So a a file `foo.js` with a "test" region would have an extended file name of `foo-test.js`.
|
||||
|
||||
#### Example
|
||||
code-example(format="linenums" language="html").
|
||||
+makeExample('styleguide', 'js/app-class-w-annotations.js')
|
||||
|
||||
:markdown
|
||||
is a request to include just the `class-w-annotations` region from the `app.js` file in the `_examples/styleguide`
|
||||
folder and results in the following:
|
||||
|
||||
+makeExample('styleguide', 'js/app-class-w-annotations.js')
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### Additional styling
|
||||
|
||||
In some cases you may want to add additional styling to an external file after it had been included in the documentation.
|
||||
This styling is accomplished via the `stylePattern` and `stylePatterns` parameters in the `makeExample` and `makeTabs`
|
||||
mixins. A `stylePattern` is actually just a javascript object where the keys are the names of styles to be applied to
|
||||
some portion of the included text as defined by a regular expression ( or expressions). These regular expressions are the
|
||||
value of each key. Each regular expression MUST specify at least a single capture group; the contents of the capture
|
||||
group being what the style will actually apply to, not the entire regular expression. The idea here is that you may
|
||||
need to include a contextual match in a regular expression but only want your styling to be applied to a subset
|
||||
of the entire regular expression.
|
||||
|
||||
Current there are only three types of highlight styles available: Outlined (otl), Pink (pnk), and Black (blk), however the
|
||||
mechanism described above will work with any style defined on the page.
|
||||
|
||||
#### Example
|
||||
code-example(format="linenums" language="js" escape="none").
|
||||
+makeExample('styleguide', 'js/index.html', 'index.html', { pnk: /script (src=.*&quot)/g })
|
||||
|
||||
:markdown
|
||||
Which will mark all of the quoted contents of each `script` tag within the index.html file in pink.
|
||||
|
||||
.alert.is-important.
|
||||
Note that expression replacement occurs AFTER the fragment has been included and html escaped.
|
||||
This means that your regular expression must use escaped html text; i.e. the '&quot' in the regex above.
|
||||
|
||||
+makeExample('styleguide', 'js/index.html', 'index.html', {pnk: /script (src=.*")/g})
|
||||
|
||||
:markdown
|
||||
A more complicated example might be:
|
||||
|
||||
code-example(format="linenums" language="html").
|
||||
- var stylePattern = { pnk: /script (src=.*&quot)/g, otl: /(my-app)/ };
|
||||
+makeExample('styleguide', 'js/index.html', 'index.html', stylePattern )
|
||||
|
||||
:markdown
|
||||
Which applies multiple styles and uses an intermediate javascript object as opposed to a literal.
|
||||
|
||||
- var stylePattern = { pnk: /script (src=.*")/g, otl: /(my-app)/ };
|
||||
+makeExample('styleguide', 'js/index.html', 'index.html', stylePattern )
|
||||
|
||||
:markdown
|
||||
`makeTabs` support for `stylePatterns` is slightly different from the `makeExample` mixin in that you can also
|
||||
pass in an array of stylePattern objects where each is paired with its corresponding 'tab'. If only a single stylePattern
|
||||
object is passed in then it is assumed to apply to all of the tabs.
|
||||
|
||||
code-example(format="linenums" language="html").
|
||||
-var stylePatterns = [{ pnk: /script (src=.*")/g }, {pnk: /(result)/ }];
|
||||
+makeTabs('styleguide', 'js/index.html, js/spec.js', 'index.html,unit test', stylePatterns)
|
||||
|
||||
-var stylePatterns = [{ pnk: /script (src=.*")/g }, {pnk: /(result)/ }];
|
||||
+makeTabs('styleguide', 'js/index.html, js/spec.js', 'index.html,unit test', stylePatterns)
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### Inline code and code examples provided directly i.e. not from an example file.
|
||||
|
||||
The `makeExample` and `makeTabs` mixins are both both built on top of a custom jade 'style'; `code-example`.
|
||||
In those cases where you want to include code directly inline i.e. not from some external file; you can use
|
||||
this style.
|
||||
This style has several named attributes
|
||||
|
||||
#### code-example attributes
|
||||
- *name:" Name displayed in Tab (required for tabs)
|
||||
- *language* javascript, html, etc.
|
||||
- *escape:* html (escapes html, woot!)
|
||||
- *format:* linenums (or linenums:4 specify starting line)
|
||||
|
||||
#### Example
|
||||
|
||||
code-example(format="linenums" language="html").
|
||||
code-example(format="linenums" language="javascript").
|
||||
|
|
@ -80,7 +287,7 @@
|
|||
p.
|
||||
Code Tabs are a great way to show different languages and versions
|
||||
of a particular piece of code. When using these tabs make sure the
|
||||
<stron>content is always related</strong>.
|
||||
<strong>content is always related</strong>.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" format="linenums" name="ES5").
|
||||
|
|
@ -98,3 +305,22 @@
|
|||
// TAB 1 CONTENT
|
||||
code-pane(format="linenums" name="Tab 2").
|
||||
// TAB 2 CONTENT
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### Combining makeExample, makeTabs mixins with code-example style attributes
|
||||
As mentioned above the `makeExample` and `makeTabs` mixins are built on top of the `code-example` style. By default
|
||||
the mixins automatically determine a language based on the example file's extensions and always include line numbers.
|
||||
|
||||
You can override this behavior by including code-example attributes within parentheses after the mixin parameters.
|
||||
|
||||
#### Example
|
||||
|
||||
code-example().
|
||||
+makeExample('styleguide', 'js/app-class-w-annotations.js')(format="linenums:15")
|
||||
|
||||
:markdown
|
||||
Starts the numbering of the example at line 15.
|
||||
|
||||
+makeExample('styleguide', 'js/app-class-w-annotations.js')(format="linenums:15")
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
#sg-code.showcase.shadow-1
|
||||
header.showcase-header
|
||||
h2 Code Examples
|
||||
p Below are some examples of how you can add/customize code examples in a page.
|
||||
|
||||
|
||||
strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
|
||||
ul
|
||||
li <strong>name</strong> Name displayed in Tab (required for tabs)
|
||||
li <strong>language</strong> javascript, html, etc.
|
||||
li <strong>escape</strong> html (escapes html, woot!)
|
||||
li <strong>format</strong> linenums (or linenums:4 specify starting line)
|
||||
|
||||
.showcase-content
|
||||
|
||||
.l-sub-section
|
||||
h3 Inline Code Examples
|
||||
|
||||
p.
|
||||
Inline code example <code ng-non-bindable>{{username}}</code>
|
||||
|
||||
code-example(format="linenums" language="html" escape="html").
|
||||
Inline code example <code ng-non-bindable>{{username}}</code>
|
||||
|
||||
p.
|
||||
Notice the <strong>ng-non-bindable</strong> attribute. This is only
|
||||
needed when using code examples inline <strong>code-tabs and code-example directives
|
||||
automatically do this</strong>.
|
||||
|
||||
.l-sub-section
|
||||
h3 Adding a code example
|
||||
|
||||
code-example(format="linenums" language="html").
|
||||
code-example(format="linenums" language="javascript").
|
||||
//SOME CODE
|
||||
|
||||
.l-sub-section
|
||||
h3 Specify starting line number
|
||||
|
||||
code-example(language="javascript" format="linenums:4").
|
||||
code-example(language="html" format="linenums:4").
|
||||
var title = "This starts on line four";
|
||||
|
||||
.l-sub-section
|
||||
h3 Specify a language
|
||||
|
||||
p.
|
||||
Prettify makes a best effort to guess the language but
|
||||
works best with C-like and HTML-like languages. For
|
||||
others, there are special language handlers that are
|
||||
chosen based on language hints. Add a class that matches
|
||||
your desired language (example below uses <strong>.lang-html</strong>)
|
||||
|
||||
code-example(language="html" format="linenums").
|
||||
h1 Title
|
||||
p This is some copy...
|
||||
|
||||
.l-sub-section
|
||||
h3 Code Highlighting
|
||||
p.
|
||||
There are three types of highlights avialable
|
||||
<strong>Outlined</strong>, <strong>Pink</strong>, and
|
||||
<strong>Black</strong>. You can see examples below and
|
||||
the class names needed for each type.
|
||||
|
||||
code-example(format="linenums").
|
||||
// Pink Background Version
|
||||
// class="pnk"
|
||||
var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
|
||||
|
||||
// Black Background Version
|
||||
// class="blk"
|
||||
var night = "The night was pitch <span class='blk'>black</span>.";
|
||||
|
||||
// Outlined Version
|
||||
// class="otl"
|
||||
var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
|
||||
|
||||
.l-sub-section
|
||||
h3 Code Tabs
|
||||
p.
|
||||
Code Tabs are a great way to show different languages and versions
|
||||
of a particular piece of code. When using these tabs make sure the
|
||||
<stron>content is always related</strong>.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" format="linenums" name="ES5").
|
||||
// ES5
|
||||
var hello = 'blah';
|
||||
|
||||
code-pane(language="javascript" format="linenums" name="TypeScript").
|
||||
// TypeScript
|
||||
var hello = 'blah';
|
||||
|
||||
p To create code tabs simply use the directives below
|
||||
code-example(format="linenums").
|
||||
code-tabs
|
||||
code-pane(format="linenums" name="Tab 1").
|
||||
// TAB 1 CONTENT
|
||||
code-pane(format="linenums" name="Tab 2").
|
||||
// TAB 2 CONTENT
|
||||
|
|
@ -0,0 +1 @@
|
|||
include ../../../_includes/_util-fns
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
"title": "Step By Step Guide"
|
||||
},
|
||||
|
||||
"setup": {
|
||||
"gettingStarted": {
|
||||
"title": "Getting Started"
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
include ../_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.
|
||||
|
||||
If you don't already have an HTTP server, you can install one using <code>npm install -g http-server</code>. (If that results in an access error, then you might need to use <code><b>sudo</b> npm ...</code>.)
|
||||
|
||||
For example:
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code.
|
||||
# From the directory that contains index.html:
|
||||
npm install -g http-server # Or sudo npm install -g http-server
|
||||
http-server # Creates a server at localhost:8080
|
||||
# In a browser, visit localhost:8080/index.html
|
||||
|
||||
.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.
|
||||
|
||||
- var tsStyles = { pnk: [ /script (src=.*quot)/g, /System\.(import)/g] }
|
||||
- var jsStyles = { otl: /script src=(".*")/g }
|
||||
+makeTabs('gettingstarted', 'ts/index.html,js/index.html', 'TypeScript, JavaScript', [ tsStyles, jsStyles ])
|
||||
|
||||
.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",
|
||||
{ otl: [ /(AppComponent)/g, /(my-app)/g ],
|
||||
pnk: / (\w*:)/g } )
|
||||
|
||||
.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')
|
||||
|
||||
+makeExample('gettingstarted/js', 'main-bootstrap.js', 'JavaScript')
|
||||
|
|
@ -12,16 +12,10 @@ include ../../../../_includes/_util-fns
|
|||
|
||||
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.
|
||||
|
||||
If you don't already have an HTTP server, you can install one using <code>npm install -g http-server</code>. (If that results in an access error, then you might need to use <code><b>sudo</b> npm ...</code>.)
|
||||
|
||||
For example:
|
||||
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.
|
||||
# From the directory that contains index.html:
|
||||
npm install -g http-server # Or sudo npm install -g http-server
|
||||
http-server # Creates a server at localhost:8080
|
||||
# In a browser, visit localhost:8080/index.html
|
||||
code python -m SimpleHTTPServer 8000
|
||||
|
||||
.callout.is-helpful
|
||||
header Typescript vs ES5
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"index": {
|
||||
"icon": "home",
|
||||
"title": "Angular Docs",
|
||||
"menuTitle": "Docs Home",
|
||||
"banner": "Angular 2 is currently in Developer Preview. We recommend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
|
||||
},
|
||||
|
||||
"quickstart": {
|
||||
"icon": "query-builder",
|
||||
"title": "5 Min Quickstart"
|
||||
},
|
||||
|
||||
"guide": {
|
||||
"icon": "list",
|
||||
"title": "Step By Step Guide",
|
||||
"banner": "Angular 2 is currently in Developer Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
|
||||
},
|
||||
|
||||
"api": {
|
||||
"icon": "book",
|
||||
"title": "API Preview"
|
||||
},
|
||||
|
||||
"resources": {
|
||||
"icon": "play-circle-fill",
|
||||
"title": "Angular Resources",
|
||||
"banner": "Angular 2 is currently in Developer Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
|
||||
},
|
||||
|
||||
"help": {
|
||||
"icon": "chat",
|
||||
"title": "Help & Support"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"_listtype": "ordered",
|
||||
|
||||
"index": {
|
||||
"title": "Step By Step Guide"
|
||||
},
|
||||
|
||||
"gettingStarted": {
|
||||
"title": "Getting Started"
|
||||
},
|
||||
|
||||
"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."
|
||||
},
|
||||
|
||||
"user-input": {
|
||||
"title": "User Input",
|
||||
"intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
|
||||
},
|
||||
|
||||
"making-components": {
|
||||
"title": "Making Components",
|
||||
"intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
.l-main-section
|
||||
|
||||
h2#section-displaying-controller-properties Displaying controller properties
|
||||
|
||||
|
||||
p.
|
||||
Let's walk through how we'd display a property, a list of properties, and then conditionally show content
|
||||
based on state. We'll end up with a UI that looks like this:
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/examples/displaying-data-example1.png' alt="Example of Todo App")
|
||||
|
||||
.callout.is-helpful
|
||||
header Typescript vs ES5
|
||||
p.
|
||||
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 <code>.js</code> rather than
|
||||
<code>.ts</code>.
|
||||
|
||||
.l-main-section
|
||||
h2#section-create-an-entry-point Create an entry point
|
||||
|
||||
p Open your favorite editor and create a <code>show-properties.html</code> file with the content:
|
||||
|
||||
code-example(language="html" escape="html").
|
||||
<display></display>
|
||||
|
||||
p
|
||||
| The <code><display></code> component here acts as the site where you'll insert your application.
|
||||
| We'll assume a structure like this for the rest of the examples here and just focus on the parts that
|
||||
| are different.
|
||||
|
||||
.l-main-section
|
||||
h2#section-showing-properties-with-interpolation Showing properties with interpolation
|
||||
p.text-body
|
||||
| The simple method for binding text into templates is through interpolation where you put the name of a property
|
||||
| inside <strong>{{ }}</strong>.
|
||||
|
||||
p To see this working, create another file, <code>show-properties.ts</code>, and add the following:
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
// TypeScript
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'display'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<p>My name: {{ myName }}</p>
|
||||
`
|
||||
})
|
||||
class DisplayComponent {
|
||||
myName: string;
|
||||
|
||||
constructor() {
|
||||
this.myName = "Alice";
|
||||
}
|
||||
}
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
// ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "display"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>'
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
p.
|
||||
You've just defined a component that encompasses a view and controller for the app. The view
|
||||
defines a template:
|
||||
|
||||
code-example(language="html" escape="html").
|
||||
<p>My name: {{ myName }}</p>
|
||||
|
||||
p.
|
||||
Angular will automatically pull the value of <code>myName</code> and insert it into the browser and
|
||||
update it whenever it changes without work on your part.
|
||||
|
||||
p.
|
||||
One thing to notice here is that though you've written your <code>DisplayComponent</code> class, you haven't
|
||||
called new to create one anywhere. By associating your class with elements named 'display' in
|
||||
the DOM, Angular knows to automatically call new on <code>DisplayComponent</code> and bind its properties to
|
||||
that part of the template.
|
||||
|
||||
p.
|
||||
When you're building templates, data bindings like these have access to the same scope of
|
||||
properties as your controller class does. Here, your class is the <code>DisplayComponent</code> that has
|
||||
just one property, myName.
|
||||
|
||||
.callout.is-helpful
|
||||
header Note
|
||||
p.
|
||||
While you've used <code>template:</code> to specify an inline view, for larger templates you'd
|
||||
want to move them to a separate file and load them with <code>templateUrl:</code> instead.
|
||||
|
||||
.l-main-section
|
||||
h2#Create-an-array Create an array property and use NgFor on the view
|
||||
p Moving up from a single property, create an array to display as a list.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//Typescript
|
||||
class DisplayComponent {
|
||||
myName: string;
|
||||
<span class='otl'>names: Array<string>;</span>
|
||||
|
||||
constructor() {
|
||||
this.myName = "Alice";
|
||||
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
|
||||
}
|
||||
}
|
||||
|
||||
code-pane(language="javascript" name="Javascript (ES5)" format="linenums").
|
||||
//ES5
|
||||
function DisplayComponent() {
|
||||
this.myName = "Alice";
|
||||
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
|
||||
}
|
||||
p.
|
||||
You can then use this array in your template with the <code>NgFor</code> directive to create copies of DOM elements
|
||||
with one for each item in the array.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//Typescript
|
||||
template: `
|
||||
<p>My name: {{ myName }}</p>
|
||||
<p>Friends:</p>
|
||||
<ul>
|
||||
<li *ng-for="#name of names">
|
||||
{{ name }}
|
||||
</li>
|
||||
</ul>
|
||||
`,
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
template:
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *ng-for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>',
|
||||
|
||||
p.
|
||||
To make this work, you'll also need to add the <code>NgFor</code> directive used by the template so
|
||||
that Angular knows to include it:
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//Typescript
|
||||
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
|
||||
@View({
|
||||
...
|
||||
directives: [NgFor]
|
||||
})
|
||||
|
||||
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
DisplayComponent.annotations = [
|
||||
...
|
||||
new angular.ViewAnnotation({
|
||||
...
|
||||
directives: [angular.NgFor]
|
||||
})
|
||||
];
|
||||
|
||||
p Reload and you've got your list of friends!
|
||||
p.
|
||||
Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
|
||||
list. Delete one and Angular deletes the <li>. Reorder items and Angular makes the corresponding reorder of
|
||||
the DOM list.
|
||||
p Let's look at the few lines that do the work again:
|
||||
code-example(language="html" format="linenums").
|
||||
//HTML
|
||||
<li *ng-for="#name of names">
|
||||
{{ name }}
|
||||
</li>
|
||||
p The way to read this is:
|
||||
ul
|
||||
li.
|
||||
<code>*ng-for</code> : create a DOM element for each item in an
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
|
||||
like an array
|
||||
li <code>#name</code> : refer to individual values of the iterable as 'name'
|
||||
li <code>of names</code> : the iterable to use is called 'names' in the current controller
|
||||
p Using this syntax, you can build UI lists from any iterable object.
|
||||
.l-main-section
|
||||
h2#Create-a-class Create a class for the array property and inject into component
|
||||
|
||||
p.
|
||||
Before we get too much further, we should mention that putting our model (array) directly in our controller isn't
|
||||
proper form. We should separate the concerns by having another class serve the role of model and inject it into
|
||||
the controller.
|
||||
|
||||
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
class FriendsService {
|
||||
names: Array<string>;
|
||||
constructor() {
|
||||
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
}
|
||||
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
function FriendsService() {
|
||||
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
|
||||
}
|
||||
|
||||
p.
|
||||
Now replace the current list of friends in DisplayComponent by including the FriendsService in the injectables list,
|
||||
then including the service in the constructor, and finally setting the list of
|
||||
names in DisplayComponent to the names provided by the service you passed in.
|
||||
|
||||
.callout.is-helpful
|
||||
header ES5 Note
|
||||
p.
|
||||
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're
|
||||
working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
@Component({
|
||||
...
|
||||
<span class='otl'>appInjector: [FriendsService]</span>
|
||||
})
|
||||
class DisplayComponent {
|
||||
myName: string;
|
||||
names: Array<string>;
|
||||
constructor(<span class='otl'>friendsService: FriendsService</span>) {
|
||||
this.myName = 'Alice';
|
||||
<span class='otl'>this.names = friendsService.names;</span>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function DisplayComponent(<span class='otl'>friends</span>) {
|
||||
this.myName = "Alice";
|
||||
this.names = <span class='otl'>friends.names</span>;
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "display",
|
||||
<span class='otl'>appInjector: [FriendsService]</span>
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>',
|
||||
directives: [angular.NgFor]
|
||||
})
|
||||
];
|
||||
<span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
angular.bootstrap(DisplayComponent);
|
||||
});
|
||||
.l-main-section
|
||||
h2#Conditionally-displaying-data-with-NgIf Conditionally displaying data with NgIf
|
||||
p.
|
||||
Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>NgIf</code>. The
|
||||
<code>NgIf</code> directive adds or removes elements from the DOM based on the expression you provide.
|
||||
p See it in action by adding a paragraph at the end of your template
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<p *ng-if="names.length > 3">You have many friends!</p>
|
||||
p You'll also need to add the <code>NgIf</code> directive so Angular knows to include it.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//Typescript
|
||||
import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2';
|
||||
...
|
||||
directives: [NgFor, NgIf]
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
directives: [angular.NgFor, angular.NgIf]
|
||||
p.
|
||||
As there are currently 6 items in the list, you'll see the message congratulating you on your many friends.
|
||||
Remove three items from the list, reload your browser, and see that the message no longer displays.
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2';
|
||||
...
|
||||
@View({
|
||||
<span class='otl'>template</span>: `
|
||||
<p>My name: {{ myName }}</p>
|
||||
<p>Friends:</p>
|
||||
<ul>
|
||||
<li *ng-for="#name of names">
|
||||
{{ name }}
|
||||
</li>
|
||||
</ul>
|
||||
<p *ng-if="names.length > 3">You have many friends!</p>
|
||||
`,
|
||||
directives: [NgFor, NgIf]
|
||||
})
|
||||
class DisplayComponent {
|
||||
...
|
||||
}
|
||||
|
||||
class FriendsService {
|
||||
names: Array<string>;
|
||||
constructor() {
|
||||
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
|
||||
}
|
||||
}
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function DisplayComponent(friends) {
|
||||
this.myName = "Alice";
|
||||
this.names = friends.names;
|
||||
}
|
||||
DisplayComponent.annotations = [
|
||||
...
|
||||
new angular.ViewAnnotation({
|
||||
<span class='otl'>template</span>: '
|
||||
'<p>My name: {{ myName }}</p>' +
|
||||
'<p>Friends:</p>' +
|
||||
'<ul>' +
|
||||
'<li *ng-for="#name of names">' +
|
||||
'{{ name }}' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<p *ng-if="names.length > 3">You have many friends!</p>'',
|
||||
directives: [angular.NgFor, angular.NgIf]
|
||||
})
|
||||
];
|
||||
|
||||
function FriendsService () {
|
||||
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
|
||||
}
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
include ../../../../_includes/_util-fns
|
||||
|
||||
:markdown
|
||||
Let's start from zero and build a simple Angular 2 application in TypeScript.
|
||||
|
||||
.callout.is-helpful
|
||||
header Don't want TypeScript?
|
||||
:markdown
|
||||
Although we're getting started in TypeScript, you can also write Angular 2 apps
|
||||
in JavaScript and Dart by selecting either of those languages from the combo-box in the banner.
|
||||
|
||||
:markdown
|
||||
We'll do it in seven short steps
|
||||
1. Install the prerequisites for Angular TypeScript development
|
||||
1. Create a new project folder and configure TypeScript
|
||||
1. Create an *index.html*
|
||||
1. Write the root component for our application in *app.ts*
|
||||
1. Bootstrap the app
|
||||
1. Compile the TypeScript to JavaScript
|
||||
1. Run it
|
||||
|
||||
.l-main-section
|
||||
|
||||
:markdown
|
||||
## Prerequisites
|
||||
|
||||
We'll need a base of tools for all of our application development. We'll only install these once starting with
|
||||
[**node** and **npm**](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm").
|
||||
|
||||
Now use npm in a terminal (or Windows/Linux command line) to install the **TypeScript compiler** globally
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code npm install -g typescript
|
||||
|
||||
:markdown
|
||||
Use npm again to install the [**tsd package manager**](https://www.npmjs.com/package/tsd "TSD Package Manager")
|
||||
so we can download TypeScript type definitions ("d.ts" files)
|
||||
from the [DefinitelyTyped](http://definitelytyped.org/) repository.
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code npm install -g tsd
|
||||
|
||||
:markdown
|
||||
Install a node **static server** to serve the static files of our application.
|
||||
|
||||
.alert.is-helpful
|
||||
|
||||
:markdown
|
||||
You can skip this step if you've got python on your machine because python ships with a static server.
|
||||
Or you can install one of the many node-based static servers such as
|
||||
[http-server](https:/github.com/nodeapps/http-server "http-server"),
|
||||
[superstatic](https://www.npmjs.com/package/superstatic "superstatic"), or
|
||||
[live-server](https://www.npmjs.com/package/live-server "live-server").
|
||||
|
||||
:markdown
|
||||
We'll use **live-server** for this example because it performs a live reload by default and it's
|
||||
fun to watch the browser update as we make changes.
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code npm install -g live-server
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Create a project folder and configure TypeScript
|
||||
|
||||
Create a new folder to hold our application project, perhaps like this:
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code mkdir firstNgApp && cd firstNgApp
|
||||
|
||||
:markdown
|
||||
We prefer writing TypeScript apps in an editor that understands TypeScript,
|
||||
an editor such as [Visual Studio Code](https://code.visualstudio.com/) or
|
||||
[Web Storm](https://www.jetbrains.com/webstorm/features/).
|
||||
|
||||
We should tell that editor how to compile TypeScript to JavaScript
|
||||
with a configuration file named **tsconfig.json**.
|
||||
This configuration file also simplifies the TypeScript compilation command we'll run later in this story.
|
||||
|
||||
Create *tsconfig.json* now with the following JSON content:
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"module": "commonjs",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Create an *index.html*
|
||||
|
||||
Add a new `index.html` file to the project folder and enter the following HTML
|
||||
|
||||
+makeExample('gettingstarted', 'ts/index.html', 'index.html')
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
Our app loads three script files in the `<head>` element:
|
||||
|
||||
>***traceur-runtime.js*** to transpile the TypeScript-generated JavaScript into the version of Javascript
|
||||
our browser understands (the version known as "ES5").
|
||||
|
||||
>***system.js***, a third-party open-source library that adds module loading functionality to our browser.
|
||||
|
||||
>***angular.js***, the Angular 2 library.
|
||||
|
||||
In the `<body>`, there's an element called `<my-app>`. This is a placeholder for the *root* of our
|
||||
application. Angular will display our application content here.
|
||||
|
||||
The final inline script tells *system.js* to load another JavaScript file named "app".
|
||||
We haven't written that file yet; let's do so now.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Write the *app* component
|
||||
|
||||
Create an *app.ts* file and add an empty class called `AppComponent` as follows:
|
||||
|
||||
+makeExample('gettingstarted', 'ts/app-class.ts')
|
||||
|
||||
:markdown
|
||||
We won't ask this class to do anything. It's just an empty, meaningless class until we tell
|
||||
Angular about it by decorating it with some *annotations*.
|
||||
|
||||
We import the `component` and `view` *annotations* that we need from the Angular library at the top of the file:
|
||||
|
||||
+makeExample('gettingstarted', 'ts/app-import.ts')
|
||||
|
||||
:markdown
|
||||
Then we apply those annotations to the `AppComponent` class by writing the following lines
|
||||
just above the class definition:
|
||||
|
||||
+makeExample('gettingstarted', 'ts/app-class-w-annotations.ts')
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
TypeScript recognizes the `@` symbol as a prefix for a class annotation.
|
||||
|
||||
The **`@Component`** annotation tells Angular this class is a component
|
||||
that controls the element named "my-app".
|
||||
You may remember we added such an element to our *index.html* above.
|
||||
|
||||
The **`@View`** annotation identifies the "view" - the HTML template -
|
||||
that defines the visual appearance of this component. We're writing the HTML template inline
|
||||
in this example. Later we'll move the HTML to a view template file and
|
||||
assign the template's filename to the `templateUrl`.
|
||||
We'll prefer that practice for all but the most trivial templates.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Bootstrap the app
|
||||
|
||||
Finally, we tell Angular to start running our app
|
||||
with an instance of the `AppComponent` class as the root component.
|
||||
We call this "bootstrapping the app".
|
||||
|
||||
+makeExample('gettingstarted', 'ts/app-bootstrap.ts')
|
||||
|
||||
:markdown
|
||||
Here is the complete *app.ts*
|
||||
|
||||
+makeExample('gettingstarted', 'ts/app.ts', 'app.ts')
|
||||
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Compile the TypeScript to JavaScript
|
||||
|
||||
We've written our app in TypeScript but the browser only understands JavaScript.
|
||||
We must run the TypeScript compiler to produce JavaScript for the browser.
|
||||
|
||||
Open a terminal window in the root of the code director and enter:
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code tsc
|
||||
|
||||
:markdown
|
||||
After it runs we should find the generated *app.js* file in the project folder and also an *app.map.js* file that
|
||||
helps debuggers navigate between the JavaScript and the TypeScript source.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Run it!
|
||||
|
||||
Now we can see this app in action by serving the files we created with a local web server.
|
||||
|
||||
Open a another terminal window in the root of the code directory and launch the server.
|
||||
|
||||
If we have python installed on our machine, we can run a basic HTTP server:
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code python -m SimpleHTTPServer 8000
|
||||
|
||||
:markdown
|
||||
then point a browser to http://localhost:8000 which should display our simple text message:
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
|
||||
|
||||
:markdown
|
||||
Alternatively, we might run with a node server such as the *live-server* we recommended earlier:
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code live-server --port=8000
|
||||
|
||||
:markdown
|
||||
**live-server** loads the browser for us and refreshes the page as we make
|
||||
changes to the application. *Check it out!*
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Add Type Definition Files (optional)
|
||||
|
||||
Code editors (such as [Visual Studio Code](https://code.visualstudio.com/) and
|
||||
[Web Storm](https://www.jetbrains.com/webstorm/features/))
|
||||
improve the development experience by checking type information and
|
||||
displaying API documentation ("intellisense") based on TypeScript type definition files.
|
||||
|
||||
We can download type definitions files for third-party libraries such as Angular
|
||||
from the [DefinitelyTyped](http://definitelytyped.org/) repository using the
|
||||
[**tsd package manager**](https://www.npmjs.com/package/tsd "TSD Package Manager")
|
||||
that we installed earlier.
|
||||
|
||||
Let's download and install the core set of type definitions files for Angular development
|
||||
in the root directory of our application.
|
||||
|
||||
pre.prettyprint.lang-bash
|
||||
code tsd query angular2 es6-promise rx rx-lite jasmine --action install --save
|
||||
|
||||
:markdown
|
||||
We'll find a ***typings*** folder in the root directory
|
||||
with subfolders for each of the five downloaded type definition files (angular, es6-promise, rx, rx-lite, jasmine).
|
||||
Type definition files have names ending in ***d.ts***.
|
||||
There's also a summary ***tsd.d.ts*** file containing references to each of them.
|
||||
|
||||
Check your editor's documentation for instructions on using the *tsd.d.ts* file to
|
||||
light up type checking and intellisense for these libraries.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## It's all a tree
|
||||
|
||||
We can think of Angular apps as a tree of components.
|
||||
|
||||
The `AppComponent` that we've been talking about acts as the top
|
||||
level container - the root of the tree - for the rest of our application.
|
||||
There's nothing special about the `AppComponent` name and we can use whatever makes sense to us.
|
||||
|
||||
We've pinned the root component to an element in the `index.html` file where our application will
|
||||
render its view. The element is called `<my-app>` but there is nothing special about this
|
||||
name either.
|
||||
|
||||
The *root component* loads the initial template for the application.
|
||||
That template could load other components such as menu bars, views, and forms
|
||||
that display information and respond to user gestures.
|
||||
|
||||
And these components could load yet more components until the browser page became a deep tree
|
||||
of nested functionality.
|
||||
|
||||
We'll walk through examples of these scenarios in the following pages.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
- var number = 1;
|
||||
ul.is-plain.l-offset-page-header
|
||||
for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
|
||||
|
||||
if slug != '_listtype' && slug != 'index'
|
||||
- var url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
|
||||
- var num = number++
|
||||
|
||||
li
|
||||
!= partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
.l-main-section
|
||||
|
||||
h2#section-its-all-a-tree It's all a tree
|
||||
|
||||
p.
|
||||
As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create
|
||||
a top-level component. You add child components to a parent component by using them in the parent component's
|
||||
template.
|
||||
p.
|
||||
Given a bootstrapping template with a <code><parent></code> tag in the body, you can create a parent
|
||||
component that uses a <code><child></code> component like so:
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
@Component({
|
||||
selector: 'parent'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<h1>{{ message }}</h1>
|
||||
<child></child>
|
||||
`,
|
||||
directives: [ChildComponent]
|
||||
})
|
||||
class ParentComponent {
|
||||
message: string;
|
||||
|
||||
constructor() {
|
||||
this.message = "I'm the parent";
|
||||
}
|
||||
}
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function ParentComponent() {
|
||||
this.message = "I'm the parent";
|
||||
}
|
||||
ParentComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "parent"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template:
|
||||
'<h1>{{ message }}</h1>' +
|
||||
'<child></child>',
|
||||
directives: [ChildComponent]
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
p You then just need to write the <code>ChildComponent</code> class to make it work:
|
||||
|
||||
code-tabs
|
||||
code-pane(language="javascript" name="TypeScript" format="linenums").
|
||||
//TypeScript
|
||||
@Component({
|
||||
selector: 'child'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<p> {{ message }} </p>
|
||||
`
|
||||
})
|
||||
class ChildComponent {
|
||||
message: string;
|
||||
constructor() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
}
|
||||
code-pane(language="javascript" name="ES5" format="linenums").
|
||||
//ES5
|
||||
function ChildComponent() {
|
||||
this.message = "I'm the child";
|
||||
}
|
||||
ChildComponent.annotations = [
|
||||
new angular.ComponentAnnotation({
|
||||
selector: "child"
|
||||
}),
|
||||
new angular.ViewAnnotation({
|
||||
template: '<p> {{ message }} </p>'
|
||||
})
|
||||
];
|
||||
|
||||
|
||||
p.
|
||||
Notice that in addition to using the <code><child></code> element in the parent template, you also need to
|
||||
add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue