diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000000..e2a9e85ddf0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,47 @@ +.DS_STORE + +# Don’t commit the following directories created by pub. +packages +pubspec.lock +.pub +.packages + +/dist/ +.buildlog +node_modules +bower_components + +# Or broccoli working directory +tmp + +# Or the files created by dart2js. +*.dart.js +*.dart.precompiled.js +*.js_ +*.js.deps +*.js.map + +# Or type definitions we mirror from github +**/typings/**/*.d.ts +**/typings/tsd.cached.json + +# Include when developing application packages. +pubspec.lock +.c9 +.idea/ +.settings/ +*.swo +modules/.settings +.vscode +modules/.vscode + +# Don't check in secret files +*secret.js + +# Ignore npm debug log +npm-debug.log + +/docs/bower_components/ + +# build-analytics +.build-analytics diff --git a/README.dart.md b/README.dart.md new file mode 100644 index 00000000000..35cead77114 --- /dev/null +++ b/README.dart.md @@ -0,0 +1,6 @@ +Angular2 +========= + +The sources for this package are in the main [Angular2](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo. This is the repository for the upcoming 2.0 version. If you're looking for the current official version of Angular you should go to [angular/angular.js](https://github.com/angular/angular.js) + +License: Apache MIT 2.0 diff --git a/README.js.md b/README.js.md new file mode 100644 index 00000000000..24f3f372f3d --- /dev/null +++ b/README.js.md @@ -0,0 +1,15 @@ +Angular2 +========= + +The sources for this package are in the main [Angular2](https://github.com/angular/angular) repo. Please file issues and pull requests against that repo. This is the repository for the upcoming 2.0 version. If you're looking for the current official version of Angular you should go to [angular/angular.js](https://github.com/angular/angular.js) + +This package contains different sources for different users: + +1. The files located in the root folder can be consumed using CommonJS. +2. The files under `/es6` are es6 compatible files that can be transpiled to + es5 using any transpiler. This contains: + * `dev/`: a development version that includes runtime type assertions + * `prod/`: a production version that does not include runtime type assertions +3. The files under `/ts` are the TypeScript source files. + +License: Apache MIT 2.0 diff --git a/SOURCE_SHA b/SOURCE_SHA new file mode 100644 index 00000000000..dca55bf7a44 --- /dev/null +++ b/SOURCE_SHA @@ -0,0 +1 @@ +f2beef551567fd5d25d634c572938cbfd9207bcb diff --git a/angular2.js b/angular2.js new file mode 100644 index 00000000000..7a0ae1e6dd8 --- /dev/null +++ b/angular2.js @@ -0,0 +1,10 @@ +function __export(m) { + for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; +} +__export(require('./common')); +__export(require('./core')); +__export(require('./profile')); +__export(require('./lifecycle_hooks')); +__export(require('./bootstrap')); +__export(require('./upgrade')); +//# sourceMappingURL=angular2.js.map \ No newline at end of file diff --git a/angular2_sfx.js b/angular2_sfx.js new file mode 100644 index 00000000000..2d238a39d1b --- /dev/null +++ b/angular2_sfx.js @@ -0,0 +1,19 @@ +var ng = require('./angular2'); +// the router and http should have their own SFX bundle +// But currently the module arithmetic 'angular2/router_sfx - angular2/angular2', +// is not support by system builder. +var router = require('./router'); +var http = require('./http'); +var _prevNg = window.ng; +window.ng = ng; +window.ngRouter = router; +window.ngHttp = http; +/** + * Calling noConflict will restore window.angular to its pre-angular loading state + * and return the angular module object. + */ +ng.noConflict = function () { + window.ng = _prevNg; + return ng; +}; +//# sourceMappingURL=angular2_sfx.js.map \ No newline at end of file diff --git a/animate.js b/animate.js new file mode 100644 index 00000000000..759a5e579fd --- /dev/null +++ b/animate.js @@ -0,0 +1,11 @@ +var animation_1 = require('./src/animate/animation'); +exports.Animation = animation_1.Animation; +var animation_builder_1 = require('./src/animate/animation_builder'); +exports.AnimationBuilder = animation_builder_1.AnimationBuilder; +var browser_details_1 = require('./src/animate/browser_details'); +exports.BrowserDetails = browser_details_1.BrowserDetails; +var css_animation_builder_1 = require('./src/animate/css_animation_builder'); +exports.CssAnimationBuilder = css_animation_builder_1.CssAnimationBuilder; +var css_animation_options_1 = require('./src/animate/css_animation_options'); +exports.CssAnimationOptions = css_animation_options_1.CssAnimationOptions; +//# sourceMappingURL=animate.js.map \ No newline at end of file diff --git a/bootstrap.js b/bootstrap.js new file mode 100644 index 00000000000..177c5849b63 --- /dev/null +++ b/bootstrap.js @@ -0,0 +1,7 @@ +/** + * This file is only used for dart applications and for internal examples + * that compile with both JavaScript and Dart. + */ +var bootstrap_1 = require('angular2/src/core/bootstrap'); +exports.bootstrap = bootstrap_1.bootstrap; +//# sourceMappingURL=bootstrap.js.map \ No newline at end of file diff --git a/common.js b/common.js new file mode 100644 index 00000000000..b6585083ad4 --- /dev/null +++ b/common.js @@ -0,0 +1,8 @@ +function __export(m) { + for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; +} +__export(require('./src/common/pipes')); +__export(require('./src/common/directives')); +__export(require('./src/common/forms')); +__export(require('./src/common/common_directives')); +//# sourceMappingURL=common.js.map \ No newline at end of file diff --git a/compiler.js b/compiler.js new file mode 100644 index 00000000000..eeb789a57ed --- /dev/null +++ b/compiler.js @@ -0,0 +1,11 @@ +function __export(m) { + for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; +} +/** + * @module + * @description + * Starting point to import all compiler APIs. + */ +__export(require('./src/compiler/url_resolver')); +__export(require('./src/compiler/xhr')); +//# sourceMappingURL=compiler.js.map \ No newline at end of file diff --git a/core.js b/core.js new file mode 100644 index 00000000000..1c0458ccd54 --- /dev/null +++ b/core.js @@ -0,0 +1,28 @@ +function __export(m) { + for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; +} +/** + * @module + * @description + * Starting point to import all public core APIs. + */ +__export(require('./src/core/metadata')); +__export(require('./src/core/util')); +__export(require('./src/core/di')); +__export(require('./src/common/pipes')); +__export(require('./src/facade/facade')); +__export(require('./src/core/application')); +__export(require('./src/core/bootstrap')); +__export(require('./src/core/services')); +__export(require('./src/core/linker')); +var application_ref_1 = require('./src/core/application_ref'); +exports.ApplicationRef = application_ref_1.ApplicationRef; +__export(require('./src/core/zone')); +__export(require('./src/core/render')); +__export(require('./src/common/directives')); +__export(require('./src/common/forms')); +__export(require('./src/core/debug')); +__export(require('./src/core/change_detection')); +__export(require('./src/core/ambient')); +__export(require('./src/core/dev_mode')); +//# sourceMappingURL=core.js.map \ No newline at end of file diff --git a/docs/change_detection/change_detection.md b/docs/change_detection/change_detection.md new file mode 100644 index 00000000000..4207687163d --- /dev/null +++ b/docs/change_detection/change_detection.md @@ -0,0 +1,10 @@ +@name Change Detection +@description +# Change Detection + +* Mechanisms by which changes are detected in the model +* DAG +* Order of evaluation +* Pure Functions +* `onChange` method +* Parser diff --git a/docs/change_detection/expressions.md b/docs/change_detection/expressions.md new file mode 100644 index 00000000000..e9cdc9aa9bb --- /dev/null +++ b/docs/change_detection/expressions.md @@ -0,0 +1,7 @@ +# Expressions + +## Binding Semantics + +### Formatters + +## Statement Semantics \ No newline at end of file diff --git a/docs/change_detection/record.md b/docs/change_detection/record.md new file mode 100644 index 00000000000..343624acec2 --- /dev/null +++ b/docs/change_detection/record.md @@ -0,0 +1,3 @@ +# Record + +## RecordRange \ No newline at end of file diff --git a/docs/core/00_index.md b/docs/core/00_index.md new file mode 100644 index 00000000000..95c575cf1b0 --- /dev/null +++ b/docs/core/00_index.md @@ -0,0 +1,3 @@ +# Overview + +* High level description of all of the components. \ No newline at end of file diff --git a/docs/core/01_templates.md b/docs/core/01_templates.md new file mode 100644 index 00000000000..e152763f43e --- /dev/null +++ b/docs/core/01_templates.md @@ -0,0 +1,610 @@ +# Templates + +Templates are markup which is added to HTML to declaratively describe how the application model should be +projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain +syntaxes which are core to Angular and allows for data-binding, event-binding, template-instantiation. + +The design of the template syntax has these properties: + + +* All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity whether the value should be + interpreted as string literal or as an expression.) +* All events and their statements are easily identifiable. +* All places of DOM instantiation are easily identifiable. +* All places of variable declaration are easily identifiable. + +The above properties guarantee that the templates are easy to parse by tools (such as IDEs) and reason about by people. +At no point is it necessary to understand which directives are active or what their semantics are in order to reason +about the template runtime characteristics. + + + +## Summary + +Below is a summary of the kinds of syntaxes which Angular templating supports. The syntaxes are explained in more +detail in the following sections. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescriptionShortCanonical
Text Interpolation +
+<div>{{exp}}</div>
+
+ +Example: +
+<div>
+  Hello {{name}}!
+  <br>
+  Goodbye {{name}}!
+</div>
+
+ 		+
+<div [text|index]="exp"></div>
+
+ +Example: +
+<div
+  [text|0]=" 'Hello' + stringify(name) + '!' "
+  [text|2]=" 'Goodbye' + stringify(name) + '!' ">
+  <b>x</b>
+</div>
+
+
Property Interpolation +
+<div name="{{exp}}"></div>
+
+ +Example: + +
+<div class="{{selected}}"></div>
+
+ 		+
+<div [name]="stringify(exp)"></div>
+
+ +Example: + +
+<div [title]="stringify(selected)"></div>
+
+
Property binding +
+<div [prop]="exp"></div>
+
+ +Example: + +
+<div [hidden]="true"></div>
+
+ 		+
+<div bind-prop="exp"></div>
+
+ +Example: + +
+<div bind-hidden="true"></div>
+
+
Event binding (non-bubbling) +
+<div (event)="statement"></div>
+
+ +Example: + +
+<div (click)="doX()"></div>
+
+ 		+
+<div on-event="statement"></div>
+
+ +Example: + +
+<video #player>
+  <button (click)="player.play()">play</button>
+</video>
+
+ +Or: + +
+<div def="symbol"></div>
+
+ +Example: + +
+<video def="player">
+  <button on-click="player.play()">play</button>
+</video>
+
+
Inline Template +
+<div template="...">...</div>
+
+ +Example: + +
+<ul>
+  <li template="for: #item of items">
+    {{item}}
+  </li>
+</ul>
+
+ 		+
+<template>...</template>
+
+ +Example: +
+<ul>
+  <template def-for:"item"
+            bind-for-in="items">
+    <li>
+      {{item}}
+    </li>
+  </template>
+</ul>
+
+
Explicit Template +
+<template>...</template>
+
+ +Example: + +
+<template #for="item"
+          [for-in]="items">
+  _some_content_to_repeat_
+</template>
+
+ 		+
+<template>...</template>
+
+ +Example: + +
+<template def-for="item"
+          bind-for-in="items">
+  _some_content_to_repeat_
+</template>
+
+
+ + + +## Property Binding + +Binding application model data to the UI is the most common kind of bindings in an Angular application. The bindings +are always in the form of `property-name` which is assigned an `expression`. The generic form is: + + + + + + + + + + +
Short form
<some-element [some-property]="expression">
Canonical form
<some-element bind-some-property="expression">
+ + +Where: +* `some-element` can be any existing DOM element. +* `some-property` (escaped with `[]` or `bind-`) is the name of the property on `some-element`. In this case the + dash-case is converted into camel-case `someProperty`. +* `expression` is a valid expression (as defined in section below). + +Example: +``` +
+``` + +In the above example the `title` property of the `div` element will be updated whenever the `user.firstName` changes +its value. + +Key points: +* The binding is to the element property not the element attribute. +* To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name + is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`. +* A binding value (in this case `user.firstName`) will always be an expression, never a string literal. + +NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is +done to better support custom elements, and to allow binding for values other than strings. + +NOTE: Some editors/server side pre-processors may have trouble generating `[]` around the attribute name. For this +reason Angular also supports a canonical version which is prefixed using `bind-`. + + + +### String Interpolation + +Property bindings are the only data bindings which Angular supports, but for convenience Angular supports an interpolation +syntax which is just a short hand for the data binding syntax. + +``` +Hello {{name}}! +``` + +is a short hand for: + +``` + +``` + +The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text` +property. The index is necessary in case there are more than one text nodes, or if the text node we wish to bind to +is not the first one. + +Similarly the same rules apply to interpolation inside attributes. + +``` + +``` + +is a short hand for: + +``` + +``` + +NOTE: `stringify()` is a built in implicit function which converts its argument to a string representation, while +keeping `null` and `undefined` as empty strings. + + + + +## Local Variables + + + + +## Inline Templates + +Data binding allows updating the DOM's properties, but it does not allow for changing of the DOM structure. To change +DOM structure we need the ability to define child templates, and then instantiate these templates into Views. The +Views than can be inserted and removed as needed to change the DOM structure. + + + + + + + + + + +
Short form +
+parent template
+<element>
+  <some-element template="instantiating-directive-microsyntax">child template</some-element>
+</element>
+
+
Canonical form +
+parent template
+<element>
+  <template instantiating-directive-bindings>
+    <some-element>child template</some-element>
+  </template>
+</element>
+
+
+ +Where: +* `template` defines a child template and designates the anchor where Views (instances of the template) will be + inserted. The template can be defined implicitly with `template` attribute, which turns the current element into + a template, or explicitly with `