From 50e758ba6028a6b044dd80d8f1640c70be9fa9d8 Mon Sep 17 00:00:00 2001 From: Jay Traband Date: Sat, 8 Aug 2015 13:55:53 -0700 Subject: [PATCH] improved infrastructure for devguide and revised getting started (TS) --- README.md | 9 +- gulpfile.js | 198 +- package.json | 5 +- public/_includes/_util-fns.jade | 75 +- public/_includes/_version-dropdown.jade | 7 + public/doc-shredder/_test/gulpfile.js | 6 +- public/doc-shredder/doc-shredder.js | 17 +- public/doc-shredder/extractPathsReader.js | 2 +- public/doc-shredder/shredMapProcessor.js | 47 +- public/docs/_examples/.gitignore | 2 + .../docs/_examples/gettingstarted/e2e-spec.js | 27 + .../docs/_examples/gettingstarted/js/app.js | 46 + .../_examples/gettingstarted/js/index.html | 4 +- .../docs/_examples/gettingstarted/js/main.js | 17 - .../gettingstarted/protractor-spec.js | 20 - .../gettingstarted/ts/{main.js => app.js} | 8 +- .../gettingstarted/ts/{main.ts => app.ts} | 11 +- .../_examples/gettingstarted/ts/dummy.spec.js | 9 + .../_examples/gettingstarted/ts/index.html | 4 +- .../_examples/gettingstarted/ts/main.js.map | 1 - public/docs/_examples/jsconfig.json | 6 + public/docs/_examples/karma.conf.js | 73 + public/docs/_examples/karma.js.conf.js | 6 +- public/docs/_examples/karma.ts.conf.js | 8 +- public/docs/_examples/protractor-conf.js | 5 +- public/docs/_examples/quickstart/app.js.map | 2 +- .../{protractor-spec.js => e2e-spec.js} | 5 +- public/docs/_examples/quickstart/index.html | 2 +- public/docs/_examples/styleguide/e2e-spec.js | 27 + public/docs/_examples/styleguide/js/app.js | 46 + .../docs/_examples/styleguide/js/index.html | 11 + public/docs/_examples/styleguide/js/spec.js | 8 + public/docs/_examples/styleguide/ts/app.js | 37 + public/docs/_examples/styleguide/ts/app.ts | 21 + .../_examples/styleguide/ts/dummy.spec.js | 9 + .../docs/_examples/styleguide/ts/index.html | 15 + public/docs/_examples/tsd.json | 24 + .../_examples/typings/angular2/angular2.d.ts | 6137 ----------------- .../typings/es6-promise/es6-promise.d.ts | 73 - public/docs/_examples/typings/rx/rx-lite.d.ts | 647 -- public/docs/_examples/typings/rx/rx.d.ts | 67 - .../gettingstarted/e2e-spec-shared.js.md | 14 + ...in-bootstrap.js.md => app-bootstrap.js.md} | 2 +- .../js/app-class-w-annotations.js.md | 13 + .../gettingstarted/js/app-class.js.md | 5 + .../gettingstarted/js/app-component.js.md | 5 + .../gettingstarted/js/app-no-dsl.js.md | 12 + .../gettingstarted/js/app-view.js.md | 5 + .../_fragments/gettingstarted/js/app.js.md | 17 + .../gettingstarted/js/index.html.md | 4 +- .../_fragments/gettingstarted/js/main.js.md | 17 - .../protractor-spec-javascript.js.md | 5 - .../protractor-spec-typescript.js.md | 5 - ...in-bootstrap.js.md => app-bootstrap.js.md} | 0 ...in-bootstrap.ts.md => app-bootstrap.ts.md} | 0 .../ts/app-class-w-annotations.js.md | 16 + .../ts/app-class-w-annotations.ts.md | 10 + .../gettingstarted/ts/app-class.ts.md | 3 + .../{main-import.js.md => app-import.js.md} | 0 .../{main-import.ts.md => app-import.ts.md} | 0 .../ts/{main.js.md => app.js.md} | 5 +- .../ts/{main.ts.md => app.ts.md} | 6 +- .../gettingstarted/ts/index.html.md | 4 +- ...or-spec-test.js.md => e2e-spec-test.js.md} | 0 .../{index-foo.html.md => index-head.html.md} | 0 .../styleguide/e2e-spec-shared.js.md | 14 + .../styleguide/js/app-bootstrap.js.md | 5 + .../js/app-class-w-annotations.js.md | 13 + .../_fragments/styleguide/js/app-class.js.md | 5 + .../styleguide/js/app-component.js.md | 5 + .../_fragments/styleguide/js/app-no-dsl.js.md | 12 + .../_fragments/styleguide/js/app-view.js.md | 5 + .../docs/_fragments/styleguide/js/app.js.md | 17 + .../_fragments/styleguide/js/index.html.md | 13 + .../docs/_fragments/styleguide/js/spec.js.md | 9 + .../styleguide/ts/app-bootstrap.js.md | 3 + .../styleguide/ts/app-bootstrap.ts.md | 3 + .../ts/app-class-w-annotations.js.md | 16 + .../ts/app-class-w-annotations.ts.md | 10 + .../_fragments/styleguide/ts/app-class.ts.md | 3 + .../_fragments/styleguide/ts/app-import.js.md | 3 + .../_fragments/styleguide/ts/app-import.ts.md | 3 + .../docs/_fragments/styleguide/ts/app.js.md | 18 + .../docs/_fragments/styleguide/ts/app.ts.md | 14 + .../_fragments/styleguide/ts/index.html.md | 17 + .../_includes/styleguide/_code-examples.jade | 262 +- .../styleguide/_code-examples.old.jade | 101 + public/docs/js/latest/_util-fns.jade | 1 + public/docs/js/latest/guide/_data.json | 2 +- .../docs/js/latest/guide/gettingStarted.jade | 130 + public/docs/js/latest/guide/setupAlt.jade | 14 +- public/docs/ts/latest/_data.json | 35 + public/docs/ts/latest/guide/_data.json | 26 + .../docs/ts/latest/guide/displaying-data.jade | 347 + .../docs/ts/latest/guide/gettingStarted.jade | 266 + public/docs/ts/latest/guide/index.jade | 10 + .../ts/latest/guide/making-components.jade | 87 + .../ts/latest/guide/reusing-components.jade | 0 .../latest/guide/talking-to-components.jade | 0 .../ts/latest/guide/transforming-data.jade | 0 public/docs/ts/latest/guide/user-input.jade | 185 + public/docs/ts/latest/guide/using-forms.jade | 0 public/docs/ts/latest/help.jade | 1 + public/docs/ts/latest/index.jade | 30 + public/docs/ts/latest/quickstart.jade | 260 + public/docs/ts/latest/resources.jade | 39 + public/docs/xref-frag-to-jade.html | 80 +- public/docs/xref-jade-to-frag.html | 13 +- public/docs/xref-jade.json | 58 +- 109 files changed, 2886 insertions(+), 7141 deletions(-) create mode 100644 public/docs/_examples/.gitignore create mode 100644 public/docs/_examples/gettingstarted/e2e-spec.js create mode 100644 public/docs/_examples/gettingstarted/js/app.js delete mode 100644 public/docs/_examples/gettingstarted/js/main.js delete mode 100644 public/docs/_examples/gettingstarted/protractor-spec.js rename public/docs/_examples/gettingstarted/ts/{main.js => app.js} (87%) rename public/docs/_examples/gettingstarted/ts/{main.ts => app.ts} (55%) create mode 100644 public/docs/_examples/gettingstarted/ts/dummy.spec.js delete mode 100644 public/docs/_examples/gettingstarted/ts/main.js.map create mode 100644 public/docs/_examples/jsconfig.json create mode 100644 public/docs/_examples/karma.conf.js rename public/docs/_examples/quickstart/{protractor-spec.js => e2e-spec.js} (78%) create mode 100644 public/docs/_examples/styleguide/e2e-spec.js create mode 100644 public/docs/_examples/styleguide/js/app.js create mode 100644 public/docs/_examples/styleguide/js/index.html create mode 100644 public/docs/_examples/styleguide/js/spec.js create mode 100644 public/docs/_examples/styleguide/ts/app.js create mode 100644 public/docs/_examples/styleguide/ts/app.ts create mode 100644 public/docs/_examples/styleguide/ts/dummy.spec.js create mode 100644 public/docs/_examples/styleguide/ts/index.html create mode 100644 public/docs/_examples/tsd.json delete mode 100644 public/docs/_examples/typings/angular2/angular2.d.ts delete mode 100644 public/docs/_examples/typings/es6-promise/es6-promise.d.ts delete mode 100644 public/docs/_examples/typings/rx/rx-lite.d.ts delete mode 100644 public/docs/_examples/typings/rx/rx.d.ts create mode 100644 public/docs/_fragments/gettingstarted/e2e-spec-shared.js.md rename public/docs/_fragments/gettingstarted/js/{main-bootstrap.js.md => app-bootstrap.js.md} (66%) create mode 100644 public/docs/_fragments/gettingstarted/js/app-class-w-annotations.js.md create mode 100644 public/docs/_fragments/gettingstarted/js/app-class.js.md create mode 100644 public/docs/_fragments/gettingstarted/js/app-component.js.md create mode 100644 public/docs/_fragments/gettingstarted/js/app-no-dsl.js.md create mode 100644 public/docs/_fragments/gettingstarted/js/app-view.js.md create mode 100644 public/docs/_fragments/gettingstarted/js/app.js.md delete mode 100644 public/docs/_fragments/gettingstarted/js/main.js.md delete mode 100644 public/docs/_fragments/gettingstarted/protractor-spec-javascript.js.md delete mode 100644 public/docs/_fragments/gettingstarted/protractor-spec-typescript.js.md rename public/docs/_fragments/gettingstarted/ts/{main-bootstrap.js.md => app-bootstrap.js.md} (100%) rename public/docs/_fragments/gettingstarted/ts/{main-bootstrap.ts.md => app-bootstrap.ts.md} (100%) create mode 100644 public/docs/_fragments/gettingstarted/ts/app-class-w-annotations.js.md create mode 100644 public/docs/_fragments/gettingstarted/ts/app-class-w-annotations.ts.md create mode 100644 public/docs/_fragments/gettingstarted/ts/app-class.ts.md rename public/docs/_fragments/gettingstarted/ts/{main-import.js.md => app-import.js.md} (100%) rename public/docs/_fragments/gettingstarted/ts/{main-import.ts.md => app-import.ts.md} (100%) rename public/docs/_fragments/gettingstarted/ts/{main.js.md => app.js.md} (73%) rename public/docs/_fragments/gettingstarted/ts/{main.ts.md => app.ts.md} (63%) rename public/docs/_fragments/quickstart/{protractor-spec-test.js.md => e2e-spec-test.js.md} (100%) rename public/docs/_fragments/quickstart/{index-foo.html.md => index-head.html.md} (100%) create mode 100644 public/docs/_fragments/styleguide/e2e-spec-shared.js.md create mode 100644 public/docs/_fragments/styleguide/js/app-bootstrap.js.md create mode 100644 public/docs/_fragments/styleguide/js/app-class-w-annotations.js.md create mode 100644 public/docs/_fragments/styleguide/js/app-class.js.md create mode 100644 public/docs/_fragments/styleguide/js/app-component.js.md create mode 100644 public/docs/_fragments/styleguide/js/app-no-dsl.js.md create mode 100644 public/docs/_fragments/styleguide/js/app-view.js.md create mode 100644 public/docs/_fragments/styleguide/js/app.js.md create mode 100644 public/docs/_fragments/styleguide/js/index.html.md create mode 100644 public/docs/_fragments/styleguide/js/spec.js.md create mode 100644 public/docs/_fragments/styleguide/ts/app-bootstrap.js.md create mode 100644 public/docs/_fragments/styleguide/ts/app-bootstrap.ts.md create mode 100644 public/docs/_fragments/styleguide/ts/app-class-w-annotations.js.md create mode 100644 public/docs/_fragments/styleguide/ts/app-class-w-annotations.ts.md create mode 100644 public/docs/_fragments/styleguide/ts/app-class.ts.md create mode 100644 public/docs/_fragments/styleguide/ts/app-import.js.md create mode 100644 public/docs/_fragments/styleguide/ts/app-import.ts.md create mode 100644 public/docs/_fragments/styleguide/ts/app.js.md create mode 100644 public/docs/_fragments/styleguide/ts/app.ts.md create mode 100644 public/docs/_fragments/styleguide/ts/index.html.md create mode 100644 public/docs/_includes/styleguide/_code-examples.old.jade create mode 100644 public/docs/js/latest/_util-fns.jade create mode 100644 public/docs/js/latest/guide/gettingStarted.jade create mode 100644 public/docs/ts/latest/_data.json create mode 100644 public/docs/ts/latest/guide/_data.json create mode 100644 public/docs/ts/latest/guide/displaying-data.jade create mode 100644 public/docs/ts/latest/guide/gettingStarted.jade create mode 100644 public/docs/ts/latest/guide/index.jade create mode 100644 public/docs/ts/latest/guide/making-components.jade create mode 100644 public/docs/ts/latest/guide/reusing-components.jade create mode 100644 public/docs/ts/latest/guide/talking-to-components.jade create mode 100644 public/docs/ts/latest/guide/transforming-data.jade create mode 100644 public/docs/ts/latest/guide/user-input.jade create mode 100644 public/docs/ts/latest/guide/using-forms.jade create mode 100644 public/docs/ts/latest/help.jade create mode 100644 public/docs/ts/latest/index.jade create mode 100644 public/docs/ts/latest/quickstart.jade create mode 100644 public/docs/ts/latest/resources.jade diff --git a/README.md b/README.md index 30bf88cc28..247c71834e 100644 --- a/README.md +++ b/README.md @@ -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/` @@ -35,4 +36,4 @@ Angular.io is currently the preview site for Angular 2. This site also includes ## License -Powered by Google ©2010-2015. Code licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/). +Powered by Google ©2010-2015. Code licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/). \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 1b1c83745b..9e44af86d6 100644 --- a/gulpfile.js +++ b/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']); \ No newline at end of file +gulp.task('default', taskListing); \ No newline at end of file diff --git a/package.json b/package.json index ae266ef4ad..258706315f 100644 --- a/package.json +++ b/package.json @@ -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 " diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade index f24f3f891f..e2ba55cb44 100644 --- a/public/_includes/_util-fns.jade +++ b/public/_includes/_util-fns.jade @@ -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
.....
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 = '' + match + ''; +- 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 currentPath = current.path; +- 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) diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index ac8cb01e16..907f009656 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -26,6 +26,12 @@ mixin tree(directory, urlPrefix, name, latest) +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 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 diff --git a/public/doc-shredder/_test/gulpfile.js b/public/doc-shredder/_test/gulpfile.js index 1705237c1e..8a8d0e2f84 100644 --- a/public/doc-shredder/_test/gulpfile.js +++ b/public/doc-shredder/_test/gulpfile.js @@ -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); diff --git a/public/doc-shredder/doc-shredder.js b/public/doc-shredder/doc-shredder.js index 3036cd4c60..904fc2f59c 100644 --- a/public/doc-shredder/doc-shredder.js +++ b/public/doc-shredder/doc-shredder.js @@ -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) { - // Specify where the writeFilesProcessor will write our generated doc files - writeFilesProcessor.outputFolder = options.outputDir; + .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; } diff --git a/public/doc-shredder/extractPathsReader.js b/public/doc-shredder/extractPathsReader.js index 410f2474de..b4f9efe73a 100644 --- a/public/doc-shredder/extractPathsReader.js +++ b/public/doc-shredder/extractPathsReader.js @@ -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', diff --git a/public/doc-shredder/shredMapProcessor.js b/public/doc-shredder/shredMapProcessor.js index 921d6ef75f..29d3165d96 100644 --- a/public/doc-shredder/shredMapProcessor.js +++ b/public/doc-shredder/shredMapProcessor.js @@ -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 newDocs = [{ - docType: 'xref-jade.html', - basePath: this.options.basePath, - jadeToFragMap: jadeToFragMap, - outputPath: 'xref-jade-to-frag.html' - }, { - docType: 'xref-frag.html', - basePath: this.options.basePath, - fragToJadeMap: fragToJadeMap, - outputPath: 'xref-frag-to-jade.html' - }, { - docType: 'xref-doc.json', - json: JSON.stringify({ - basePath: this.options.basePath, + 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: basePath, jadeToFragMap: jadeToFragMap, - }, null, 2), - outputPath: 'xref-jade.json' - }] - return newDocs; + outputPath: 'xref-jade-to-frag.html' + }, { + docType: 'xref-frag.html', + basePath: basePath, + fragToJadeMap: fragToJadeMap, + outputPath: 'xref-frag-to-jade.html' + }]; + return newDocs; + } } - }; + } }; function getExampleName(fragPath) { diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore new file mode 100644 index 0000000000..288b9aca3a --- /dev/null +++ b/public/docs/_examples/.gitignore @@ -0,0 +1,2 @@ +typings +*.js.map \ No newline at end of file diff --git a/public/docs/_examples/gettingstarted/e2e-spec.js b/public/docs/_examples/gettingstarted/e2e-spec.js new file mode 100644 index 0000000000..14edeb17ef --- /dev/null +++ b/public/docs/_examples/gettingstarted/e2e-spec.js @@ -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/'); + }); + +}); diff --git a/public/docs/_examples/gettingstarted/js/app.js b/public/docs/_examples/gettingstarted/js/app.js new file mode 100644 index 0000000000..a590cd7ed7 --- /dev/null +++ b/public/docs/_examples/gettingstarted/js/app.js @@ -0,0 +1,46 @@ +(function() { +// #docregion +// #docregion class-w-annotations +var AppComponent = ng + // #docregion component + .Component({ + selector: 'my-app' + }) + // #enddocregion + // #docregion view + .View({ + template: '

My First Angular 2 App

' + }) + // #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: '

My First Angular 2 App

' + }) +]; +// #enddocregion +})(); diff --git a/public/docs/_examples/gettingstarted/js/index.html b/public/docs/_examples/gettingstarted/js/index.html index 432b17eb52..38ac797d74 100644 --- a/public/docs/_examples/gettingstarted/js/index.html +++ b/public/docs/_examples/gettingstarted/js/index.html @@ -2,8 +2,8 @@ - - + + diff --git a/public/docs/_examples/gettingstarted/js/main.js b/public/docs/_examples/gettingstarted/js/main.js deleted file mode 100644 index b752be57b4..0000000000 --- a/public/docs/_examples/gettingstarted/js/main.js +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -function AppComponent() {} - -AppComponent.annotations = [ - new angular.ComponentAnnotation({ - selector: 'my-app' - }), - new angular.ViewAnnotation({ - template: '

My first Angular 2 App

' - }) -]; - -// #docregion bootstrap -document.addEventListener('DOMContentLoaded', function() { - angular.bootstrap(AppComponent); -}); -// #enddocregion \ No newline at end of file diff --git a/public/docs/_examples/gettingstarted/protractor-spec.js b/public/docs/_examples/gettingstarted/protractor-spec.js deleted file mode 100644 index 2a7633774e..0000000000 --- a/public/docs/_examples/gettingstarted/protractor-spec.js +++ /dev/null @@ -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'); - }); -}); - diff --git a/public/docs/_examples/gettingstarted/ts/main.js b/public/docs/_examples/gettingstarted/ts/app.js similarity index 87% rename from public/docs/_examples/gettingstarted/ts/main.js rename to public/docs/_examples/gettingstarted/ts/app.js index 77c82e8254..8a05c64c63 100644 --- a/public/docs/_examples/gettingstarted/ts/main.js +++ b/public/docs/_examples/gettingstarted/ts/app.js @@ -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: '

My first Angular 2 App

' + template: '

My First Angular 2 App

' }), __metadata('design:paramtypes', []) ], AppComponent); return AppComponent; })(); +// #enddocregion +// #enddocregion // #docregion bootstrap angular2_1.bootstrap(AppComponent); // #enddocregion -//# sourceMappingURL=main.js.map \ No newline at end of file +// #enddocregion +//# sourceMappingURL=app.js.map \ No newline at end of file diff --git a/public/docs/_examples/gettingstarted/ts/main.ts b/public/docs/_examples/gettingstarted/ts/app.ts similarity index 55% rename from public/docs/_examples/gettingstarted/ts/main.ts rename to public/docs/_examples/gettingstarted/ts/app.ts index 7cf1b4659a..1e6cd84e77 100644 --- a/public/docs/_examples/gettingstarted/ts/main.ts +++ b/public/docs/_examples/gettingstarted/ts/app.ts @@ -3,14 +3,19 @@ import {Component, View, bootstrap} from 'angular2/angular2'; // #enddocregion +// #docregion class-w-annotations @Component({ selector: 'my-app' }) @View({ - template: '

My first Angular 2 App

' + template: '

My First Angular 2 App

' }) -class AppComponent { -} +// #docregion class +class AppComponent { } +// #enddocregion +// #enddocregion + // #docregion bootstrap bootstrap(AppComponent); // #enddocregion +// #enddocregion \ No newline at end of file diff --git a/public/docs/_examples/gettingstarted/ts/dummy.spec.js b/public/docs/_examples/gettingstarted/ts/dummy.spec.js new file mode 100644 index 0000000000..83f3eaea94 --- /dev/null +++ b/public/docs/_examples/gettingstarted/ts/dummy.spec.js @@ -0,0 +1,9 @@ +describe("Jasmine sample test", function() { + + it("1+1 should be 2", function() { + + var result = 1 + 1; + + expect(result).toBe(2); + }); +}); \ No newline at end of file diff --git a/public/docs/_examples/gettingstarted/ts/index.html b/public/docs/_examples/gettingstarted/ts/index.html index b44d34d016..7a5acc493d 100644 --- a/public/docs/_examples/gettingstarted/ts/index.html +++ b/public/docs/_examples/gettingstarted/ts/index.html @@ -4,12 +4,12 @@ - + diff --git a/public/docs/_examples/gettingstarted/ts/main.js.map b/public/docs/_examples/gettingstarted/ts/main.js.map deleted file mode 100644 index a03477dbb1..0000000000 --- a/public/docs/_examples/gettingstarted/ts/main.js.map +++ /dev/null @@ -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"} \ No newline at end of file diff --git a/public/docs/_examples/jsconfig.json b/public/docs/_examples/jsconfig.json new file mode 100644 index 0000000000..b3a1252357 --- /dev/null +++ b/public/docs/_examples/jsconfig.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "target": "ES5", + "module": "commonjs" + } +} \ No newline at end of file diff --git a/public/docs/_examples/karma.conf.js b/public/docs/_examples/karma.conf.js new file mode 100644 index 0000000000..44ec4e73af --- /dev/null +++ b/public/docs/_examples/karma.conf.js @@ -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 + }) +} diff --git a/public/docs/_examples/karma.js.conf.js b/public/docs/_examples/karma.js.conf.js index ce88bf9f0f..e55127f0f0 100644 --- a/public/docs/_examples/karma.js.conf.js +++ b/public/docs/_examples/karma.js.conf.js @@ -15,15 +15,15 @@ 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', ], // list of files to exclude exclude: [ - '**/protractor-spec.js' + '**/*.e2e-spec.js' ], diff --git a/public/docs/_examples/karma.ts.conf.js b/public/docs/_examples/karma.ts.conf.js index 08ed5b8fd3..5b2d176b56 100644 --- a/public/docs/_examples/karma.ts.conf.js +++ b/public/docs/_examples/karma.ts.conf.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 }, - - '**/ts/*.js', + { pattern: 'https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js', watched: false }, + + '**/ts/**/*.spec.js' ], // list of files to exclude exclude: [ - '**/protractor-spec.js' + '**/*.e2e-spec.js' ], diff --git a/public/docs/_examples/protractor-conf.js b/public/docs/_examples/protractor-conf.js index d341244fa6..6a183ce67b 100644 --- a/public/docs/_examples/protractor-conf.js +++ b/public/docs/_examples/protractor-conf.js @@ -1,12 +1,11 @@ exports.config = { onPrepare: function() { - patchProtractorWait(browser); + patchProtractorWait(browser); }, seleniumAddress: 'http://localhost:4444/wd/hub', baseUrl: 'http://localhost:8080/', specs: [ - 'quickstart/protractor-spec.js', - 'gettingstarted/protractor-spec.js' + '**/*e2e-spec.js' ] }; diff --git a/public/docs/_examples/quickstart/app.js.map b/public/docs/_examples/quickstart/app.js.map index 879e6ea4cd..f3c17e785b 100644 --- a/public/docs/_examples/quickstart/app.js.map +++ b/public/docs/_examples/quickstart/app.js.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/public/docs/_examples/quickstart/protractor-spec.js b/public/docs/_examples/quickstart/e2e-spec.js similarity index 78% rename from public/docs/_examples/quickstart/protractor-spec.js rename to public/docs/_examples/quickstart/e2e-spec.js index 4d6e58fedd..a866771ab6 100644 --- a/public/docs/_examples/quickstart/protractor-spec.js +++ b/public/docs/_examples/quickstart/e2e-spec.js @@ -1,9 +1,8 @@ -// protractor-spec.js describe('Protractor quick start test', function() { beforeEach(function() { - browser.get('quickstart/index.html'); + browser.get('quickstart/index.html'); }); - + // #docregion test it('should display Alice', function() { expect(element(by.id('output')).getText()).toEqual('Hello Alice'); diff --git a/public/docs/_examples/quickstart/index.html b/public/docs/_examples/quickstart/index.html index 9cb6fd586b..9beede59ac 100644 --- a/public/docs/_examples/quickstart/index.html +++ b/public/docs/_examples/quickstart/index.html @@ -1,7 +1,7 @@ - + Angular 2 Quickstart diff --git a/public/docs/_examples/styleguide/e2e-spec.js b/public/docs/_examples/styleguide/e2e-spec.js new file mode 100644 index 0000000000..14edeb17ef --- /dev/null +++ b/public/docs/_examples/styleguide/e2e-spec.js @@ -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/'); + }); + +}); diff --git a/public/docs/_examples/styleguide/js/app.js b/public/docs/_examples/styleguide/js/app.js new file mode 100644 index 0000000000..a590cd7ed7 --- /dev/null +++ b/public/docs/_examples/styleguide/js/app.js @@ -0,0 +1,46 @@ +(function() { +// #docregion +// #docregion class-w-annotations +var AppComponent = ng + // #docregion component + .Component({ + selector: 'my-app' + }) + // #enddocregion + // #docregion view + .View({ + template: '

My First Angular 2 App

' + }) + // #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: '

My First Angular 2 App

' + }) +]; +// #enddocregion +})(); diff --git a/public/docs/_examples/styleguide/js/index.html b/public/docs/_examples/styleguide/js/index.html new file mode 100644 index 0000000000..38ac797d74 --- /dev/null +++ b/public/docs/_examples/styleguide/js/index.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/docs/_examples/styleguide/js/spec.js b/public/docs/_examples/styleguide/js/spec.js new file mode 100644 index 0000000000..590ccc5dc4 --- /dev/null +++ b/public/docs/_examples/styleguide/js/spec.js @@ -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); + }); +}); \ No newline at end of file diff --git a/public/docs/_examples/styleguide/ts/app.js b/public/docs/_examples/styleguide/ts/app.js new file mode 100644 index 0000000000..8a05c64c63 --- /dev/null +++ b/public/docs/_examples/styleguide/ts/app.js @@ -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: '

My First Angular 2 App

' + }), + __metadata('design:paramtypes', []) + ], AppComponent); + return AppComponent; +})(); +// #enddocregion +// #enddocregion +// #docregion bootstrap +angular2_1.bootstrap(AppComponent); +// #enddocregion +// #enddocregion +//# sourceMappingURL=app.js.map \ No newline at end of file diff --git a/public/docs/_examples/styleguide/ts/app.ts b/public/docs/_examples/styleguide/ts/app.ts new file mode 100644 index 0000000000..1e6cd84e77 --- /dev/null +++ b/public/docs/_examples/styleguide/ts/app.ts @@ -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: '

My First Angular 2 App

' +}) +// #docregion class +class AppComponent { } +// #enddocregion +// #enddocregion + +// #docregion bootstrap +bootstrap(AppComponent); +// #enddocregion +// #enddocregion \ No newline at end of file diff --git a/public/docs/_examples/styleguide/ts/dummy.spec.js b/public/docs/_examples/styleguide/ts/dummy.spec.js new file mode 100644 index 0000000000..83f3eaea94 --- /dev/null +++ b/public/docs/_examples/styleguide/ts/dummy.spec.js @@ -0,0 +1,9 @@ +describe("Jasmine sample test", function() { + + it("1+1 should be 2", function() { + + var result = 1 + 1; + + expect(result).toBe(2); + }); +}); \ No newline at end of file diff --git a/public/docs/_examples/styleguide/ts/index.html b/public/docs/_examples/styleguide/ts/index.html new file mode 100644 index 0000000000..7a5acc493d --- /dev/null +++ b/public/docs/_examples/styleguide/ts/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + diff --git a/public/docs/_examples/tsd.json b/public/docs/_examples/tsd.json new file mode 100644 index 0000000000..3467a9bc25 --- /dev/null +++ b/public/docs/_examples/tsd.json @@ -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" + } + } +} diff --git a/public/docs/_examples/typings/angular2/angular2.d.ts b/public/docs/_examples/typings/angular2/angular2.d.ts deleted file mode 100644 index dfad7d3494..0000000000 --- a/public/docs/_examples/typings/angular2/angular2.d.ts +++ /dev/null @@ -1,6137 +0,0 @@ -// Type definitions for Angular v2.0.0-alpha.31 -// Project: http://angular.io/ -// Definitions by: angular team -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -// *********************************************************** -// This file is generated by the Angular build process. -// Please do not create manual edits or send pull requests -// modifying this file. -// *********************************************************** - -// Angular depends transitively on these libraries. -// If you don't have them installed you can run -// $ tsd query es6-promise rx rx-lite --action install --save -/// -/// - -interface List extends Array {} -interface Map {} -interface StringMap extends Map {} - -declare module ng { - type SetterFn = typeof Function; - type int = number; - interface Type extends Function { - new (...args:any[]):any; - } - - // See https://github.com/Microsoft/TypeScript/issues/1168 - class BaseException /* extends Error */ { - message: string; - stack: string; - toString(): string; - } - interface InjectableReference {} -} - - - - -/** - * The `angular2` is the single place to import all of the individual types. - */ -declare module ng { - class DehydratedException extends BaseException { - } - - class ExpressionChangedAfterItHasBeenChecked extends BaseException { - } - - class ChangeDetectionError extends BaseException { - - location: string; - } - - - /** - * ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration. - */ - var ON_PUSH:any; - - - /** - * DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration. - */ - var DEFAULT:any; - - - /** - * Controls change detection. - * - * {@link ChangeDetectorRef} allows requesting checks for detectors that rely on observables. It - * also allows detaching and - * attaching change detector subtrees. - */ - class ChangeDetectorRef { - - - /** - * Request to check all ON_PUSH ancestors. - */ - requestCheck(): void; - - - /** - * Detaches the change detector from the change detector tree. - * - * The detached change detector will not be checked until it is reattached. - */ - detach(): void; - - - /** - * Reattach the change detector to the change detector tree. - * - * This also requests a check of this change detector. This reattached change detector will be - * checked during the - * next change detection run. - */ - reattach(): void; - } - - class Pipes { - - - /** - * Map of {@link Pipe} names to {@link PipeFactory} lists used to configure the - * {@link Pipes} registry. - * - * #Example - * - * ``` - * var pipesConfig = { - * 'json': [jsonPipeFactory] - * } - * @Component({ - * viewInjector: [ - * bind(Pipes).toValue(new Pipes(pipesConfig)) - * ] - * }) - * ``` - */ - config: StringMap; - - get(type: string, obj: any, cdRef?: ChangeDetectorRef, existingPipe?: Pipe): Pipe; - } - - - /** - * Indicates that the result of a {@link Pipe} transformation has changed even though the reference - * has not changed. - * - * The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored. - */ - class WrappedValue { - - wrapped: any; - } - - - /** - * An interface for extending the list of pipes known to Angular. - * - * If you are writing a custom {@link Pipe}, you must extend this interface. - * - * #Example - * - * ``` - * class DoublePipe implements Pipe { - * supports(obj) { - * return true; - * } - * - * onDestroy() {} - * - * transform(value, args = []) { - * return `${value}${value}`; - * } - * } - * ``` - */ - interface Pipe { - - supports(obj: any): boolean; - - onDestroy(): void; - - transform(value: any, args: List): any; - } - - interface PipeFactory { - - supports(obs: any): boolean; - - create(cdRef: ChangeDetectorRef): Pipe; - } - - class NullPipe extends BasePipe { - - called: boolean; - - supports(obj: any): boolean; - - transform(value: any, args?: List): WrappedValue; - } - - class NullPipeFactory implements PipeFactory { - - supports(obj: any): boolean; - - create(cdRef: ChangeDetectorRef): Pipe; - } - - var defaultPipes : Pipes ; - - - /** - * Provides default implementation of supports and onDestroy. - * - * #Example - * - * ``` - * class DoublePipe extends BasePipe {* - * transform(value) { - * return `${value}${value}`; - * } - * } - * ``` - */ - class BasePipe implements Pipe { - - supports(obj: any): boolean; - - onDestroy(): void; - - transform(value: any, args: List): any; - } - - class Locals { - - parent: Locals; - - current: Map; - - contains(name: string): boolean; - - get(name: string): any; - - set(name: string, value: any): void; - - clearValues(): void; - } - - - interface AbstractControl_onlySelfArgs { - onlySelf?: boolean; - } - - interface AbstractControl_updateValueAndValidityArgs { - onlySelf?: boolean; - emitEvent?: boolean; - } - - /** - * Omitting from external API doc as this is really an abstract internal concept. - */ - class AbstractControl { - - validator: Function; - - value: any; - - status: string; - - valid: boolean; - - errors: StringMap; - - pristine: boolean; - - dirty: boolean; - - touched: boolean; - - untouched: boolean; - - valueChanges: Observable; - - markAsTouched(): void; - - markAsDirty(args?:AbstractControl_onlySelfArgs): void; - - setParent(parent: any): void; - - updateValidity(args?:AbstractControl_onlySelfArgs): void; - - updateValueAndValidity(args?:AbstractControl_updateValueAndValidityArgs): void; - - find(path: List| string): AbstractControl; - - getError(errorCode: string, path?: List): any; - - hasError(errorCode: string, path?: List): boolean; - } - - class AbstractControlDirective { - - control: AbstractControl; - - value: any; - - valid: boolean; - - errors: StringMap; - - pristine: boolean; - - dirty: boolean; - - touched: boolean; - - untouched: boolean; - } - - - interface Control_updateValueOptions { - onlySelf?: boolean; - emitEvent?: boolean; - } - /** - * Defines a part of a form that cannot be divided into other controls. - * - * `Control` is one of the three fundamental building blocks used to define forms in Angular, along - * with - * {@link ControlGroup} and {@link ControlArray}. - */ - class Control extends AbstractControl { - - updateValue(value: any, options?: Control_updateValueOptions): void; - - registerOnChange(fn: Function): void; - } - - - /** - * Defines a part of a form, of fixed length, that can contain other controls. - * - * A ControlGroup aggregates the values and errors of each {@link Control} in the group. Thus, if - * one of the controls - * in a group is invalid, the entire group is invalid. Similarly, if a control changes its value, - * the entire group - * changes as well. - * - * `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular, - * along with - * {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other controls, - * but is of variable - * length. - */ - class ControlGroup extends AbstractControl { - - controls: StringMap; - - addControl(name: string, c: AbstractControl): void; - - removeControl(name: string): void; - - include(controlName: string): void; - - exclude(controlName: string): void; - - contains(controlName: string): boolean; - } - - - /** - * Defines a part of a form, of variable length, that can contain other controls. - * - * A `ControlArray` aggregates the values and errors of each {@link Control} in the group. Thus, if - * one of the controls - * in a group is invalid, the entire group is invalid. Similarly, if a control changes its value, - * the entire group - * changes as well. - * - * `ControlArray` is one of the three fundamental building blocks used to define forms in Angular, - * along with {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain - * other controls, but is of fixed length. - */ - class ControlArray extends AbstractControl { - - controls: List; - - at(index: number): AbstractControl; - - push(control: AbstractControl): void; - - insert(index: number, control: AbstractControl): void; - - removeAt(index: number): void; - - length: number; - } - - - /** - * Creates and binds a control with a specified name to a DOM element. - * - * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}. - * - * # Example - * - * In this example, we create the login and password controls. - * We can work with each control separately: check its validity, get its value, listen to its - * changes. - * - * ``` - * @Component({selector: "login-comp"}) - * @View({ - * directives: [formDirectives], - * template: ` - *
- * Login - *
Login is invalid
- * - * Password - * - * - *
- * `}) - * class LoginComp { - * onLogIn(value) { - * // value === {login: 'some login', password: 'some password'} - * } - * } - * ``` - * - * We can also use ng-model to bind a domain model to the form. - * - * ``` - * @Component({selector: "login-comp"}) - * @View({ - * directives: [formDirectives], - * template: ` - *
- * Login - * Password - * - *
- * `}) - * class LoginComp { - * credentials: {login:string, password:string}; - * - * onLogIn() { - * // this.credentials.login === "some login" - * // this.credentials.password === "some password" - * } - * } - * ``` - */ - class NgControlName extends NgControl { - - update: void; - - model: any; - - ngValidators: QueryList; - - onChange(c: StringMap): void; - - onDestroy(): void; - - viewToModelUpdate(newValue: any): void; - - path: List; - - formDirective: any; - - control: Control; - - validator: Function; - } - - - /** - * Binds an existing control to a DOM element. - * - * # Example - * - * In this example, we bind the control to an input element. When the value of the input element - * changes, the value of - * the control will reflect that change. Likewise, if the value of the control changes, the input - * element reflects that - * change. - * - * ``` - * @Component({selector: "login-comp"}) - * @View({ - * directives: [formDirectives], - * template: "" - * }) - * class LoginComp { - * loginControl:Control; - * - * constructor() { - * this.loginControl = new Control(''); - * } - * } - * - * ``` - * - * We can also use ng-model to bind a domain model to the form. - * - * ``` - * @Component({selector: "login-comp"}) - * @View({ - * directives: [formDirectives], - * template: "" - * }) - * class LoginComp { - * loginControl:Control; - * login:string; - * - * constructor() { - * this.loginControl = new Control(''); - * } - * } - * ``` - */ - class NgFormControl extends NgControl { - - form: Control; - - update: void; - - model: any; - - ngValidators: QueryList; - - onChange(c: any): void; - - path: List; - - control: Control; - - validator: Function; - - viewToModelUpdate(newValue: any): void; - } - - - /** - * Binds a domain model to the form. - * - * # Example - * ``` - * @Component({selector: "search-comp"}) - * @View({ - * directives: [formDirectives], - * template: ` - * - * `}) - * class SearchComp { - * searchQuery: string; - * } - * ``` - */ - class NgModel extends NgControl { - - update: void; - - model: any; - - ngValidators: QueryList; - - onChange(c: any): void; - - control: Control; - - path: List; - - validator: Function; - - viewToModelUpdate(newValue: any): void; - } - - - /** - * An abstract class that all control directive extend. - * - * It binds a {@link Control} object to a DOM element. - */ - class NgControl extends AbstractControlDirective { - - name: string; - - valueAccessor: ControlValueAccessor; - - validator: Function; - - path: List; - - viewToModelUpdate(newValue: any): void; - } - - - /** - * Creates and binds a control group to a DOM element. - * - * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}. - * - * # Example - * - * In this example, we create the credentials and personal control groups. - * We can work with each group separately: check its validity, get its value, listen to its changes. - * - * ``` - * @Component({selector: "signup-comp"}) - * @View({ - * directives: [formDirectives], - * template: ` - *
- *
- * Login - * Password - *
- *
Credentials are invalid
- * - *
- * Name - *
- * - *
- * `}) - * class SignupComp { - * onSignUp(value) { - * // value === {personal: {name: 'some name'}, - * // credentials: {login: 'some login', password: 'some password'}} - * } - * } - * - * ``` - */ - class NgControlGroup extends ControlContainer { - - onInit(): void; - - onDestroy(): void; - - control: ControlGroup; - - path: List; - - formDirective: Form; - } - - - /** - * Binds an existing control group to a DOM element. - * - * # Example - * - * In this example, we bind the control group to the form element, and we bind the login and - * password controls to the - * login and password elements. - * - * ``` - * @Component({selector: "login-comp"}) - * @View({ - * directives: [formDirectives], - * template: "
" + - * "Login " + - * "Password " + - * "" + - * "
" - * }) - * class LoginComp { - * loginForm:ControlGroup; - * - * constructor() { - * this.loginForm = new ControlGroup({ - * login: new Control(""), - * password: new Control("") - * }); - * } - * - * onLogin() { - * // this.loginForm.value - * } - * } - * - * ``` - * - * We can also use ng-model to bind a domain model to the form. - * - * ``` - * @Component({selector: "login-comp"}) - * @View({ - * directives: [formDirectives], - * template: "
" + - * "Login " + - * "Password " + - * "" + - * "
" - * }) - * class LoginComp { - * credentials:{login:string, password:string} - * loginForm:ControlGroup; - * - * constructor() { - * this.loginForm = new ControlGroup({ - * login: new Control(""), - * password: new Control("") - * }); - * } - * - * onLogin() { - * // this.credentials.login === 'some login' - * // this.credentials.password === 'some password' - * } - * } - * ``` - */ - class NgFormModel extends ControlContainer implements Form { - - form: ControlGroup; - - directives: List; - - ngSubmit: void; - - onChange(_: any): void; - - formDirective: Form; - - control: ControlGroup; - - path: List; - - addControl(dir: NgControl): void; - - getControl(dir: NgControl): Control; - - removeControl(dir: NgControl): void; - - addControlGroup(dir: NgControlGroup): void; - - removeControlGroup(dir: NgControlGroup): void; - - getControlGroup(dir: NgControlGroup): ControlGroup; - - updateModel(dir: NgControl, value: any): void; - - onSubmit(): boolean; - } - - - /** - * Creates and binds a form object to a DOM element. - * - * # Example - * - * ``` - * @Component({selector: "signup-comp"}) - * @View({ - * directives: [formDirectives], - * template: ` - *
- *
- * Login - * Password - *
- *
Credentials are invalid
- * - *
- * Name - *
- * - *
- * `}) - * class SignupComp { - * onSignUp(value) { - * // value === {personal: {name: 'some name'}, - * // credentials: {login: 'some login', password: 'some password'}} - * } - * } - * - * ``` - */ - class NgForm extends ControlContainer implements Form { - - form: ControlGroup; - - ngSubmit: void; - - formDirective: Form; - - control: ControlGroup; - - path: List; - - controls: StringMap; - - addControl(dir: NgControl): void; - - getControl(dir: NgControl): Control; - - removeControl(dir: NgControl): void; - - addControlGroup(dir: NgControlGroup): void; - - removeControlGroup(dir: NgControlGroup): void; - - getControlGroup(dir: NgControlGroup): ControlGroup; - - updateModel(dir: NgControl, value: any): void; - - onSubmit(): boolean; - } - - - /** - * A bridge between a control and a native element. - * - * Please see {@link DefaultValueAccessor} for more information. - */ - interface ControlValueAccessor { - - writeValue(obj: any): void; - - registerOnChange(fn: any): void; - - registerOnTouched(fn: any): void; - } - - - /** - * The default accessor for writing a value and listening to changes that is used by the - * {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives. - * - * # Example - * ``` - * - * ``` - */ - class DefaultValueAccessor implements ControlValueAccessor { - - value: string; - - onChange: void; - - onTouched: void; - - cd: NgControl; - - renderer: Renderer; - - elementRef: ElementRef; - - writeValue(value: any): void; - - ngClassUntouched: boolean; - - ngClassTouched: boolean; - - ngClassPristine: boolean; - - ngClassDirty: boolean; - - ngClassValid: boolean; - - ngClassInvalid: boolean; - - registerOnChange(fn: any): void; - - registerOnTouched(fn: any): void; - } - - - /** - * The accessor for writing a value and listening to changes on a checkbox input element. - * - * # Example - * ``` - * - * ``` - */ - class CheckboxControlValueAccessor implements ControlValueAccessor { - - checked: boolean; - - onChange: void; - - onTouched: void; - - cd: NgControl; - - renderer: Renderer; - - elementRef: ElementRef; - - writeValue(value: any): void; - - ngClassUntouched: boolean; - - ngClassTouched: boolean; - - ngClassPristine: boolean; - - ngClassDirty: boolean; - - ngClassValid: boolean; - - ngClassInvalid: boolean; - - registerOnChange(fn: any): void; - - registerOnTouched(fn: any): void; - } - - - /** - * The accessor for writing a value and listening to changes on a select element. - */ - class SelectControlValueAccessor implements ControlValueAccessor { - - value: void; - - onChange: void; - - onTouched: void; - - cd: NgControl; - - renderer: Renderer; - - elementRef: ElementRef; - - writeValue(value: any): void; - - ngClassUntouched: boolean; - - ngClassTouched: boolean; - - ngClassPristine: boolean; - - ngClassDirty: boolean; - - ngClassValid: boolean; - - ngClassInvalid: boolean; - - registerOnChange(fn: any): void; - - registerOnTouched(fn: any): void; - } - - - /** - * A list of all the form directives used as part of a `@View` annotation. - * - * This is a shorthand for importing them each individually. - */ - var formDirectives : List ; - - - /** - * Provides a set of validators used by form controls. - * - * # Example - * - * ``` - * var loginControl = new Control("", Validators.required) - * ``` - */ - class Validators { - } - - class NgValidator { - - validator: Function; - } - - class NgRequiredValidator extends NgValidator { - - validator: Function; - } - - - /** - * Creates a form object from a user-specified configuration. - * - * # Example - * - * ``` - * import {Component, View, bootstrap} from 'angular2/angular2'; - * import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; - * - * @Component({ - * selector: 'login-comp', - * viewInjector: [ - * FormBuilder - * ] - * }) - * @View({ - * template: ` - *
- * Login - * - *
- * Password - * Confirm password - *
- *
- * `, - * directives: [ - * formDirectives - * ] - * }) - * class LoginComp { - * loginForm: ControlGroup; - * - * constructor(builder: FormBuilder) { - * this.loginForm = builder.group({ - * login: ["", Validators.required], - * - * passwordRetry: builder.group({ - * password: ["", Validators.required], - * passwordConfirmation: ["", Validators.required] - * }) - * }); - * } - * } - * - * bootstrap(LoginComp) - * ``` - * - * This example creates a {@link ControlGroup} that consists of a `login` {@link Control}, and a - * nested - * {@link ControlGroup} that defines a `password` and a `passwordConfirmation` {@link Control}: - * - * ``` - * var loginForm = builder.group({ - * login: ["", Validators.required], - * - * passwordRetry: builder.group({ - * password: ["", Validators.required], - * passwordConfirmation: ["", Validators.required] - * }) - * }); - * - * ``` - */ - class FormBuilder { - - group(controlsConfig: StringMap, extra?: StringMap): ControlGroup; - - control(value: Object, validator?: Function): Control; - - array(controlsConfig: List, validator?: Function): ControlArray; - } - - var formInjectables : List ; - - - /** - * A dispatcher for all events happening in a view. - */ - interface EventDispatcher { - - - /** - * Called when an event was triggered for a on-* attribute on an element. - * @param {Map} locals Locals to be used to evaluate the - * event expressions - */ - dispatchEvent(elementIndex: number, eventName: string, locals: Map): void; - } - - class Renderer { - - - /** - * Creates a root host view that includes the given element. - * @param {RenderProtoViewRef} hostProtoViewRef a RenderProtoViewRef of type - * ProtoViewDto.HOST_VIEW_TYPE - * @param {any} hostElementSelector css selector for the host element (will be queried against the - * main document) - * @return {RenderViewRef} the created view - */ - createRootHostView(hostProtoViewRef: RenderProtoViewRef, hostElementSelector: string): RenderViewRef; - - - /** - * Creates a regular view out of the given ProtoView - */ - createView(protoViewRef: RenderProtoViewRef): RenderViewRef; - - - /** - * Destroys the given view after it has been dehydrated and detached - */ - destroyView(viewRef: RenderViewRef): void; - - - /** - * Attaches a componentView into the given hostView at the given element - */ - attachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef): void; - - - /** - * Detaches a componentView into the given hostView at the given element - */ - detachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef): void; - - - /** - * Attaches a view into a ViewContainer (in the given parentView at the given element) at the - * given index. - */ - attachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef): void; - - - /** - * Detaches a view into a ViewContainer (in the given parentView at the given element) at the - * given index. - */ - detachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef): void; - - - /** - * Hydrates a view after it has been attached. Hydration/dehydration is used for reusing views - * inside of the view pool. - */ - hydrateView(viewRef: RenderViewRef): void; - - - /** - * Dehydrates a view after it has been attached. Hydration/dehydration is used for reusing views - * inside of the view pool. - */ - dehydrateView(viewRef: RenderViewRef): void; - - - /** - * Returns the native element at the given location. - * Attention: In a WebWorker scenario, this should always return null! - */ - getNativeElementSync(location: RenderElementRef): any; - - - /** - * Sets a property on an element. - */ - setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void; - - - /** - * Sets an attribute on an element. - */ - setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string): void; - - - /** - * Sets a class on an element. - */ - setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void; - - - /** - * Sets a style on an element. - */ - setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void; - - - /** - * Calls a method on an element. - */ - invokeElementMethod(location: RenderElementRef, methodName: string, args: List): void; - - - /** - * Sets the value of a text node. - */ - setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void; - - - /** - * Sets the dispatcher for all events of the given view - */ - setEventDispatcher(viewRef: RenderViewRef, dispatcher: EventDispatcher): void; - } - - - /** - * Abstract reference to the element which can be marshaled across web-worker boundry. - * - * This interface is used by the {@link Renderer} api. - */ - interface RenderElementRef { - - - /** - * Reference to the {@link RenderViewRef} where the `RenderElementRef` is inside of. - */ - renderView: RenderViewRef; - - - /** - * Index of the element inside the {@link ViewRef}. - * - * This is used internally by the Angular framework to locate elements. - */ - boundElementIndex: number; - } - - class RenderViewRef { - } - - class RenderProtoViewRef { - } - - class DomRenderer extends Renderer { - - createRootHostView(hostProtoViewRef: RenderProtoViewRef, hostElementSelector: string): RenderViewRef; - - createView(protoViewRef: RenderProtoViewRef): RenderViewRef; - - destroyView(view: RenderViewRef): void; - - getNativeElementSync(location: RenderElementRef): any; - - attachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef): void; - - setComponentViewRootNodes(componentViewRef: RenderViewRef, rootNodes: List): void; - - getRootNodes(viewRef: RenderViewRef): List; - - detachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef): void; - - attachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef): void; - - detachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef): void; - - hydrateView(viewRef: RenderViewRef): void; - - dehydrateView(viewRef: RenderViewRef): void; - - setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void; - - setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string): void; - - setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void; - - setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void; - - invokeElementMethod(location: RenderElementRef, methodName: string, args: List): void; - - setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void; - - setEventDispatcher(viewRef: RenderViewRef, dispatcher: any): void; - } - - var DOCUMENT_TOKEN:any; - - - /** - * Declare reusable UI building blocks for an application. - * - * Each Angular component requires a single `@Component` and at least one `@View` annotation. The - * `@Component` - * annotation specifies when a component is instantiated, and which properties and hostListeners it - * binds to. - * - * When a component is instantiated, Angular - * - creates a shadow DOM for the component. - * - loads the selected template into the shadow DOM. - * - creates all the injectable objects configured with `hostInjector` and `viewInjector`. - * - * All template expressions and statements are then evaluated against the component instance. - * - * For details on the `@View` annotation, see {@link View}. - * - * ## Example - * - * ``` - * @Component({ - * selector: 'greet' - * }) - * @View({ - * template: 'Hello {{name}}!' - * }) - * class Greet { - * name: string; - * - * constructor() { - * this.name = 'World'; - * } - * } - * ``` - */ - class ComponentAnnotation extends DirectiveAnnotation { - - - /** - * Defines the used change detection strategy. - * - * When a component is instantiated, Angular creates a change detector, which is responsible for - * propagating - * the component's bindings. - * - * The `changeDetection` property defines, whether the change detection will be checked every time - * or only when the component - * tells it to do so. - */ - changeDetection: string; - - - /** - * Defines the set of injectable objects that are visible to its view dom children. - * - * ## Simple Example - * - * Here is an example of a class that can be injected: - * - * ``` - * class Greeter { - * greet(name:string) { - * return 'Hello ' + name + '!'; - * } - * } - * - * @Directive({ - * selector: 'needs-greeter' - * }) - * class NeedsGreeter { - * greeter:Greeter; - * - * constructor(greeter:Greeter) { - * this.greeter = greeter; - * } - * } - * - * @Component({ - * selector: 'greet', - * viewInjector: [ - * Greeter - * ] - * }) - * @View({ - * template: ``, - * directives: [NeedsGreeter] - * }) - * class HelloWorld { - * } - * - * ``` - */ - viewInjector: List; - } - - - /** - * Directives allow you to attach behavior to elements in the DOM. - * - * {@link Directive}s with an embedded view are called {@link Component}s. - * - * A directive consists of a single directive annotation and a controller class. When the - * directive's `selector` matches - * elements in the DOM, the following steps occur: - * - * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor - * arguments. - * 2. Angular instantiates directives for each matched element using `ElementInjector` in a - * depth-first order, - * as declared in the HTML. - * - * ## Understanding How Injection Works - * - * There are three stages of injection resolution. - * - *Pre-existing Injectors*: - * - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if - * the dependency was - * specified as `@Optional`, returns `null`. - * - The platform injector resolves browser singleton resources, such as: cookies, title, - * location, and others. - * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow - * the same parent-child hierarchy - * as the component instances in the DOM. - * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each - * element has an `ElementInjector` - * which follow the same parent-child hierarchy as the DOM elements themselves. - * - * When a template is instantiated, it also must instantiate the corresponding directives in a - * depth-first order. The - * current `ElementInjector` resolves the constructor dependencies for each directive. - * - * Angular then resolves dependencies as follows, according to the order in which they appear in the - * {@link View}: - * - * 1. Dependencies on the current element - * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary - * 3. Dependencies on component injectors and their parents until it encounters the root component - * 4. Dependencies on pre-existing injectors - * - * - * The `ElementInjector` can inject other directives, element-specific special objects, or it can - * delegate to the parent - * injector. - * - * To inject other directives, declare the constructor parameter as: - * - `directive:DirectiveType`: a directive on the current element only - * - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current - * element and the - * Shadow DOM root. Current element is not included in the resolution, therefore even if it could - * resolve it, it will - * be ignored. - * - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent - * element only. - * - `@Query(DirectiveType) query:QueryList`: A live collection of direct child - * directives. - * - `@QueryDescendants(DirectiveType) query:QueryList`: A live collection of any - * child directives. - * - * To inject element-specific special objects, declare the constructor parameter as: - * - `element: ElementRef` to obtain a reference to logical element in the view. - * - `viewContainer: ViewContainerRef` to control child template instantiation, for - * {@link Directive} directives only - * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way. - * - * ## Example - * - * The following example demonstrates how dependency injection resolves constructor arguments in - * practice. - * - * - * Assume this HTML template: - * - * ``` - *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- * ``` - * - * With the following `dependency` decorator and `SomeService` injectable class. - * - * ``` - * @Injectable() - * class SomeService { - * } - * - * @Directive({ - * selector: '[dependency]', - * properties: [ - * 'id: dependency' - * ] - * }) - * class Dependency { - * id:string; - * } - * ``` - * - * Let's step through the different ways in which `MyDirective` could be declared... - * - * - * ### No injection - * - * Here the constructor is declared with no arguments, therefore nothing is injected into - * `MyDirective`. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor() { - * } - * } - * ``` - * - * This directive would be instantiated with no dependencies. - * - * - * ### Component-level injection - * - * Directives can inject any injectable instance from the closest component injector or any of its - * parents. - * - * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type - * from the parent - * component's injector. - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(someService: SomeService) { - * } - * } - * ``` - * - * This directive would be instantiated with a dependency on `SomeService`. - * - * - * ### Injecting a directive from the current element - * - * Directives can inject other directives declared on the current element. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(dependency: Dependency) { - * expect(dependency.id).toEqual(3); - * } - * } - * ``` - * This directive would be instantiated with `Dependency` declared at the same element, in this case - * `dependency="3"`. - * - * - * ### Injecting a directive from a direct parent element - * - * Directives can inject other directives declared on a direct parent element. By definition, a - * directive with a - * `@Parent` annotation does not attempt to resolve dependencies for the current element, even if - * this would satisfy - * the dependency. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Parent() dependency: Dependency) { - * expect(dependency.id).toEqual(2); - * } - * } - * ``` - * This directive would be instantiated with `Dependency` declared at the parent element, in this - * case `dependency="2"`. - * - * - * ### Injecting a directive from any ancestor elements - * - * Directives can inject other directives declared on any ancestor element (in the current Shadow - * DOM), i.e. on the - * parent element and its parents. By definition, a directive with an `@Ancestor` annotation does - * not attempt to - * resolve dependencies for the current element, even if this would satisfy the dependency. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Ancestor() dependency: Dependency) { - * expect(dependency.id).toEqual(2); - * } - * } - * ``` - * - * Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its - * parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would - * have returned - * `dependency="1"`. - * - * - * ### Injecting a live collection of direct child directives - * - * - * A directive can also query for other child directives. Since parent directives are instantiated - * before child directives, a directive can't simply inject the list of child directives. Instead, - * the directive injects a {@link QueryList}, which updates its contents as children are added, - * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an - * `ng-if`, or an `ng-switch`. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Query(Dependency) dependencies:QueryList) { - * } - * } - * ``` - * - * This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and - * 6. Here, `Dependency` 5 would not be included, because it is not a direct child. - * - * ### Injecting a live collection of descendant directives - * - * By passing the descendant flag to `@Query` above, we can include the children of the child - * elements. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList) { - * } - * } - * ``` - * - * This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6. - * - * ### Optional injection - * - * The normal behavior of directives is to return an error when a specified dependency cannot be - * resolved. If you - * would like to inject `null` on unresolved dependency instead, you can annotate that dependency - * with `@Optional()`. - * This explicitly permits the author of a template to treat some of the surrounding directives as - * optional. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Optional() dependency:Dependency) { - * } - * } - * ``` - * - * This directive would be instantiated with a `Dependency` directive found on the current element. - * If none can be - * found, the injector supplies `null` instead of throwing an error. - * - * ## Example - * - * Here we use a decorator directive to simply define basic tool-tip behavior. - * - * ``` - * @Directive({ - * selector: '[tooltip]', - * properties: [ - * 'text: tooltip' - * ], - * hostListeners: { - * 'onmouseenter': 'onMouseEnter()', - * 'onmouseleave': 'onMouseLeave()' - * } - * }) - * class Tooltip{ - * text:string; - * overlay:Overlay; // NOT YET IMPLEMENTED - * overlayManager:OverlayManager; // NOT YET IMPLEMENTED - * - * constructor(overlayManager:OverlayManager) { - * this.overlay = overlay; - * } - * - * onMouseEnter() { - * // exact signature to be determined - * this.overlay = this.overlayManager.open(text, ...); - * } - * - * onMouseLeave() { - * this.overlay.close(); - * this.overlay = null; - * } - * } - * ``` - * In our HTML template, we can then add this behavior to a `
` or any other element with the - * `tooltip` selector, - * like so: - * - * ``` - *
- * ``` - * - * Directives can also control the instantiation, destruction, and positioning of inline template - * elements: - * - * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at - * runtime. - * The {@link ViewContainerRef} is created as a result of `