diff --git a/.gitignore b/.gitignore index 1372bff53d..086a9a2f6d 100644 --- a/.gitignore +++ b/.gitignore @@ -32,4 +32,5 @@ public/docs/*/latest/guide/cheatsheet.json protractor-results.txt link-checker-results.txt *a2docs.css -/dist \ No newline at end of file +/dist +/public/docs/dart \ No newline at end of file diff --git a/README.md b/README.md index aeab27a8a7..fa39507356 100644 --- a/README.md +++ b/README.md @@ -35,19 +35,13 @@ if not install [nvm](https://github.com/creationix/nvm) to get node going on you - this repo - [angular/angular source code repo](https://github.com/angular/angular) - - (OPTIONAL) [dart-lang/angular2 source code repo](https://github.com/dart-lang/angular2); - cloning the Angular Dart repo is only necessary if you plan on doing full site builds - to the same parent directory. The **cloned repo directories must be siblings**, with the latter two repo directories named **angular** and **angular-dart**, respectively. + to the same parent directory. The **cloned repo directories must be siblings**, with the latter named **angular**. 1. cd into root directory `angular.io/` 1. Install local npm packages by running `./scripts/install.sh` -1. (OPTIONAL) If you intend on doing **full site builds** then you must have the - Angular Dart repo (see the Clone step above), _and_ Dart tooling available. - Both can be installed by running `./scripts/deploy-install.sh` - 1. See [below](#code-sample-development) for code sample development preparation. ## Content Development @@ -116,8 +110,7 @@ You must check that your example is free of lint errors. All samples should be covered to some degree by end-to-end tests: - `gulp run-e2e-tests` to run all TypeScript and JavaScript tests -- `gulp run-e2e-tests --lang=dart` to run all Dart tests -- `gulp run-e2e-tests --lang=all` to run TypeScript, JavaScript, and Dart tests +- `gulp run-e2e-tests --lang=all` to run TypeScript and JavaScript tests - `gulp run-e2e-tests --filter=quickstart` to filter the examples to run, by name - `gulp run-e2e-tests --fast` to ignore npm install, webdriver update and boilerplate copy diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index fdedd26980..d9ebe2b368 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -72,5 +72,6 @@ if current.path[4] !== 'change-log' mixin tree(public.docs.ts, "/docs/ts", "Angular for TypeScript") mixin tree(public.docs.js, "/docs/js", "Angular for JavaScript") //- Disable cross-language link for API entry pages (but keep for top API search page): - if ! (current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]) + - var isApiEntryPage = current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]] + if public.docs.dart && !isApiEntryPage mixin tree(public.docs.dart, "/docs/dart", "Angular for Dart") diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json deleted file mode 100644 index 68eb4ab948..0000000000 --- a/public/docs/dart/latest/_data.json +++ /dev/null @@ -1,83 +0,0 @@ -{ - "index": { - "icon": "home", - "title": "Angular Docs", - "subtitle": "Dart", - "menuTitle": "Docs Home", - "banner": "AngularDart is 2.2. View the change log to see enhancements, fixes, and breaking changes." - }, - - "cli-quickstart": { - "icon": "query-builder", - "title": "CLI Quickstart", - "subtitle": "TypeScript", - "description": "Use the CLI tool to quickly build Angular applications", - "hide": true - }, - - "quickstart": { - "icon": "query-builder", - "title": "Quickstart", - "subtitle": "Dart", - "banner": "A quick look at Angular basics" - }, - - "tutorial": { - "icon": "list", - "title": "Tutorial", - "subtitle": "Dart" - }, - - "guide": { - "icon": "list", - "title": "Guide", - "subtitle": "Dart" - }, - - "cookbook": { - "icon": "list", - "title": "Cookbook", - "subtitle": "Dart", - "banner": "How to solve common implementation challenges." - }, - - "api/": { - "icon": "book", - "title": "API Reference", - "subtitle": "Dart", - "reference": true - }, - - "cheatsheet": { - "title": "Cheat Sheet", - "subtitle": "Dart", - "reference": false - }, - - "glossary": { - "title": "Glossary", - "subtitle": "Dart", - "intro": "Brief definitions of the most important words in the Angular vocabulary", - "reference": false - }, - - "resources": { - "icon": "play-circle-fill", - "title": "Angular Resources", - "subtitle": "Dart", - "resources": true - }, - - "help": { - "icon": "chat", - "title": "Help & Support", - "subtitle": "From our team & community", - "resources": true - }, - - "styleguide": { - "title": "Docs Style Guide", - "subtitle": "Dart", - "intro": "Design & Layout Patterns For Documentation" - } -} diff --git a/public/docs/dart/latest/_util-fns.jade b/public/docs/dart/latest/_util-fns.jade deleted file mode 100644 index 49d1115ba7..0000000000 --- a/public/docs/dart/latest/_util-fns.jade +++ /dev/null @@ -1,72 +0,0 @@ -include ../../../_includes/_util-fns - -//- See the _util-fns file included above for a description of the use of these variables. -- var _docsFor = 'dart'; -- var _decorator = 'annotation'; -- var _Array = 'List'; -- var _array = 'list'; -- var _a = 'an'; -- var _an = 'a'; -- var _priv = '_'; -- var _Lang = 'Dart'; -- var _Promise = 'Future'; -- var _FutureUrl = 'https://api.dartlang.org/dart_async/Future.html'; -- var _PromiseLinked = '' + _Promise + ''; -- var _Observable = 'Stream'; -- var _liveLink = 'sample repo'; -- var _truthy = 'true'; -- var _falsey = 'false'; -- var _appDir = 'lib'; -- var _indexHtmlDir = 'web'; -- var _mainDir = 'web'; -- var _ngRepoURL = 'https://github.com/dart-lang/angular2'; -//- Don't override this value quite yet: -//- var _ngDocRepoURL = 'https://github.com/dart-lang/site-webdev'; -- var _qsRepo = 'https://github.com/angular-examples/quickstart' -- var _qsRepoZip = _qsRepo + '/archive/master.zip'; - -- var _npm = 'pub'; - -//- NgModule related -- var _AppModuleVsAppComp = 'AppComponent' -- var _appModuleTsVsAppCompTs = 'app/app_component.dart' -- var _appModuleTsVsMainTs = 'web/main.dart' -- var _bootstrapModule = 'bootstrap' -- var _declsVsDirectives = 'directives' -- var _moduleVsComp = 'component' -- var _moduleVsRootComp = 'root component' -- var _platformBrowserDynamicVsBootStrap = 'bootstrap' - -- var adjustTsExamplePathForDart = function(_path) { -- if(!_path) return _path; -- var path = _path.trim(); -- var folder = getFolder(path); -- var extn = getExtn(path); -- // if(extn == 'dart') return path; -- var baseName = getBaseFileName(path) || path; // TODO: have getBaseFileName() return path -- var baseNameNoExt = baseName.substr(0,baseName.length - (extn.length + 1)); -- var inWebFolder = baseNameNoExt.match(/^(main|index)(\.\d)?$/); -- // Adjust the folder path, e.g., ts -> dart -- folder = folder.replace(/(^|\/)ts($|\/)/, '$1dart$2').replace(/(^|\/)app($|\/)/, inWebFolder ? '$1web$2' : '$1lib$2'); -- // Special case not handled above: e.g., index.html -> web/index.html -- if(baseNameNoExt.match(/^(index|styles)(\.\d)?$/) && !folder.match(/web$/)) folder = (folder ? folder + '/' : '') + 'web'; -- // In file name, replace special characters with underscore -- baseNameNoExt = baseNameNoExt.replace(/[\-\.]/g, '_'); -- // Adjust the file extension -- if(extn == 'ts') extn = 'dart'; -- return (folder ? folder + '/' : '') + baseNameNoExt + (extn ? '.' + extn : ''); -- }; - -- var adjustTsExampleTitleForDart = function(_title) { -- if(!_title || !adjustTsExamplePathForDart) return _title; -- var title = _title.trim(); -- // Assume title is a path if it ends with an extension like '.foo', -- // optionally followed by some comment in parentheses. -- var matches = title.match(/(.*\.\w+)($|\s*\([\w ]+\)$)/); -- if(matches && matches.length == 3) { -- // e.g. matches == ['abc.ts (excerpt)', 'abc.ts', ' (excerpt)'] -- var path = adjustTsExamplePathForDart(matches[1]); -- title = path + matches[2]; -- } -- return title; -- } diff --git a/public/docs/dart/latest/api/_data.json b/public/docs/dart/latest/api/_data.json deleted file mode 100644 index 6bb33fa9a7..0000000000 --- a/public/docs/dart/latest/api/_data.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "index" : { - "title" : "API Reference" - } -} diff --git a/public/docs/dart/latest/api/index.jade b/public/docs/dart/latest/api/index.jade deleted file mode 100644 index cdf4db0b3b..0000000000 --- a/public/docs/dart/latest/api/index.jade +++ /dev/null @@ -1,12 +0,0 @@ -include ../_util-fns - -:marked - > **Known issues:** The Angular issue tracker contains - [all known issues][api-issues]; if you notice others, please - [report them][new-issue]. Thanks! - - [new-issue]: !{_ngRepoURL}/issues/new?title=%5BAPI%20docs%5D - [api-issues]: !{_ngRepoURL}/issues -//- ?q=label%3Aapi - -api-list(src="api-list.json" lang="dart") diff --git a/public/docs/dart/latest/cheatsheet.jade b/public/docs/dart/latest/cheatsheet.jade deleted file mode 100644 index 8bad00b1ca..0000000000 --- a/public/docs/dart/latest/cheatsheet.jade +++ /dev/null @@ -1,4 +0,0 @@ -- var base = current.path[4] ? '.' : './guide'; - -.l-content-small.docs-content.cheatsheet - ngio-cheatsheet(src= base + '/cheatsheet.json') diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json deleted file mode 100644 index eb1a46ace4..0000000000 --- a/public/docs/dart/latest/cookbook/_data.json +++ /dev/null @@ -1,72 +0,0 @@ -{ - "index": { - "title": "Cookbook", - "navTitle": "Overview", - "intro": "A collection of recipes for common Angular application scenarios" - }, - - "a1-a2-quick-reference": { - "title": "Angular 1 to 2 Quick Reference", - "navTitle": "Angular 1 to 2 Quick Ref", - "intro": "Learn how Angular 1 concepts and techniques map to Angular 2", - "hide": true - }, - - "ngmodule-faq": { - "title": "Angular Module FAQs", - "intro": "Answers to frequently asked questions about @NgModule", - "hide": true - }, - - "component-communication": { - "title": "Component Interaction", - "intro": "Share information between different directives and components" - }, - - "component-relative-paths": { - "title": "Component-relative Paths", - "intro": "Use relative URLs for component templates and styles.", - "hide": true - }, - - "dependency-injection": { - "title": "Dependency Injection", - "intro": "Techniques for Dependency Injection", - "hide": true - }, - - "dynamic-forms": { - "title": "Dynamic Form", - "intro": "Render dynamic forms with NgFormModel", - "hide": true - }, - - "form-validation": { - "title": "Form Validation", - "intro": "Validate user's form entries", - "hide": true - }, - - "i18n": { - "title": "Internationalization (i18n)", - "intro": "Translate the app's template text into multiple languages", - "hide": true - }, - - "set-document-title": { - "title": "Set the Document Title", - "intro": "Setting the document or window title using the Title service." - }, - - "ts-to-js": { - "title": "TypeScript to JavaScript", - "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript", - "hide": true - }, - - "visual-studio-2015": { - "title": "Visual Studio 2015 QuickStart", - "intro": "Use Visual Studio 2015 with the QuickStart files", - "hide": true - } -} diff --git a/public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/a1-a2-quick-reference.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/aot-compiler.jade b/public/docs/dart/latest/cookbook/aot-compiler.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/aot-compiler.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/component-communication.jade b/public/docs/dart/latest/cookbook/component-communication.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/component-communication.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/component-relative-paths.jade b/public/docs/dart/latest/cookbook/component-relative-paths.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/component-relative-paths.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/dependency-injection.jade b/public/docs/dart/latest/cookbook/dependency-injection.jade deleted file mode 100644 index 4782ba81d3..0000000000 --- a/public/docs/dart/latest/cookbook/dependency-injection.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/cookbook/dynamic-form-deprecated.jade b/public/docs/dart/latest/cookbook/dynamic-form-deprecated.jade deleted file mode 100644 index 4782ba81d3..0000000000 --- a/public/docs/dart/latest/cookbook/dynamic-form-deprecated.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/cookbook/dynamic-form.jade b/public/docs/dart/latest/cookbook/dynamic-form.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/dynamic-form.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/form-validation.jade b/public/docs/dart/latest/cookbook/form-validation.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/form-validation.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/i18n.jade b/public/docs/dart/latest/cookbook/i18n.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/i18n.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/index.jade b/public/docs/dart/latest/cookbook/index.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/index.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/ngmodule-faq.jade b/public/docs/dart/latest/cookbook/ngmodule-faq.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/ngmodule-faq.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/set-document-title.jade b/public/docs/dart/latest/cookbook/set-document-title.jade deleted file mode 100644 index 4782ba81d3..0000000000 --- a/public/docs/dart/latest/cookbook/set-document-title.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/cookbook/ts-to-js.jade b/public/docs/dart/latest/cookbook/ts-to-js.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/cookbook/ts-to-js.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/cookbook/visual-studio-2015.jade b/public/docs/dart/latest/cookbook/visual-studio-2015.jade deleted file mode 100644 index 4782ba81d3..0000000000 --- a/public/docs/dart/latest/cookbook/visual-studio-2015.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp \ No newline at end of file diff --git a/public/docs/dart/latest/glossary.jade b/public/docs/dart/latest/glossary.jade deleted file mode 100644 index dad0d1144d..0000000000 --- a/public/docs/dart/latest/glossary.jade +++ /dev/null @@ -1,59 +0,0 @@ -extends ../../ts/_cache/glossary.jade - -block includes - include _util-fns - -block annotation-defn - :marked - When unqualified, _annotation_ refers to a Dart [metadata - annotation][metadata] (as opposed to, say, a type annotation). A metadata - annotation begins with the character `@`, followed by either a reference - to a compile-time constant (such as [`Component`](#component)) or a call - to a constant constructor. See the [Dart Language Guide][metadata] for - details. - - The corresponding term in TypeScript and JavaScript is - [_decorator_](https://angular.io/docs/ts/latest/glossary.html#decorator). - - [metadata]: https://www.dartlang.org/guides/language/language-tour#metadata - -block bootstrap-defn-top - :marked - You launch an Angular application by "bootstrapping" it with the - [bootstrap][bootstrap] method. Bootstraping identifies an - application's top level "root" [component](#component), which is - the first component that is loaded for the application, and optionally - registers service [providers](#provider) with the [dependency injection - system](#dependency-injection). - For more information, see the [Setup](!{docsLatest}/guide/setup.html) page. - - [bootstrap]: !{docsLatest}/api/angular2.platform.browser/bootstrap.html - -block decorator-defn - :marked - When used in this guide, these JavaScript terms are taken as synonymous with - [annotation](#annotation). - -block module-defn - //- Taken from the Dart Difference in guide/architecture.jade - :marked - In this guide, the term _module_ refers to a Dart compilation unit, such - as a library, or a package. (If a Dart file has no `library` or `part` - directive, then that file itself is a library and thus a compilation - unit.) For more information about compilation units, see - the chapter on "Libraries and Scripts" in the - [Dart Language Specification](https://www.dartlang.org/docs/spec/). - -block append snake-case-defn - :marked - Library and file names are often spelled in snake_case. Examples include: - `angular_tour_of_heroes` and `app_component.dart`. - -block zone-defn - :marked - Zones are a mechanism for encapsulating and intercepting - a Dart application's asynchronous activity. - - Learn more about zones in this [article][zones]. - - [zones]: https://www.dartlang.org/articles/libraries/zones diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json deleted file mode 100644 index 7cec8bd4fb..0000000000 --- a/public/docs/dart/latest/guide/_data.json +++ /dev/null @@ -1,197 +0,0 @@ -{ - "index": { - "title": "Documentation Overview", - "navTitle": "Overview", - "intro": "How to read and use this documentation", - "nextable": true, - "basics": true - }, - - "setup": { - "title": "Setup for Development", - "navTitle": "Setup", - "intro": "How to use Dart tools to create and run Angular apps", - "nextable": true, - "hideNextPage": true, - "basics": true - }, - - "learning-angular": { - "title": "Learning Angular", - "navTitle": "Learning Angular", - "intro": "A suggested path through the documentation for Angular newcomers", - "nextable": true, - "hideNextPage": true, - "basics": true - }, - - "architecture": { - "title": "Architecture Overview", - "navTitle": "Architecture", - "intro": "The basic building blocks of Angular applications", - "nextable": true, - "basics": true - }, - - "displaying-data": { - "title": "Displaying Data", - "intro": "Property binding helps show app data in the UI.", - "nextable": true, - "basics": true - }, - - "user-input": { - "title": "User Input", - "intro": "User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models.", - "nextable": true, - "basics": true - }, - - "forms": { - "title": "Forms", - "intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.", - "nextable": true, - "basics": true - }, - - "dependency-injection": { - "title": "Dependency Injection", - "intro": "Angular's dependency injection system creates and delivers dependent services \"just-in-time\".", - "nextable": true, - "basics": true - }, - - "template-syntax": { - "title": "Template Syntax", - "intro": "Learn how to write templates that display data and consume user events with the help of data binding.", - "nextable": true, - "basics": true - }, - - "cheatsheet": { - "title": "Cheat Sheet", - "subtitle": "Dart", - "nextable": true, - "basics": true - }, - - "style-guide": { - "hide": true, - "title": "Style Guide", - "intro": "Write Angular with style.", - "basics": true - }, - - "glossary": { - "title": "Glossary", - "intro": "Brief definitions of the most important words in the Angular vocabulary", - "basics": true - }, - - "change-log": { - "hide": true, - "title": "Change Log", - "intro": "An annotated history of recent documentation improvements.", - "basics": true - }, - - "ngmodule": { - "hide": true, - "title": "Angular Modules (NgModule)", - "intro": "Define application modules with @NgModule" - }, - - "animations": { - "hide": true, - "title": "Animations", - "intro": "A guide to Angular's animation system." - }, - - "attribute-directives": { - "title": "Attribute Directives", - "intro": "Attribute directives attach behavior to elements." - }, - - "browser-support": { - "hide": true, - "title": "Browser support", - "intro": "Browser support and polyfills guide." - }, - - "component-styles": { - "title": "Component Styles", - "intro": "Learn how to apply CSS styles to components." - }, - - "hierarchical-dependency-injection": { - "title": "Hierarchical Dependency Injectors", - "navTitle": "Hierarchical Injectors", - "intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree." - }, - - "server-communication": { - "title": "HTTP Client", - "intro": "Use an HTTP Client to talk to a remote server." - }, - - "lifecycle-hooks": { - "title": "Lifecycle Hooks", - "intro": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them." - }, - - "npm-packages": { - "hide": true, - "title": "Npm Packages", - "intro": "Recommended npm packages, and how to specify package dependencies" - }, - - "pipes": { - "title": "Pipes", - "intro": "Pipes transform displayed values within a template." - }, - - "router": { - "title": "Routing & Navigation", - "intro": "Discover the basics of screen navigation with the Angular Router." - }, - - "security": { - "title": "Security", - "intro": "Developing for content security in Angular applications" - }, - - "setup-systemjs-anatomy": { - "hide": true, - "title": "Setup Anatomy", - "intro": "Inside the local development environment for SystemJS" - }, - - "structural-directives": { - "title": "Structural Directives", - "intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements." - }, - - "testing": { - "hide": true, - "title": "Testing", - "intro": "Techniques and practices for testing an Angular app" - }, - - "typescript-configuration": { - "hide": true, - "title": "TypeScript Configuration", - "intro": "TypeScript configuration for Angular developers" - }, - - "upgrade": { - "hide": true, - "title": "Upgrading from 1.x", - "intro": "Incrementally upgrade an Angular 1 application to Angular 2." - }, - - "webpack": { - "hide": true, - "title": "Webpack: an introduction", - "intro": "Create Angular applications with a Webpack based tooling" - } -} diff --git a/public/docs/dart/latest/guide/animations.jade b/public/docs/dart/latest/guide/animations.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/guide/animations.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/guide/architecture.jade b/public/docs/dart/latest/guide/architecture.jade deleted file mode 100644 index 323f1aff6d..0000000000 --- a/public/docs/dart/latest/guide/architecture.jade +++ /dev/null @@ -1,72 +0,0 @@ -extends ../../../ts/_cache/guide/architecture.jade - -block includes - include ../_util-fns - - var _library_module = 'library' - - var _at_angular = 'angular2' - -:marked - Angular is a framework to help us build client applications in HTML and - either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript. - -block angular-parts - :marked - Angular for Dart is published as the `angular2` package, which - (like many other Dart packages) is available via the Pub tool. - -block modules-in-dart - .callout.is-helpful - header Dart difference: Modules are compilation units or packages - :marked - In this guide, the term _module_ refers to a Dart compilation unit, such - as a library, or a package. (If a Dart file has no `library` or `part` - directive, then that file itself is a library and thus a compilation - unit.) For more information about compilation units, see - the chapter on "Libraries and Scripts" in the - [Dart Language Specification](https://www.dartlang.org/docs/spec/). - -block modules-are-optional - //- N/A - -block export-qualifier - .callout.is-helpful - header Dart difference: Public names are exported by default - :marked - Contrary to TypeScript, a Dart library always exports all names and - declarations in its **public** namespace, making explicit `export` - qualifiers unnecessary. - - When we say that a module _exports_ a declaration, we mean that the - declaration is _public_. For more details about name spaces and export - statements, see the section on "Exports" in the - [Dart Language Specification](https://www.dartlang.org/docs/spec/). - -block ts-import - //- N/A - -block angular-library-modules - :marked - Angular ships as a collection of libraries within the - [**angular2**](https://pub.dartlang.org/packages/angular2) package. - -block angular-imports - +makeExcerpt('app/app.component.ts', 'import') - -block ts-decorator - :marked - Annotations often have configuration parameters. - The `@Component` annotation takes parameters to provide the - information Angular needs to create and present the component and its view. - - Here are a few of the possible `@Component` parameters: - -block dart-bool - .callout.is-helpful - header Dart difference: Only true is true - :marked - In Dart, **the only value that is true is the boolean value `true`**; all - other values are false. JavaScript and TypeScript, in contrast, treat values - such as 1 and most non-null objects as true. For this reason, the JavaScript - and TypeScript versions of this app can use just `selectedHero` as the value - of the `*ngIf` expression. The Dart version must use a boolean operator such - as `!=` instead. diff --git a/public/docs/dart/latest/guide/attribute-directives.jade b/public/docs/dart/latest/guide/attribute-directives.jade deleted file mode 100644 index eda47d20f5..0000000000 --- a/public/docs/dart/latest/guide/attribute-directives.jade +++ /dev/null @@ -1,9 +0,0 @@ -extends ../../../ts/_cache/guide/attribute-directives.jade - -block includes - include ../_util-fns - -block highlight-directive-1 - :marked - We begin by importing the Angular `core`. - Then we define the directive metadata by means of the `@Directive` annotation. diff --git a/public/docs/dart/latest/guide/browser-support.jade b/public/docs/dart/latest/guide/browser-support.jade deleted file mode 100644 index c743361ac8..0000000000 --- a/public/docs/dart/latest/guide/browser-support.jade +++ /dev/null @@ -1 +0,0 @@ -include ../../../_includes/_ts-temp diff --git a/public/docs/dart/latest/guide/cheatsheet.jade b/public/docs/dart/latest/guide/cheatsheet.jade deleted file mode 100644 index 51a21522a9..0000000000 --- a/public/docs/dart/latest/guide/cheatsheet.jade +++ /dev/null @@ -1 +0,0 @@ -extends ../cheatsheet diff --git a/public/docs/dart/latest/guide/component-styles.jade b/public/docs/dart/latest/guide/component-styles.jade deleted file mode 100644 index bcff4d9c63..0000000000 --- a/public/docs/dart/latest/guide/component-styles.jade +++ /dev/null @@ -1,34 +0,0 @@ -extends ../../../ts/_cache/guide/component-styles.jade - -block includes - include ../_util-fns - -//- TODO: consider adding material equivalent to TS Appendices 1 & 2 if relevant. - -block style-url - :marked - Note that the URLs in `styleUrls` are relative to the component. - -block module-bundlers - //- TODO: determine if an equivalent of the TS material is relevant for Dart. - //- Leaving empty for now. - -block css-import-url - :marked - In *this* case the URL is relative to the CSS file into which we are importing. - .alert.is-important - :marked - URLs are currently not interpreted in this way, see - [issue 8518](https://github.com/angular/angular/issues/8518). - Until this issue is fixed, absolute package-reference style URLs must - be given as is illustrated below. - -block module-id - :marked - Thankfully, this is the default interpretation of relative URLs in - Angular2 for Dart: - - +makeExcerpt('app/quest-summary.component.ts', 'urls', '') - - - diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade deleted file mode 100644 index 4141d981bc..0000000000 --- a/public/docs/dart/latest/guide/dependency-injection.jade +++ /dev/null @@ -1,156 +0,0 @@ -extends ../../../ts/_cache/guide/dependency-injection.jade - -block includes - include ../_util-fns - - var _thisDot = ''; - -block ctor-syntax - .l-sub-section - :marked - We also leveraged Dart's constructor syntax for declaring parameters and - initializing properties simultaneously. - -block register-provider-ngmodule - :marked - Before we do, let's see an example of provider registration during bootstrapping: - - +makeExcerpt('app/main.1.ts (discouraged)', 'bootstrap-discouraged', '') - - :marked - The injector now knows about our `HeroService`. - An instance of our `HeroService` will be available for injection across our entire application. - - Of course we can't help wondering about that comment telling us not to do it this way. - It *will* work. It's just not a best practice. - The bootstrap provider option is intended for configuring and overriding Angular's own - preregistered services, such as its routing support. - - The preferred approach is to register application providers in application components. - Because the `HeroService` is used within the *Heroes* feature area — - and nowhere else — the ideal place to register it is in the top-level `HeroesComponent`. - -block ngmodule-vs-component - :marked - Look at the `providers` part of the `@Component` annotation. - An instance of the `HeroService` is now available for injection in this `HeroesComponent` - and all of its child components. - - The `HeroesComponent` itself doesn't happen to need the `HeroService`. - But its child `HeroListComponent` does, so we head there next. - -block injectable-not-always-needed-in-ts - //- The [Angular Dart Transformer](https://github.com/dart-lang/angular2/wiki/Transformer) - //- generates static code to replace the use of dart:mirrors. It requires that types be - //- identified as targets for static code generation. Generally this is achieved - //- by marking the class as @Injectable (though there are other mechanisms). - -block always-include-paren - :marked - Always write `@Injectable()`, not just `@Injectable`. - A metadata annotation must be either a reference to a - compile-time constant variable or a call to a constant - constructor such as `Injectable()`. - - If we forget the parentheses, the analyzer will complain: - "Annotation creation must have arguments". If we try to run the - app anyway, it won't work, and the console will say - "expression must be a compile-time constant". - -block real-logger - .l-sub-section - :marked - A real implementation would probably use the - [logging package](https://pub.dartlang.org/packages/logging). - -block provider-shorthand - :marked - This is actually a shorthand expression for a provider registration - that creates a new instance of the - [Provider](../api/angular2.core/Provider-class.html) class: - -block provider-ctor-args - - var _secondParam = 'named parameter, such as useClass' - :marked - We supply two arguments (or more) to the `Provider` constructor. - -block dart-diff-const-metadata - .callout.is-helpful - header Dart difference: Constants in metadata - :marked - In Dart, the value of a metadata annotation must be a compile-time constant. - For that reason, we can't call functions to get values - to use within an annotation. - Instead, we use constant literals or constant constructors. - For example, a TypeScript program will use the - object literal `{ provide: Logger, useClass: BetterLogger }`. - A Dart annotation would instead use the constant value - `const Provider(Logger, useClass: BetterLogger)`. - -block dart-diff-const-metadata-ctor - .callout.is-helpful - header Dart difference: Constants in metadata - :marked - Because Dart annotations must be compile-time constants, - `useValue` is often used with string or list literals. - However, `useValue` works with any constant object. - - To create a class that can provide constant objects, - ensure all its instance variables are `final`, - and give it a `const` constructor. - - Create a constant instance of the class by using `const` instead of `new`. - -// - var stylePattern = { otl: /(useValue.*\))/gm }; -// +makeExample('dependency-injection/dart/lib/providers_component.dart','providers-9','', stylePattern)(format='.') - -block non-class-dep-eg - span string, list, map, or maybe a function. - -block config-obj-maps - | . They can be - | Map - | literals - -block what-should-we-use-as-token - :marked - But what should we use as the token? - While we _could_ use **[Map][]**, we _should not_ because (like - `String`) `Map` is too general. Our app might depend on several maps, each - for a different purpose. - - [Map]: https://api.dartlang.org/stable/dart-core/Map-class.html - - .callout.is-helpful - header Dart difference: Interfaces are valid tokens - :marked - In TypeScript, interfaces don't work as provider tokens. - Dart doesn't have this limitation; - every class implicitly defines an interface, - so interface names are just class names. - `Map` is a *valid* token even though it's the name of an abstract class; - it's just *unsuitable* as a token because it's too general. - -block dart-map-alternative - :marked - As an alternative to using a configuration `Map`, we can define - a custom configuration class: - - +makeExcerpt('lib/app_config.dart (alternative config)','config-alt') - - :marked - Defining a configuration class has a few benefits. One key benefit - is strong static checking: we'll be warned early if we misspell a property - name or assign it a value of the wrong type. - The Dart [cascade notation][cascade] (`..`) provides a convenient means of initializing - a configuration object. - - If we use cascades, the configuration object can't be declared `const` and - we can't use a [value provider](#value-provider). - A solution is to use a [factory provider](#factory-provider). - We illustrate this next. We also show how to provide and inject the - configuration object in our top-level `AppComponent`: - - [cascade]: https://www.dartlang.org/docs/dart-up-and-running/ch02.html#cascade - - +makeExcerpt('lib/app_component.dart','providers') - +makeExcerpt('lib/app_component.dart','ctor') diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade deleted file mode 100644 index d3c588076b..0000000000 --- a/public/docs/dart/latest/guide/displaying-data.jade +++ /dev/null @@ -1,20 +0,0 @@ -extends ../../../ts/_cache/guide/displaying-data.jade - -block includes - include ../_util-fns - - var _iterableUrl = 'https://api.dartlang.org/stable/dart-core/Iterable-class.html'; - - var _boolean = 'boolean'; - -block hero-class - :marked - We've defined a class with a constructor, two properties (`id` and `name`), - and a `toString()` method. - -block final-code - +makeTabs(`displaying-data/dart/lib/app_component.dart, - displaying-data/dart/lib/hero.dart, - displaying-data/dart/pubspec.yaml, - displaying-data/dart/web/index.html, - displaying-data/dart/web/main.dart`, - ',,,,final', - 'lib/app_component.dart, lib/hero.dart, pubspec.yaml, web/index.html, web/main.dart') diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade deleted file mode 100644 index 6e2591fc08..0000000000 --- a/public/docs/dart/latest/guide/forms.jade +++ /dev/null @@ -1,656 +0,0 @@ -include ../_util-fns - -:marked - We’ve all used a form to log in, submit a help request, place an order, book a flight, - schedule a meeting, and perform countless other data entry tasks. - Forms are the mainstay of business applications. - - Any seasoned web developer can slap together an HTML form with all the right tags. - It's more challenging to create a cohesive data entry experience that guides the - user efficiently and effectively through the workflow behind the form. - - *That* takes design skills that are, to be frank, well out of scope for this chapter. - - It also takes framework support for - **two-way data binding, change tracking, validation, and error handling** - ... which we shall cover in this chapter on Angular forms. - - We will build a simple form from scratch, one step at a time. Along the way we'll learn: - - - How to build an Angular form with a component and template - - - The `ngModel` two-way data binding syntax for reading and writing values to input controls - - - The `ngControl` directive to track the change state and validity of form controls - - - The special CSS classes that `ngControl` adds to form controls and how to use them to provide strong visual feedback - - - How to display validation errors to users and enable/disable form controls - - - How to share information across controls with template reference variables - - Run the . - -.l-main-section -:marked - ## Template-driven forms - - Many of us will build forms by writing templates in the Angular - template syntax - - with the form-specific directives and techniques described in this chapter. - -.l-sub-section - :marked - That's not the only way to create a form but it's the way we'll cover in this chapter. -:marked - We can build almost any form we need with an Angular template—login forms, contact forms, pretty much any business form. - We can lay out the controls creatively, bind them to data, specify validation rules and display validation errors, - conditionally enable or disable specific controls, trigger built-in visual feedback, and much more. - - It will be pretty easy because Angular handles many of the repetitive, boilerplate tasks we'd - otherwise wrestle with ourselves. - - We'll discuss and learn to build a template-driven form that looks like this: - -figure.image-display - img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form") - -:marked - Here at the *Hero Employment Agency* we use this form to maintain personal information about the - heroes in our stable. Every hero needs a job. It's our company mission to match the right hero with the right crisis! - - Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot. - - If we delete the hero name, the form displays a validation error in an attention-grabbing style: - -figure.image-display - img(src="/resources/images/devguide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required") - -:marked - Note that the submit button is disabled, and the "required" bar to the left of the input control changed from green to red. - -.l-sub-section - :marked - We'll customize the colors and location of the "required" bar with standard CSS. - -:marked - We'll build this form in small steps: - - 1. Create the `Hero` model class. - 1. Create the component that controls the form. - 1. Create a template with the initial form layout. - 1. Add the **ngModel** directive to each form input control. - 1. Add the **ngControl** directive to each form input control. - 1. Add custom CSS to provide visual feedback. - 1. Show and hide validation error messages. - 1. Handle form submission with **ngSubmit**. - 1. Change the form's display after submission. - -:marked - ## Setup - Create a new project folder (`angular_forms`) and create 3 files: - `pubspec.yaml`, `web/index.html`, and `web/main.dart`. - (These files should be familiar from the - [QuickStart](../quickstart.html).) Put these contents in the files: - -+makeTabs('forms/dart/pubspec.yaml, forms/dart/web/index.html, forms/dart/web/main.dart', ',initial,', 'pubspec.yaml, web/index.html, web/main.dart') - -:marked - So that the code can run, - let's create a stub for the `` component. - - Create a new directory called `lib`. - In it, put a file called `hero_form_component.dart` - with the following code: - -+makeExample('forms/dart/lib/hero_form_component_initial.dart', null, 'lib/hero_form_component.dart') - -:marked - The app should now run, but it won't do anything interesting. - Let's add some data. - - - ## Create the Hero model class - - As users enter form data, we'll capture their changes and update an instance of a model. - We can't lay out the form until we know what the model looks like. - - A model can be as simple as a "property bag" that holds facts about a thing of application importance. - That describes well our `Hero` class with its three required fields (`id`, `name`, `power`) - and one optional field (`alterEgo`). - - In the `lib` directory, add a file called `hero.dart` - with the following code: - -+makeExample('forms/dart/lib/hero.dart', 'all', 'lib/hero.dart') - -:marked - It's an anemic model with few requirements and no behavior. Perfect for our demo. - - The `alterEgo` is optional, so the constructor lets us omit it: note the - `[]` in `[this.alterEgo]`. - - We can create a new hero like this: - -+makeExample('forms/dart/lib/hero.dart', 'newhero')(format=".") - -:marked - -.l-main-section -:marked - ## Create a form component - - An Angular form has two parts: an HTML-based template and a code-based component to handle data and user interactions. - - We begin with the component because it states, in brief, what the Hero editor can do. - - Edit `hero_form_component.dart`, replacing all of its contents - with the following code: - -+makeExample('forms/dart/lib/hero_form_component.dart', null, 'lib/hero_form_component.dart') - -:marked - There’s nothing special about this component, nothing form-specific, - nothing to distinguish it from any component we've written before. - - Understanding this component requires only the Angular concepts covered in previous chapters. - - 1. The code imports a standard set of symbols from the Angular library. - - 1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `` tag. - - 1. The `moduleId` property sets the base for module-relative URLs such as the `templateUrl`. - - 1. The `templateUrl` property points to a separate file for template HTML called `hero_form_component.html`. - - 1. We defined dummy data for `model` and `powers`, as befits a demo. - Down the road, we can inject a data service to get and save real data - or perhaps expose these properties as inputs and outputs - for binding to a - parent component. None of this concerns us now, and these future changes won't affect our form. - - 1. We threw in a `diagnostic` property to return a - string describing our model. - It'll help us see what we're doing during our development; we've left ourselves a cleanup note to discard it later. - - Why isn't the template inline in the component file? - - Inline templates can be nice when they are short, - but most form templates aren't short. Dart files generally aren't the best place to - write (or read) large stretches of HTML, and few editors are much help with files that have a mix of HTML and code. - It's also nice to have short files with a clear and obvious purpose. - - We made a good choice to put the HTML template elsewhere. Let's write it. - - - - - -.l-main-section -:marked - ## Create an initial HTML form template - - Create a new file under `lib` called `hero_form_component.html`, - and put the following template code in it: - -+makeExample('forms/dart/lib/hero_form_component_initial.html', null, 'lib/hero_form_component.html') - -:marked - That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and - opening them up for user input in input boxes. - - The Name `` control has the HTML5 `required` attribute; - the Alter Ego `` control does not because `alterEgo` is optional. - - We've got a Submit button at the bottom with some classes on it. - - **We are not using Angular yet**. There are no bindings. No extra directives. Just layout. - - - The `container`,`form-group`, `form-control`, and `btn` classes are [Bootstrap](http://getbootstrap.com/) CSS. Purely cosmetic. - We're using Bootstrap to gussy up our form. - Hey, what's a form without a little style! - -.callout.is-important - header Angular forms do not require a style library - :marked - Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or - the styles of any external library. Angular apps can use any CSS library - ... or none at all. - -:marked - Let's add the stylesheet. - - 1. Download the Bootstrap stylesheet from - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css, - and put it in the `web` directory. - - 2. Edit `web/index.html`, adding a link to `bootstrap.min.css`: - -- var stylePattern = { otl: /(<link rel.*$)/gm }; -+makeExample('forms/dart/web/index.html', 'bootstrap-and-script', 'web/index.html (excerpt)', stylePattern)(format=".") - - [PENDING: runnable now? Remind about pub get? remind them to look in the browser console] - - -.l-main-section -:marked - ## Add powers with ***ngFor** - Our hero must choose one super power from a fixed list of Agency-approved powers. - We maintain that list internally (in `HeroFormComponent`). - - We'll add a `select` to our - form and bind the options to the `powers` list using `ngFor`, - a technique used before in [Displaying Data](./displaying-data.html). - - Add the following HTML *immediately below* the Alter Ego group. -+makeExample('forms/dart/lib/hero_form_component_ngmodel_ngfor.html', 'powers', 'lib/hero_form_component.html (excerpt)')(format=".") - -:marked - This code repeats the `