diff --git a/public/docs/_examples/architecture/ts/app/boot.ts b/public/docs/_examples/architecture/ts/app/main.ts similarity index 100% rename from public/docs/_examples/architecture/ts/app/boot.ts rename to public/docs/_examples/architecture/ts/app/main.ts diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html index a562ab4c8a..8611c6db69 100644 --- a/public/docs/_examples/architecture/ts/index.html +++ b/public/docs/_examples/architecture/ts/index.html @@ -19,7 +19,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/displaying-data/ts/app/boot.1.ts b/public/docs/_examples/displaying-data/ts/app/main.1.ts similarity index 100% rename from public/docs/_examples/displaying-data/ts/app/boot.1.ts rename to public/docs/_examples/displaying-data/ts/app/main.1.ts diff --git a/public/docs/_examples/displaying-data/ts/app/boot.ts b/public/docs/_examples/displaying-data/ts/app/main.ts similarity index 100% rename from public/docs/_examples/displaying-data/ts/app/boot.ts rename to public/docs/_examples/displaying-data/ts/app/main.ts diff --git a/public/docs/_examples/displaying-data/ts/index.1.html b/public/docs/_examples/displaying-data/ts/index.1.html index 4db780010b..667150dbab 100644 --- a/public/docs/_examples/displaying-data/ts/index.1.html +++ b/public/docs/_examples/displaying-data/ts/index.1.html @@ -20,7 +20,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html index 5cad659faa..c4458f2445 100644 --- a/public/docs/_examples/displaying-data/ts/index.html +++ b/public/docs/_examples/displaying-data/ts/index.html @@ -20,7 +20,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/forms/js/app/boot.js b/public/docs/_examples/forms/js/app/main.js similarity index 100% rename from public/docs/_examples/forms/js/app/boot.js rename to public/docs/_examples/forms/js/app/main.js diff --git a/public/docs/_examples/forms/js/index.html b/public/docs/_examples/forms/js/index.html index 6ca5eb1bd4..667ca582d4 100644 --- a/public/docs/_examples/forms/js/index.html +++ b/public/docs/_examples/forms/js/index.html @@ -25,7 +25,7 @@ - + diff --git a/public/docs/_examples/forms/ts/app/boot.ts b/public/docs/_examples/forms/ts/app/main.ts similarity index 100% rename from public/docs/_examples/forms/ts/app/boot.ts rename to public/docs/_examples/forms/ts/app/main.ts diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html index 2556433619..5e10856fe2 100644 --- a/public/docs/_examples/forms/ts/index.html +++ b/public/docs/_examples/forms/ts/index.html @@ -28,7 +28,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/boot.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts similarity index 100% rename from public/docs/_examples/hierarchical-dependency-injection/ts/app/boot.ts rename to public/docs/_examples/hierarchical-dependency-injection/ts/app/main.ts diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html index f4b7bad028..082f30eda0 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html @@ -20,7 +20,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/boot.ts b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts similarity index 100% rename from public/docs/_examples/lifecycle-hooks/ts/app/boot.ts rename to public/docs/_examples/lifecycle-hooks/ts/app/main.ts diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html index 10aeaaabdd..bf1d1d1caf 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/index.html +++ b/public/docs/_examples/lifecycle-hooks/ts/index.html @@ -21,7 +21,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/pipes/ts/app/boot.ts b/public/docs/_examples/pipes/ts/app/main.ts similarity index 100% rename from public/docs/_examples/pipes/ts/app/boot.ts rename to public/docs/_examples/pipes/ts/app/main.ts diff --git a/public/docs/_examples/pipes/ts/index.html b/public/docs/_examples/pipes/ts/index.html index 0bb0cebe87..2678b59052 100644 --- a/public/docs/_examples/pipes/ts/index.html +++ b/public/docs/_examples/pipes/ts/index.html @@ -20,7 +20,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/quickstart/js/app/boot.js b/public/docs/_examples/quickstart/js/app/main.js similarity index 100% rename from public/docs/_examples/quickstart/js/app/boot.js rename to public/docs/_examples/quickstart/js/app/main.js diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html index ae21b52c7d..327dfe33b5 100644 --- a/public/docs/_examples/quickstart/js/index.html +++ b/public/docs/_examples/quickstart/js/index.html @@ -20,7 +20,7 @@ - + diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 8adc7289ee..a96fcbd948 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -7,7 +7,7 @@ }, "license": "ISC", "dependencies": { - "angular2": "2.0.0-beta.0", + "angular2": "2.0.0-beta.2", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", diff --git a/public/docs/_examples/quickstart/ts/app/boot.ts b/public/docs/_examples/quickstart/ts/app/main.ts similarity index 100% rename from public/docs/_examples/quickstart/ts/app/boot.ts rename to public/docs/_examples/quickstart/ts/app/main.ts diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html index d535593c7f..eedea2c259 100644 --- a/public/docs/_examples/quickstart/ts/index.html +++ b/public/docs/_examples/quickstart/ts/index.html @@ -30,7 +30,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/quickstart/ts/tsconfig.1.json b/public/docs/_examples/quickstart/ts/tsconfig.1.json index 7010bb63b5..77b8221482 100644 --- a/public/docs/_examples/quickstart/ts/tsconfig.1.json +++ b/public/docs/_examples/quickstart/ts/tsconfig.1.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "ES5", + "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, diff --git a/public/docs/_examples/router/ts/app/boot.1.ts b/public/docs/_examples/router/ts/app/main.1.ts similarity index 100% rename from public/docs/_examples/router/ts/app/boot.1.ts rename to public/docs/_examples/router/ts/app/main.1.ts diff --git a/public/docs/_examples/router/ts/app/boot.2.ts b/public/docs/_examples/router/ts/app/main.2.ts similarity index 100% rename from public/docs/_examples/router/ts/app/boot.2.ts rename to public/docs/_examples/router/ts/app/main.2.ts diff --git a/public/docs/_examples/router/ts/app/boot.3.ts b/public/docs/_examples/router/ts/app/main.3.ts similarity index 100% rename from public/docs/_examples/router/ts/app/boot.3.ts rename to public/docs/_examples/router/ts/app/main.3.ts diff --git a/public/docs/_examples/router/ts/app/boot.ts b/public/docs/_examples/router/ts/app/main.ts similarity index 100% rename from public/docs/_examples/router/ts/app/boot.ts rename to public/docs/_examples/router/ts/app/main.ts diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html index 9799df9f55..13e8c25d3a 100644 --- a/public/docs/_examples/router/ts/index.1.html +++ b/public/docs/_examples/router/ts/index.1.html @@ -29,7 +29,7 @@ } } }); - System.import('app/boot.1') // <----- ONLY CHANGE + System.import('app/main.1') // <----- ONLY CHANGE .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html index e53a4725ce..9e3e418574 100644 --- a/public/docs/_examples/router/ts/index.2.html +++ b/public/docs/_examples/router/ts/index.2.html @@ -23,7 +23,7 @@ } } }); - System.import('app/boot.2') // <----- ONLY CHANGE + System.import('app/main.2') // <----- ONLY CHANGE .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/router/ts/index.3.html index 1c5e9c58ee..fe7969e676 100644 --- a/public/docs/_examples/router/ts/index.3.html +++ b/public/docs/_examples/router/ts/index.3.html @@ -23,7 +23,7 @@ } } }); - System.import('app/boot.3') // <----- ONLY CHANGE + System.import('app/main.3') // <----- ONLY CHANGE .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html index c74d257763..80ad261bcc 100644 --- a/public/docs/_examples/router/ts/index.html +++ b/public/docs/_examples/router/ts/index.html @@ -35,7 +35,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/structural-directives/ts/app/boot.ts b/public/docs/_examples/structural-directives/ts/app/main.ts similarity index 100% rename from public/docs/_examples/structural-directives/ts/app/boot.ts rename to public/docs/_examples/structural-directives/ts/app/main.ts diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html index 31c7206e34..ce1d0f5d8e 100644 --- a/public/docs/_examples/structural-directives/ts/index.html +++ b/public/docs/_examples/structural-directives/ts/index.html @@ -21,7 +21,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/template-syntax/ts/app/boot.ts b/public/docs/_examples/template-syntax/ts/app/main.ts similarity index 100% rename from public/docs/_examples/template-syntax/ts/app/boot.ts rename to public/docs/_examples/template-syntax/ts/app/main.ts diff --git a/public/docs/_examples/template-syntax/ts/index.html b/public/docs/_examples/template-syntax/ts/index.html index f6c1a72c8d..e079094a2d 100644 --- a/public/docs/_examples/template-syntax/ts/index.html +++ b/public/docs/_examples/template-syntax/ts/index.html @@ -21,7 +21,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/_examples/toh-1/ts/app/boot.ts b/public/docs/_examples/toh-1/ts/app/main.ts similarity index 100% rename from public/docs/_examples/toh-1/ts/app/boot.ts rename to public/docs/_examples/toh-1/ts/app/main.ts diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html index 8709602759..5cadcb3917 100644 --- a/public/docs/_examples/toh-1/ts/index.html +++ b/public/docs/_examples/toh-1/ts/index.html @@ -12,7 +12,7 @@ diff --git a/public/docs/_examples/toh-2/ts/app/boot.ts b/public/docs/_examples/toh-2/ts/app/main.ts similarity index 100% rename from public/docs/_examples/toh-2/ts/app/boot.ts rename to public/docs/_examples/toh-2/ts/app/main.ts diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html index 8709602759..5cadcb3917 100644 --- a/public/docs/_examples/toh-2/ts/index.html +++ b/public/docs/_examples/toh-2/ts/index.html @@ -12,7 +12,7 @@ diff --git a/public/docs/_examples/toh-3/ts/app/boot.ts b/public/docs/_examples/toh-3/ts/app/main.ts similarity index 100% rename from public/docs/_examples/toh-3/ts/app/boot.ts rename to public/docs/_examples/toh-3/ts/app/main.ts diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html index 8709602759..5cadcb3917 100644 --- a/public/docs/_examples/toh-3/ts/index.html +++ b/public/docs/_examples/toh-3/ts/index.html @@ -12,7 +12,7 @@ diff --git a/public/docs/_examples/toh-4/ts/app/boot.1.js b/public/docs/_examples/toh-4/ts/app/boot.1.js index 0c373af4ba..639ce566e8 100644 --- a/public/docs/_examples/toh-4/ts/app/boot.1.js +++ b/public/docs/_examples/toh-4/ts/app/boot.1.js @@ -13,4 +13,4 @@ System.register(['angular2/platform/browser', './app.component.1'], function(exp } } }); -//# sourceMappingURL=boot.1.js.map \ No newline at end of file +//# sourceMappingURL=main.1.js.map \ No newline at end of file diff --git a/public/docs/_examples/toh-4/ts/app/boot.js b/public/docs/_examples/toh-4/ts/app/boot.js index 96b66376fc..da70522909 100644 --- a/public/docs/_examples/toh-4/ts/app/boot.js +++ b/public/docs/_examples/toh-4/ts/app/boot.js @@ -13,4 +13,4 @@ System.register(['angular2/platform/browser', './app.component'], function(expor } } }); -//# sourceMappingURL=boot.js.map \ No newline at end of file +//# sourceMappingURL=main.js.map \ No newline at end of file diff --git a/public/docs/_examples/toh-4/ts/app/boot.1.ts b/public/docs/_examples/toh-4/ts/app/main.1.ts similarity index 100% rename from public/docs/_examples/toh-4/ts/app/boot.1.ts rename to public/docs/_examples/toh-4/ts/app/main.1.ts diff --git a/public/docs/_examples/toh-4/ts/app/boot.ts b/public/docs/_examples/toh-4/ts/app/main.ts similarity index 100% rename from public/docs/_examples/toh-4/ts/app/boot.ts rename to public/docs/_examples/toh-4/ts/app/main.ts diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html index 8709602759..5cadcb3917 100644 --- a/public/docs/_examples/toh-4/ts/index.html +++ b/public/docs/_examples/toh-4/ts/index.html @@ -12,7 +12,7 @@ diff --git a/public/docs/_examples/toh-5/ts-snippets/app/bootstrap.pt4.ts b/public/docs/_examples/toh-5/ts-snippets/app/main.pt4.ts similarity index 100% rename from public/docs/_examples/toh-5/ts-snippets/app/bootstrap.pt4.ts rename to public/docs/_examples/toh-5/ts-snippets/app/main.pt4.ts diff --git a/public/docs/_examples/tutorial/ts/app/boot.ts b/public/docs/_examples/tutorial/ts/app/main.ts similarity index 100% rename from public/docs/_examples/tutorial/ts/app/boot.ts rename to public/docs/_examples/tutorial/ts/app/main.ts diff --git a/public/docs/_examples/tutorial/ts/index.html b/public/docs/_examples/tutorial/ts/index.html index b30caa1ea1..09c9d27572 100644 --- a/public/docs/_examples/tutorial/ts/index.html +++ b/public/docs/_examples/tutorial/ts/index.html @@ -15,7 +15,7 @@ diff --git a/public/docs/_examples/user-input/ts/app/boot.ts b/public/docs/_examples/user-input/ts/app/main.ts similarity index 100% rename from public/docs/_examples/user-input/ts/app/boot.ts rename to public/docs/_examples/user-input/ts/app/main.ts diff --git a/public/docs/_examples/user-input/ts/index.html b/public/docs/_examples/user-input/ts/index.html index 7120a99752..5aa8add16e 100644 --- a/public/docs/_examples/user-input/ts/index.html +++ b/public/docs/_examples/user-input/ts/index.html @@ -21,7 +21,7 @@ } } }); - System.import('app/boot') + System.import('app/main') .then(null, console.error.bind(console)); diff --git a/public/docs/js/latest/guide/forms.jade b/public/docs/js/latest/guide/forms.jade index 5e66a8853a..9d54d75d80 100644 --- a/public/docs/js/latest/guide/forms.jade +++ b/public/docs/js/latest/guide/forms.jade @@ -605,19 +605,20 @@ figure.image-display - Custom CSS classes that provide visual feedback to users about invalid controls. Our final project folder structure should look like this: -code-example(format=""). - angular2-forms - ├── node_modules - ├── app - | ├── app.component.js - | ├── boot.js - | ├── hero.js - | ├── hero-form.component.html - | └── hero-form.component.js - ├── index.html - ├── styles.css - ├── tsconfig.json - └── package.json +.filetree + .file angular2-forms + .children + .file node_modules + .file app + .children + .file app.component.js + .file hero.js + .file hero-form.component.html + .file hero-form.component.js + .file main.ts + .file index.html + .file package.json + .file styles.cs :marked Here’s the final version of the source: @@ -626,7 +627,7 @@ code-example(format=""). forms/js/app/hero-form.component.html, forms/js/app/hero.js, forms/js/app/app.component.js, - forms/js/app/boot.js, + forms/js/app/main.js, forms/js/index.html, forms/js/styles.css`, 'final, final,,,,,', @@ -634,7 +635,7 @@ code-example(format=""). hero-form.component.html, hero.js, app.component.js, - boot.js, + main.js, index.html, styles.css`) :marked diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 3084a9e5ea..aaf8ebdfd6 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -29,7 +29,7 @@ figure.image-display .file app .children .file app.component.js - .file boot.js + .file main.js .file index.html .file license.md :marked @@ -166,7 +166,7 @@ code-example(format=""). provided by another module, we get it from the `app` object. When another module needs to refer to `AppComponent`, it gets it from the `app.AppComponent` like this: -+makeExample('quickstart/js/app/boot.js', 'import','app/boot.js (import)')(format=".") ++makeExample('quickstart/js/app/main.js', 'import','app/main.js (import)')(format=".") :marked Angular is also modular. It is a collection of library modules. @@ -209,10 +209,10 @@ code-example(format=""). Now we need something to tell Angular to load this component. - ### Give it the boot + ### Bootstrap it! - Add a new file , `boot.js`, to the `app/` folder as follows: -+makeExample('quickstart/js/app/boot.js', null, 'app/boot.js')(format=".") + Add a new file , `main.js`, to the `app/` folder as follows: ++makeExample('quickstart/js/app/main.js', null, 'app/main.js')(format=".") :marked We need two things to launch the application: 1. Angular's browser `bootstrap` function @@ -224,7 +224,7 @@ code-example(format=""). .l-sub-section :marked Learn why we need `bootstrap` from `ng.platform.browser` - and why we create a separate *boot.js* file in the [appendix below](#boot). + and why we create a separate *main.js* file in the [appendix below](#main). :marked We've asked Angular to launch the app in a browser with our component at the root. Where will Angular put it? @@ -249,11 +249,11 @@ code-example(format=""). 1. We load the JavaScript libraries we need; learn about them [below](#libraries). - 2. We load our JavaScript files, paying attention to their order (`boot.js` needs `app.component.js` to be there first). + 2. We load our JavaScript files, paying attention to their order (`main.js` needs `app.component.js` to be there first). 3. We add the `` tag in the ``. **This is where our app lives!** - When Angular calls the `bootstrap` function in `boot.js`, it reads the `AppComponent` + When Angular calls the `bootstrap` function in `main.js`, it reads the `AppComponent` metadata, finds the `my-app` selector, locates an element tag named `my-app`, and loads our application between those tags. @@ -303,18 +303,18 @@ figure.image-display .file app .children .file app.component.js - .file boot.js + .file main.js .file index.html .file package.json :marked And here are the files: +makeTabs(` quickstart/js/app/app.component.js, - quickstart/js/app/boot.js, + quickstart/js/app/main.js, quickstart/js/index.html, quickstart/js/package.1.json `,null, - `app/app.component.js, app/boot.js, index.html,package.json`) + `app/app.component.js, app/main.js, index.html,package.json`) :marked .l-main-section @@ -437,8 +437,8 @@ code-example(format=""). .l-main-section :marked - - ### Appendix: ***boot.js*** + + ### Appendix: ***main.js*** #### Bootstrapping is platform-specific We use the `bootstrap` function from `ng.platform.browser`, @@ -456,9 +456,9 @@ code-example(format=""). These targets require a different kind of bootstrap function that we'd import from a different library. - #### Why do we create a separate ***boot.js*** file? + #### Why do we create a separate ***main.js*** file? - The *boot.js* file is tiny. This is just a QuickStart. + The *main.js* file is tiny. This is just a QuickStart. We could have folded its few lines into the `app.component.js` file and spared ourselves some complexity. @@ -472,7 +472,7 @@ code-example(format=""). #### It's easy Sure it's an extra step and an extra file. How hard is that in the scheme of things? - We'll see that a separate `boot.js` is beneficial for *most* apps + We'll see that a separate `main.js` is beneficial for *most* apps even if it isn't critical for the QuickStart. Let's develop good habits now while the cost is low. @@ -486,7 +486,7 @@ code-example(format=""). It throws an error because we're not expecting to run the entire application, just test the component. - Relocating the `bootstrap` function to `boot.js` eliminates this spurious error + Relocating the `bootstrap` function to `main.js` eliminates this spurious error and leaves us with a clean component module file. #### Reusability @@ -505,7 +505,7 @@ code-example(format=""). #### Import/Export - While writing a separate `boot.js` file we learned an essential Angular skill: + While writing a separate `main.js` file we learned an essential Angular skill: how to 'export' from one 'module' and 'import' into another via our simple namespace abstraction. We'll do a lot of that as we learn more Angular. diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index 47d4742a74..2db039e9fe 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -74,7 +74,7 @@ figure `AppComponent` class is public and accessible to other modules of the application. When we need a reference to the `AppComponent`, we **import** it like this: -+makeExample('architecture/ts/app/boot.ts', 'import', 'app/boot.ts (excerpt)')(format=".") ++makeExample('architecture/ts/app/main.ts', 'import', 'app/main.ts (excerpt)')(format=".") :marked The `import` statement tells the system it can get an `AppComponent` from a module named `app.component` located in a neighboring file. @@ -102,7 +102,7 @@ figure +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".") :marked Compare that syntax to our previous import of `AppComponent`. -+makeExample('architecture/ts/app/boot.ts', 'import')(format=".") ++makeExample('architecture/ts/app/main.ts', 'import')(format=".") :marked Notice the difference? In the first case, when importing from an Angular library module, @@ -461,7 +461,7 @@ figure We can register providers at any level of the application component tree. We often do so at the root when we bootstrap the application so that the same instance of a service is available everywhere. -+makeExample('architecture/ts/app/boot.ts', 'bootstrap','app/boot.ts (excerpt)')(format=".") ++makeExample('architecture/ts/app/main.ts', 'bootstrap','app/main.ts (excerpt)')(format=".") :marked Alternatively, we might register at a component level ... +makeExample('architecture/ts/app/hero-list.component.ts', 'providers','app/hero-list.component.ts (excerpt)')(format=".") diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade index b05544116b..f7f416d645 100644 --- a/public/docs/ts/latest/guide/displaying-data.jade +++ b/public/docs/ts/latest/guide/displaying-data.jade @@ -69,7 +69,7 @@ figure.image-display +makeExample('displaying-data/ts/index.html', 'my-app')(format=".") :marked - When we bootstrap with the `AppComponent` class (see `boot.ts`), Angular looks for a `` + When we bootstrap with the `AppComponent` class (see `main.ts`), Angular looks for a `` in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it inside the `` tag. @@ -255,6 +255,6 @@ figure.image-display +makeTabs(`displaying-data/ts/app/app.component.ts, displaying-data/ts/app/hero.ts, - displaying-data/ts/app/boot.ts`, + displaying-data/ts/app/main.ts`, 'final,,', - 'app/app.component.ts, app/hero.ts, boot.ts') + 'app/app.component.ts, app/hero.ts, main.ts') diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index 109b14d2cb..7cf3d35098 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -603,19 +603,21 @@ figure.image-display - Custom CSS classes that provide visual feedback to users about invalid controls. Our final project folder structure should look like this: -code-example(format=""). - angular2-forms - ├── node_modules - ├── app - | ├── app.component.ts - | ├── boot.ts - | ├── hero.ts - | ├── hero-form.component.html - | └── hero-form.component.ts - ├── index.html - ├── styles.css - ├── tsconfig.json - └── package.json +.filetree + .file angular2-forms + .children + .file node_modules + .file app + .children + .file app.component.ts + .file hero.ts + .file hero-form.component.html + .file hero-form.component.ts + .file main.ts + .file index.html + .file package.json + .file styles.cs + .file tsconfig.json :marked Here’s the final version of the source: @@ -624,7 +626,7 @@ code-example(format=""). forms/ts/app/hero-form.component.html, forms/ts/app/hero.ts, forms/ts/app/app.component.ts, - forms/ts/app/boot.ts, + forms/ts/app/main.ts, forms/ts/index.html, forms/ts/styles.css`, 'final, final,,,,,', @@ -632,7 +634,7 @@ code-example(format=""). hero-form.component.html, hero.ts, app.component.ts, - boot.ts, + main.ts, index.html, styles.css`) :marked diff --git a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade index b06183be6e..26bcbb7f9c 100644 --- a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade +++ b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade @@ -143,7 +143,7 @@ figure.image-display This adds a `RestoreService` provider to the injector of the `HeroEditComponent`. Couldn’t we simply alter our bootstrap call to this? -+makeExample('hierarchical-dependency-injection/ts/app/boot.ts', 'bad-alternative') ++makeExample('hierarchical-dependency-injection/ts/app/main.ts', 'bad-alternative') :marked Technically we could, but our component wouldn’t quite behave the way it is supposed to. Remember that each injector treats the services that it provides as singletons. However, in order to be able to have multiple instances of `HeroEditComponent` edit multiple heroes at the same time we need to have multiple instances of the `RestoreService`. More specifically each instance of `HeroEditComponent` needs to be bound to it’s own instance of the `RestoreService`. diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 85adbfb3f3..40536e4050 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -320,9 +320,9 @@ figure.image-display We should only need this trick for the live example, not production code. :marked ### Booting with the router service providers - Our app launches from the `boot.ts` file in the `/app` folder so let's start there. + Our app launches from the `main.ts` file in the `/app` folder so let's start there. It's short and all of it is relevant to routing. -+makeExample('router/ts/app/boot.1.ts','all', 'boot.ts')(format=".") ++makeExample('router/ts/app/main.1.ts','all', 'main.ts')(format=".") :marked We import our root `AppComponent` and Angular's `bootstrap` function as expected. @@ -432,9 +432,9 @@ figure.image-display .file app .children .file app.component.ts - .file boot.ts .file crisis-list.component.ts .file hero-list.component.ts + .file main.ts .file index.html .file styles.css .file tsconfig.json @@ -443,13 +443,13 @@ figure.image-display Here are the files discussed in this milestone +makeTabs( `router/ts/app/app.component.1.ts, - router/ts/app/boot.1.ts, + router/ts/app/main.1.ts, router/ts/app/hero-list.component.ts, router/ts/app/crisis-list.component.ts, router/ts/index.html`, ',all,,', `app.component.ts, - boot.ts, + main.ts, hero-list.component.ts, crisis-list.component.ts, index.html`) @@ -550,8 +550,18 @@ code-example(format="." language="bash"). :marked If a user enters that URL into the browser address bar, the router should recognize the pattern and go to the same "Magneta" detail view. +.l-sub-section + :marked + #### Route parameter or query parameter? + Embedding the route parameter token, `:id`, in the route definition path is a good choice for our scenario + because the `id` is *required* by the `HeroDetailComponent` and because + the value `15` in the path clearly distinguishes the route to "Magneta" from + a route for some other hero. + + A [query parameter](#query-parameter) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`. - + +:marked ### Navigate to the detail imperatively *We don't navigate to the detail component by clicking a link*. @@ -643,12 +653,12 @@ code-example(format="." language="bash"). .children .file heroes .children + .file app.component.ts + .file crisis-list.component.ts .file hero-detail.component.ts .file hero-list.component.ts - .file hero.service.ts - .file app.component.ts - .file boot.ts - .file crisis-list.component.ts + .file hero.service.ts + .file main.ts .file index.html .file styles.css .file tsconfig.json @@ -706,7 +716,7 @@ code-example(format="." language="bash"). Then both `HeroService` and `CrisisService` would be available everywhere although they're only needed in their respective feature modules. That stinks. - Changes to a sub-module such as *Crisis Center* shouldn't provoke changes to the `AppComponent` or `boot.ts`. + Changes to a sub-module such as *Crisis Center* shouldn't provoke changes to the `AppComponent` or `main.ts`. We need to [*separate our concerns*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html). We'll fix all of these problems and add the new routing features to *Crisis Center*. @@ -774,7 +784,7 @@ code-example(format="." language="bash"). ### Service isolation We add the `CrisisService` to the component's providers array - instead of registering it with the `bootstrap` function in `boot.ts`. + instead of registering it with the `bootstrap` function in `main.ts`. +makeExample('router/ts/app/crisis-center/crisis-center.component.1.ts', 'providers') :marked This step limits the scope of that service to the *Crisis Center* component and its sub-component tree. @@ -968,16 +978,17 @@ code-example(format=""). + .l-main-section :marked ## Milestone #4: Query Parameters - We use [*route parameters*](#route-parameters) to specify a parameterized value *within* the route URL + We use [*route parameters*](#route-parameters) to specify a *required* parameterized value *within* the route URL as we do when navigating to the `HeroDetailComponent` in order to view-and-edit the hero with *id:15*. code-example(format="." language="bash"). localhost:3000/hero/15 :marked - Sometimes we wish to add optional information to a route request. + Sometimes we wish to add *optional* information to a route request. For example, the `HeroListComponent` doesn't need help to display a list of heroes. But it might be nice if the previously-viewed hero were pre-selected when returning from the `HeroDetailComponent`. figure.image-display @@ -1000,6 +1011,19 @@ figure.image-display The Component Router supports navigation with query strings as well as route parameters. We define query string parameters in the *route parameters object* just like we do with route parameters. + + ### Route Parameters or Query Parameters? + + There is no hard-and-fast rule. In general, + + *prefer a route parameter when* + * the value is required. + * the value is necessary to distinguish one route path from another. + + *prefer a query parameter when* + * the value is optional. + * the value is complex and/or multi-variate. + ### Route parameters object When navigating to the `HeroDetailComponent` we specified the `id` of the hero-to-edit in the @@ -1160,8 +1184,8 @@ code-example(format="." language="bash"). .file crisis-center/... .file heroes/... .file app.component.ts - .file boot.ts .file dialog.service.ts + .file main.ts .file index.html .file package.json .file styles.css @@ -1170,14 +1194,14 @@ code-example(format="." language="bash"). The top level application files are +makeTabs( `router/ts/app/app.component.ts, - router/ts/app/boot.ts, + router/ts/app/main.ts, router/ts/app/dialog.service.ts, router/ts/index.html, router/ts/styles.css `, null, `app.component.ts, - boot.ts, + main.ts, dialog.service.ts, index.html, styles.css @@ -1437,7 +1461,7 @@ code-example(format=".", language="bash"). Then *override* the default strategy defined in `ROUTE_PROVIDERS` by providing the `HashLocationStrategy` later in the `bootstrap` providers array argument: -+makeExample('router/ts/app/boot.2.ts','', 'boot.ts (hash URL strategy)') ++makeExample('router/ts/app/main.2.ts','', 'main.ts (hash URL strategy)') .l-main-section diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index c4c02c2424..b59d70bca1 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -29,7 +29,7 @@ figure.image-display .file app .children .file app.component.ts - .file boot.ts + .file main.ts .file index.html .file license.md :marked @@ -157,7 +157,7 @@ code-example(format=""). Modules rely on other modules. In TypeScript Angular apps, when we need something provided by another module, we import it. When another module needs to refer to `AppComponent`, it imports the `AppComponent` *symbol* like this: -+makeExample('quickstart/ts/app/boot.ts', 'app-component','app/boot.ts (import)')(format=".") ++makeExample('quickstart/ts/app/main.ts', 'app-component','app/main.ts (import)')(format=".") :marked Angular is also modular. It is a collection of library modules. Each library is itself a module made up of several, related feature modules. @@ -197,10 +197,10 @@ code-example(format=""). Now we need something to tell Angular to load this component. - ### Give it the boot + ### Bootstrap it - Add a new file , `boot.ts`, to the `app/` folder as follows: -+makeExample('quickstart/ts/app/boot.ts', null, 'app/boot.ts')(format=".") + Add a new file , `main.ts`, to the `app/` folder as follows: ++makeExample('quickstart/ts/app/main.ts', null, 'app/main.ts')(format=".") :marked We need two things to launch the application: 1. Angular's browser `bootstrap` function @@ -212,7 +212,7 @@ code-example(format=""). .l-sub-section :marked Learn why we import `bootstrap` from `angular2/platform/browser` - and why we create a separate *boot.ts* file in the [appendix below](#boot). + and why we create a separate *main.ts* file in the [appendix below](#main). :marked We've asked Angular to launch the app in a browser with our component at the root. Where will Angular put it? @@ -238,7 +238,7 @@ code-example(format=""). 1. We load the JavaScript libraries we need; learn about them [below](#libraries). 2. We configure something called `System` and ask it to import the - boot file we just wrote. + `main` file we just wrote. 3. We add the `` tag in the ``. **This is where our app lives!** @@ -248,7 +248,7 @@ code-example(format=""). The specifics of SystemJS configuration are out of bounds. We'll briefly describe this particular configuration in the [appendix below](#systemjs). - When Angular calls the `bootstrap` function in `boot.ts`, it reads the `AppComponent` + When Angular calls the `bootstrap` function in `main.ts`, it reads the `AppComponent` metadata, finds the `my-app` selector, locates an element tag named `my-app`, and loads our application between those tags. @@ -296,7 +296,7 @@ figure.image-display .file app .children .file app.component.ts - .file boot.ts + .file main.ts .file index.html .file package.json .file tsconfig.json @@ -304,12 +304,12 @@ figure.image-display And here are the files: +makeTabs(` quickstart/ts/app/app.component.ts, - quickstart/ts/app/boot.ts, + quickstart/ts/app/main.ts, quickstart/ts/index.html, quickstart/ts/package.1.json, quickstart/ts/tsconfig.1.json `,null, - `app/app.component.ts, app/boot.ts, index.html,package.json, tsconfig.json`) + `app/app.component.ts, app/main.ts, index.html,package.json, tsconfig.json`) :marked .l-main-section @@ -502,7 +502,7 @@ code-example(format=""). Our QuickStart makes such requests when one of its application TypeScript files has an import statement like this: -+makeExample('quickstart/ts/app/boot.ts', 'app-component', 'boot.ts (excerpt)')(format=".") ++makeExample('quickstart/ts/app/main.ts', 'app-component', 'main.ts (excerpt)')(format=".") :marked Notice that the module name (after `from`) does not mention a filename extension. The `packages:` configuration tells SystemJS to default the extension to 'js', a JavaScript file. @@ -530,9 +530,9 @@ code-example(format=""). * Pre-compilation fits into a continuous integration process of build, test, deploy. :marked - The `System.import` call tells SystemJS to import the `boot` file - (`boot.js` ... after transpiling `boot.ts`, remember?). - `boot` is where we tell Angular to launch the application. + The `System.import` call tells SystemJS to import the `main` file + (`main.js` ... after transpiling `main.ts`, remember?). + `main` is where we tell Angular to launch the application. We also catch and log launch errors to the console. All other modules are loaded upon request @@ -540,8 +540,8 @@ code-example(format=""). .l-main-section :marked - - ### Appendix: ***boot.ts*** + + ### Appendix: ***main.ts*** #### Bootstrapping is platform-specific We import the `bootstrap` function from `angular2/platform/browser`, @@ -561,9 +561,9 @@ code-example(format=""). These targets require a different kind of bootstrap function that we'd import from a different library. - #### Why do we create a separate ***boot.ts*** file? + #### Why do we create a separate ***main.ts*** file? - The *boot.ts* file is tiny. This is just a QuickStart. + The *main.ts* file is tiny. This is just a QuickStart. We could have folded its few lines into the `app.component` file and spared ourselves some complexity. @@ -577,7 +577,7 @@ code-example(format=""). #### It's easy Sure it's an extra step and an extra file. How hard is that in the scheme of things? - We'll see that a separate `boot.ts` is beneficial for *most* apps + We'll see that a separate `main.ts` is beneficial for *most* apps even if it isn't critical for the QuickStart. Let's develop good habits now while the cost is low. @@ -591,7 +591,7 @@ code-example(format=""). It throws an error because we're not expecting to run the entire application, just test the component. - Relocating the `bootstrap` function to `boot.ts` eliminates this spurious error + Relocating the `bootstrap` function to `main.ts` eliminates this spurious error and leaves us with a clean component module file. #### Reusability @@ -610,6 +610,6 @@ code-example(format=""). #### Import/Export - While writing a separate `boot.ts` file we learned an essential Angular skill: + While writing a separate `main.ts` file we learned an essential Angular skill: how to export from one module and import into another. We'll do a lot of that as we learn more Angular. diff --git a/public/docs/ts/latest/testing/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade index 5d83c2466b..de01cd7eaf 100644 --- a/public/docs/ts/latest/testing/first-app-tests.jade +++ b/public/docs/ts/latest/testing/first-app-tests.jade @@ -35,7 +35,7 @@ include ../../../../_includes/_util-fns - + diff --git a/public/docs/ts/latest/testing/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade index aa242039ba..4e4f09e952 100644 --- a/public/docs/ts/latest/testing/jasmine-testing-101.jade +++ b/public/docs/ts/latest/testing/jasmine-testing-101.jade @@ -46,7 +46,7 @@ pre.prettyprint.lang-bash - + diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index 4484c31667..e0e961d074 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -20,7 +20,7 @@ include ../../../../_includes/_util-fns .file app .children .file app.component.ts - .file boot.ts + .file main.ts .file index.html .file package.json .file tsconfig.json diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade index 7531e0ca7f..c6b340efa3 100644 --- a/public/docs/ts/latest/tutorial/toh-pt2.jade +++ b/public/docs/ts/latest/tutorial/toh-pt2.jade @@ -26,7 +26,7 @@ include ../../../../_includes/_util-fns .file app .children .file app.component.ts - .file boot.ts + .file main.ts .file index.html .file package.json .file tsconfig.json diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade index ff4799638c..84449ae31f 100644 --- a/public/docs/ts/latest/tutorial/toh-pt3.jade +++ b/public/docs/ts/latest/tutorial/toh-pt3.jade @@ -18,7 +18,7 @@ include ../../../../_includes/_util-fns .file app .children .file app.component.ts - .file boot.ts + .file main.ts .file index.html .file package.json .file tsconfig.json @@ -210,9 +210,9 @@ code-example(format=".") .file app .children .file app.component.ts - .file boot.ts .file hero.ts .file hero-detail.component.ts + .file main.ts .file index.html .file package.json .file tsconfig.json diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade index f146fb156f..030dd1fc60 100644 --- a/public/docs/ts/latest/tutorial/toh-pt4.jade +++ b/public/docs/ts/latest/tutorial/toh-pt4.jade @@ -31,9 +31,9 @@ include ../../../../_includes/_util-fns .file app .children .file app.component.ts - .file boot.ts .file hero.ts .file hero-detail.component.ts + .file main.ts .file index.html .file package.json .file tsconfig.json @@ -326,10 +326,10 @@ code-example(format="." language="html"). .file app .children .file app.component.ts - .file boot.ts .file hero.ts .file hero-detail.component.ts .file hero.service.ts + .file main.ts .file mock-heroes.ts .file index.html .file package.json diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index a06d19c538..85acb3b683 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -19,11 +19,11 @@ figure.image-display .file app .children .file app.component.ts - .file boot.ts .file hero.ts .file hero-detail.component.ts .file hero.service.ts .file mock-heroes.ts + .file main.ts .file index.html .file package.json .file tsconfig.json @@ -72,9 +72,9 @@ code-example. ## Bootstrapping the Tour of Heroes The start-up of an app is also known as bootstrapping. We are currently bootstrapping in our `HeroesComponent`, which no longer makes sense. So let’s change that and separate this startup logic. - Let’s move the bootstrapping logic into a new file. We’ll create a new file named `boot.ts` in the `app` folder. + Let’s move the bootstrapping logic into a new file. We’ll create a new file named `main.ts` in the `app` folder. - Let’s add the following lines to `boot.ts`: + Let’s add the following lines to `main.ts`: +makeExample('toh-4/ts-snippets/app/bootstrap.pt4.ts') :marked The bootstrap function accepts as its first parameter, the first component that the app will use. @@ -445,7 +445,6 @@ figure.image-display .file app .children .file app.component.ts - .file boot.ts .file dashboard.component.css .file dashboard.component.html .file dashboard.component.ts @@ -456,6 +455,7 @@ figure.image-display .file heroes.component.css .file heroes.component.html .file heroes.component.ts + .file main.ts .file mock-heroes.ts .file index.html .file package.json