diff --git a/public/docs/_examples/quickstart-old/.gitignore b/public/docs/_examples/quickstart-old/.gitignore deleted file mode 100644 index 6724ce3596..0000000000 --- a/public/docs/_examples/quickstart-old/.gitignore +++ /dev/null @@ -1 +0,0 @@ -src/**/*.js \ No newline at end of file diff --git a/public/docs/_examples/quickstart-old/e2e-spec.js b/public/docs/_examples/quickstart-old/e2e-spec.js deleted file mode 100644 index a866771ab6..0000000000 --- a/public/docs/_examples/quickstart-old/e2e-spec.js +++ /dev/null @@ -1,12 +0,0 @@ -describe('Protractor quick start test', function() { - beforeEach(function() { - browser.get('quickstart/index.html'); - }); - - // #docregion test - it('should display Alice', function() { - expect(element(by.id('output')).getText()).toEqual('Hello Alice'); - }); - // #enddocregion -}); - diff --git a/public/docs/_examples/quickstart-old/index.html b/public/docs/_examples/quickstart-old/index.html deleted file mode 100644 index 101590e856..0000000000 --- a/public/docs/_examples/quickstart-old/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Angular 2 Quickstart - - - - - - - - - - - \ No newline at end of file diff --git a/public/docs/_examples/quickstart-old/package.json b/public/docs/_examples/quickstart-old/package.json deleted file mode 100644 index 0c03fdd6a2..0000000000 --- a/public/docs/_examples/quickstart-old/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "ng2-quickstart", - "version": "0.0.1", - "license": "ICS", - "repository": {}, - "dependencies": { - "angular2": "2.0.0-alpha.35", - "es6-module-loader": "^0.16", - "systemjs": "^0.16", - "traceur": "0.0.91" - }, - "devDependencies": { - "jasmine-core": "^2.3.4", - "zone.js": "^0.5.3" - }, - "scripts": { - "postinstall": "cd src && tsd reinstall -r -o && cd ..", - "tsc": "tsc -p src -w", - "start": "live-server" - } -} \ No newline at end of file diff --git a/public/docs/_examples/quickstart-old/src/app.spec.ts b/public/docs/_examples/quickstart-old/src/app.spec.ts deleted file mode 100644 index b70b3b2a93..0000000000 --- a/public/docs/_examples/quickstart-old/src/app.spec.ts +++ /dev/null @@ -1,68 +0,0 @@ -///// Boiler Plate //// -import {bind} from 'angular2/angular2'; - -import { - beforeEachBindings, DebugElement, RootTestComponent as RTC, - // Jasmine overrides - beforeEach, ddescribe, xdescribe, describe, iit, it, xit, //expect, - AsyncTestCompleter, inject, RootTestComponent, TestComponentBuilder, -} from 'angular2/test'; - -//// Testing this component //// -import {AppComponent} from './app'; - -describe('AppComponent', () => { - - describe('(no DOM)', () => { - - it('component has name == "Alice"', () => { - let app = new AppComponent; - expect(app.name).toEqual('Alice'); - }); - }); - - describe('(in DOM)', () => { - - it('component has name == "Alice"', injectTcb((tcb, done) => { - tcb - .createAsync(AppComponent) - .then((rootTC:RTC) => { - let ac:AppComponent = rootTC.componentInstance; - expect(ac.name).toEqual('Alice'); - }) - .catch(fail).then(done,done); - })); - - it('DOM has name == "Alice"', injectTcb((tcb, done) => { - tcb - .createAsync(AppComponent) - .then((rootTC:RTC) => { - rootTC.detectChanges(); - let domName = rootTC.componentViewChildren[0].nativeElement.innerHTML; - expect(domName).toMatch('Alice'); - }) - .catch(fail).then(done,done); - })); - //rootTC.nativeElement.getElementsByTagName('h1')[0].innerHTML - it('DOM has name == "Alice" (2)', injectTcb((tcb, done) => { - tcb - .createAsync(AppComponent) - .then((rootTC:RTC) => { - rootTC.detectChanges(); - let domName = rootTC.nativeElement - // jQuery goes here - .getElementsByTagName('h1')[0].innerHTML; - expect(domName).toMatch('Alice'); - }) - .catch(fail).then(done,done); - })); - }); -}); - -///////// test.helpers.ts: here for now //////// - -function injectTcb(testFn: (tcb: TestComponentBuilder, done: ()=>void) => void) { - return inject([TestComponentBuilder, AsyncTestCompleter], function injectWrapper(tcb: TestComponentBuilder, async: AsyncTestCompleter) { - testFn(tcb, async.done.bind(async)); - }); -} \ No newline at end of file diff --git a/public/docs/_examples/quickstart-old/src/app.ts b/public/docs/_examples/quickstart-old/src/app.ts deleted file mode 100644 index 6a4ce7871f..0000000000 --- a/public/docs/_examples/quickstart-old/src/app.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -// #docregion import -import {Component, View, bootstrap} from 'angular2/angular2'; -// #enddocregion - -@Component({ - selector: 'app' -}) -@View({ - template: '

Hello {{ name }}

' -}) -export class AppComponent { - name : string; - - constructor() { - this.name = 'Alice'; - } -} - -// #docregion bootstrap -bootstrap(AppComponent); -// #enddocregion diff --git a/public/docs/_examples/quickstart-old/src/dummy.spec.ts b/public/docs/_examples/quickstart-old/src/dummy.spec.ts deleted file mode 100644 index 83f3eaea94..0000000000 --- a/public/docs/_examples/quickstart-old/src/dummy.spec.ts +++ /dev/null @@ -1,9 +0,0 @@ -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/quickstart-old/src/tsconfig.json b/public/docs/_examples/quickstart-old/src/tsconfig.json deleted file mode 100644 index 24f8573a6f..0000000000 --- a/public/docs/_examples/quickstart-old/src/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "compilerOptions": { - "target": "ES5", - "module": "commonjs", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true - } -} \ No newline at end of file diff --git a/public/docs/_examples/quickstart-old/src/tsd.json b/public/docs/_examples/quickstart-old/src/tsd.json deleted file mode 100644 index 0bed83f7e6..0000000000 --- a/public/docs/_examples/quickstart-old/src/tsd.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "version": "v4", - "repo": "borisyankov/DefinitelyTyped", - "ref": "master", - "path": "typings", - "bundle": "typings/tsd.d.ts", - "installed": { - "angular2/angular2.d.ts": { - "commit": "cd2e71bb1f0459197e733be66fdeafaec600514d" - }, - "es6-promise/es6-promise.d.ts": { - "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7" - }, - "jasmine/jasmine.d.ts": { - "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7" - }, - "rx/rx.d.ts": { - "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7" - }, - "rx/rx-lite.d.ts": { - "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7" - } - } -} diff --git a/public/docs/_examples/quickstart-old/unit-tests.html b/public/docs/_examples/quickstart-old/unit-tests.html deleted file mode 100644 index d892e4b817..0000000000 --- a/public/docs/_examples/quickstart-old/unit-tests.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - -QuickStart Tests - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/docs/js/latest/quickstart-old.jade b/public/docs/js/latest/quickstart-old.jade deleted file mode 100644 index f5eec2aa35..0000000000 --- a/public/docs/js/latest/quickstart-old.jade +++ /dev/null @@ -1,261 +0,0 @@ -.callout.is-helpful - header Angular is in developer preview - p. - This quickstart does not reflect the final development process for writing apps with Angular. - The following setup is for those who want to try out Angular while it is in developer preview. - -// STEP 1 - Create a project ########################## -.l-main-section - h2#section-create-project 1. Create a project - - p. - This quickstart shows how to write your Angular components in TypeScript. You could instead choose - another language such as Dart, ES5, or ES6. - - p. - The goal of this quickstart is to write a component in TypeScript that prints a string. - We assume you have already installed Node and npm. - - p. - To get started, create a new empty project directory. All the following commands should be run - from this directory. - - p. - To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor. - TypeScript type definitions are typically published in a repo called DefinitelyTyped. - To fetch one of the type definitions to the local directory, we use the tsd package manager. - - code-example. - $ npm install -g tsd@^0.6.0 - $ tsd install angular2 es6-promise rx rx-lite - - p. - Next, create two empty files, index.html and app.ts, both at the root of the project: - - code-example. - $ touch app.ts index.html - -// STEP 2 - Start the TypeScript compiler ########################## -.l-main-section - h2#start-tsc 2. Run the TypeScript compiler - - p. - Since the browser doesn't understand TypeScript code, we need to run a compiler to translate - your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript - compiler in --watch mode, but it is also possible to do the translation in the browser as files - are loaded, or configure your editor or IDE to do it. - - code-example. - $ npm install -g typescript@^1.5.0 - $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts - -.callout.is-helpful - p. - Windows users: if you get an error that an option is unknown, you are probably running - an older version of TypeScript. - See - Stack Overflow: How do I install Typescript - -// STEP 3 - Import Angular ########################## -.l-main-section - h2#section-transpile 3. Import Angular - - p Inside of app.ts, import the type definitions from Angular: - code-example. - /// <reference path="typings/angular2/angular2.d.ts" /> - - p Now your editor should be able to complete the available imports: - code-example. - import {Component, View, bootstrap} from 'angular2/angular2'; - - p. - The above import statement uses ES6 module syntax to import three symbols from the Angular module. - The module will load at runtime. - - -// STEP 4 - Create a component ########################## -.l-main-section - - h2#section-angular-create-account 4. Define a component - - p. - Components structure and represent the UI. This quickstart demonstrates the process of creating a component - that has an HTML tag named <my-app>. - - p. - A component consists of two parts, the component controller - which is an ES6 class, and the decorators which tell Angular - how to place the component into the page. - - code-example(language="javascript" format="linenums"). - // Annotation section - @Component({ - selector: 'my-app' - }) - @View({ - template: '<h1>Hello {{ name }}</h1>' - }) - // Component controller - class MyAppComponent { - name: string; - - constructor() { - this.name = 'Alice'; - } - } - - .l-sub-section - h3 @Component and @View annotations - - p. - A component annotation describes details about the component. An annotation can be identified by its at-sign (@). - p. - The @Component annotation defines the HTML tag for the component by specifying the component's CSS selector. - p. - The @View annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a templateUrl property and give it the path to the HTML file. - - code-example(language="javascript" format="linenums"). - @Component({ - selector: 'my-app' // Defines the <my-app></my-app> tag - }) - @View({ - template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component - }) - - p. - The annotations above specify an HTML tag of <my-app> - and a template of <h1>Hello {{ name }}</h1>. - - .l-sub-section - h3 The template and the component controller - - p. - The component controller is the backing of the component's template. This component - controller uses TypeScript class syntax. - - code-example(language="javascript" format="linenums"). - class MyAppComponent { - name: string; - constructor() { - this.name = 'Alice'; - } - } - - p. - Templates read from their component controllers. Templates have access to any properties - or functions placed on the component controller. - - p. - The template above binds to a name property through - the double-mustache syntax ({{ ... }}). - The body of the constructor assigns "Alice" to the name property. When the - template renders, "Hello Alice" appears instead of - "Hello {{ name }}". - - - -// STEP 5 - Bootstrap ########################## -.l-main-section - h2#section-transpile 5. Bootstrap - - p. - At the bottom of app.ts, call the bootstrap() function - to load your new component into its page: - - code-example(language="javaScript"). - bootstrap(MyAppComponent); - - - p. - The bootstrap() function takes a - component as a parameter, enabling the component - (as well as any child components it contains) to render. - - -// STEP 6 - Declare the HTML ########################## -.l-main-section - - h2#section-angular-create-account 6. Declare the HTML - - p. - Inside the head tag of index.html, - include the traceur-runtime and the Angular bundle. - Instantiate the my-app component in the body. - - code-example(language="html" format="linenums"). - <!-- index.html --> - <html> - <head> - <title>Angular 2 Quickstart</title> - <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> - <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script> - </head> - <body> - - <!-- The app component created in app.ts --> - <my-app></my-app> - - </body> - </html> - -// STEP 7 - Declare the HTML ########################## -.l-main-section - - h2#section-load-component-module 7. Load the component - - p. - The last step is to load the module for the my-app component. - To do this, we'll use the System library. - - .l-sub-section - h3 System.js - - p. - System is a third-party open-source library that - adds ES6 module loading functionality to browsers. - - p. - Add the System.js dependency in the <head> tag, so that - it looks like: - - code-example(language="html" format="linenums"). - <head> - <title>Angular 2 Quickstart</title> - <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> - <script src="https://jspm.io/system@0.16.js"></script> - <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script> - </head> - - p. - Add the following module-loading code: - - code-example(language="html" format="linenums"). - <my-app></my-app> - <script>System.import('app');</script> - - -// STEP 8 - Run a local server ########################## -.l-main-section - - h2#section-load-component-module 8. Run a local server - - p Run a local HTTP server, and view index.html. - - p. - If you don't already have an HTTP server, - you can install one using npm install -g http-server. - (If that results in an access error, then you might need to use - sudo npm ....) - - p For example: - - code-example. - # From the directory that contains index.html: - npm install -g http-server # Or sudo npm install -g http-server - http-server # Creates a server at localhost:8080 - # In a browser, visit localhost:8080/index.html - - -// WHAT'S NEXT... ########################## -.l-main-section - h2#section-transpile Great job! We'll have the next steps out soon. diff --git a/public/docs/ts/latest/quickstart-old.jade b/public/docs/ts/latest/quickstart-old.jade deleted file mode 100644 index 1b1625fefa..0000000000 --- a/public/docs/ts/latest/quickstart-old.jade +++ /dev/null @@ -1,260 +0,0 @@ -.callout.is-helpful - header Angular is in developer preview - p. - This quickstart does not reflect the final development process for writing apps with Angular. - The following setup is for those who want to try out Angular while it is in developer preview. - -// STEP 1 - Create a project ########################## -.l-main-section - h2#section-create-project 1. Create a project - - p. - This quickstart shows how to write your Angular components in TypeScript. You could instead choose - another language such as Dart, ES5, or ES6. - - p. - The goal of this quickstart is to write a component in TypeScript that prints a string. - We assume you have already installed Node and npm. - - p. - To get started, create a new empty project directory. All the following commands should be run - from this directory. - - p. - To get the benefits of TypeScript, we want to have the type definitions available for the compiler and the editor. - TypeScript type definitions are typically published in a repo called DefinitelyTyped. - To fetch one of the type definitions to the local directory, we use the tsd package manager. - - code-example. - $ npm install -g tsd@^0.6.0 - $ tsd install angular2 es6-promise rx rx-lite - - p. - Next, create two empty files, index.html and app.ts, both at the root of the project: - - code-example. - $ touch app.ts index.html - -// STEP 2 - Start the TypeScript compiler ########################## -.l-main-section - h2#start-tsc 2. Run the TypeScript compiler - - p. - Since the browser doesn't understand TypeScript code, we need to run a compiler to translate - your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript - compiler in --watch mode, but it is also possible to do the translation in the browser as files - are loaded, or configure your editor or IDE to do it. - - code-example. - $ npm install -g typescript@^1.5.0-beta - $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts - -.callout.is-helpful - p. - Windows users: if you get an error that an option is unknown, you are probably running - an older version of TypeScript. - See - Stack Overflow: How do I install Typescript - -// STEP 3 - Import Angular ########################## -.l-main-section - h2#section-transpile 3. Import Angular - - p Inside of app.ts, import the type definitions from Angular: - code-example. - /// <reference path="typings/angular2/angular2.d.ts" /> - - p Now your editor should be able to complete the available imports: - code-example. - import {Component, View, bootstrap} from 'angular2/angular2'; - - p. - The above import statement uses ES6 module syntax to import three symbols from the Angular module. - The module will load at runtime. - - -// STEP 4 - Create a component ########################## -.l-main-section - - h2#section-angular-create-account 4. Define a component - - p. - Components structure and represent the UI. This quickstart demonstrates the process of creating a component - that has an HTML tag named <my-app>. - - p. - A component consists of two parts, the component controller - which is an ES6 class, and the decorators which tell Angular - how to place the component into the page. - - code-example(language="javascript" format="linenums"). - // Annotation section - @Component({ - selector: 'my-app' - }) - @View({ - template: '<h1>Hello {{ name }}</h1>' - }) - // Component controller - class MyAppComponent { - name: string; - - constructor() { - this.name = 'Alice'; - } - } - - .l-sub-section - h3 @Component and @View annotations - - p. - A component annotation describes details about the component. An annotation can be identified by its at-sign (@). - p. - The @Component annotation defines the HTML tag for the component by specifying the component's CSS selector. - p. - The @View annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a templateUrl property and give it the path to the HTML file. - - code-example(language="javascript" format="linenums"). - @Component({ - selector: 'my-app' // Defines the <my-app></my-app> tag - }) - @View({ - template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component - }) - - p. - The annotations above specify an HTML tag of <my-app> - and a template of <h1>Hello {{ name }}</h1>. - - .l-sub-section - h3 The template and the component controller - - p. - The component controller is the backing of the component's template. This component - controller uses TypeScript class syntax. - - code-example(language="javascript" format="linenums"). - class MyAppComponent { - name: string; - constructor() { - this.name = 'Alice'; - } - } - - p. - Templates read from their component controllers. Templates have access to any properties - or functions placed on the component controller. - - p. - The template above binds to a name property through - the double-mustache syntax ({{ ... }}). - The body of the constructor assigns "Alice" to the name property. When the - template renders, "Hello Alice" appears instead of - "Hello {{ name }}". - - - -// STEP 5 - Bootstrap ########################## -.l-main-section - h2#section-transpile 5. Bootstrap - - p. - At the bottom of app.ts, call the bootstrap() function - to load your new component into its page: - - code-example(language="javaScript"). - bootstrap(MyAppComponent); - - - p. - The bootstrap() function takes a - component as a parameter, enabling the component - (as well as any child components it contains) to render. - - -// STEP 6 - Declare the HTML ########################## -.l-main-section - - h2#section-angular-create-account 6. Declare the HTML - - p. - Inside the head tag of index.html, - include the traceur-runtime and the Angular bundle. - Instantiate the my-app component in the body. - - code-example(language="html" format="linenums"). - <!-- index.html --> - <html> - <head> - <title>Angular 2 Quickstart</title> - <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> - <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script> - </head> - <body> - - <!-- The app component created in app.ts --> - <my-app></my-app> - - </body> - </html> - -// STEP 7 - Declare the HTML ########################## -.l-main-section - - h2#section-load-component-module 7. Load the component - - p. - The last step is to load the module for the my-app component. - To do this, we'll use the System library. - - .l-sub-section - h3 System.js - - p. - System is a third-party open-source library that - adds ES6 module loading functionality to browsers. - - p. - Add the System.js dependency in the <head> tag, so that - it looks like: - - code-example(language="html" format="linenums"). - <head> - <title>Angular 2 Quickstart</title> - <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> - <script src="https://jspm.io/system@0.16.js"></script> - <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script> - </head> - - p. - Add the following module-loading code: - - code-example(language="html" format="linenums"). - <my-app></my-app> - <script>System.import('app');</script> - - -// STEP 8 - Run a local server ########################## -.l-main-section - - h2#section-load-component-module 8. Run a local server - - p Run a local HTTP server, and view index.html. - - p. - If you don't already have an HTTP server, - you can install one using npm install -g http-server. - (If that results in an access error, then you might need to use - sudo npm ...) - For example: - - code-example. - # From the directory that contains index.html: - npm install -g http-server # Or sudo npm install -g http-server - http-server # Creates a server at localhost:8080 - # In a browser, visit localhost:8080/index.html - - -// WHAT'S NEXT... ########################## -.l-main-section - h2#section-transpile Great job! We'll have the next steps out soon.