docs(samples): convert boot.ts -> main.ts

plus router text fix and missed beta.2 update to QS.js
closes #773
This commit is contained in:
Ward Bell 2016-01-28 16:15:26 -08:00
parent e52cf35da7
commit 79d3d9f0ad
65 changed files with 160 additions and 133 deletions

View File

@ -19,7 +19,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -20,7 +20,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -20,7 +20,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -25,7 +25,7 @@
<!-- #enddocregion scripts-hero-form --> <!-- #enddocregion scripts-hero-form -->
<!-- #docregion scripts, scripts-hero, scripts-hero-form --> <!-- #docregion scripts, scripts-hero, scripts-hero-form -->
<script src='app/app.component.js'></script> <script src='app/app.component.js'></script>
<script src='app/boot.js'></script> <script src='app/main.js'></script>
<!-- #enddocregion scripts, scripts-hero, scripts-hero-form --> <!-- #enddocregion scripts, scripts-hero, scripts-hero-form -->
</head> </head>

View File

@ -28,7 +28,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -20,7 +20,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -21,7 +21,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -20,7 +20,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -20,7 +20,7 @@
<!-- 2. Load our 'modules' --> <!-- 2. Load our 'modules' -->
<!-- #docregion modules --> <!-- #docregion modules -->
<script src='app/app.component.js'></script> <script src='app/app.component.js'></script>
<script src='app/boot.js'></script> <script src='app/main.js'></script>
<!-- #enddocregion modules --> <!-- #enddocregion modules -->
</head> </head>

View File

@ -7,7 +7,7 @@
}, },
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"angular2": "2.0.0-beta.0", "angular2": "2.0.0-beta.2",
"systemjs": "0.19.6", "systemjs": "0.19.6",
"es6-promise": "^3.0.2", "es6-promise": "^3.0.2",
"es6-shim": "^0.33.3", "es6-shim": "^0.33.3",

View File

@ -30,7 +30,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
<!-- #enddocregion systemjs --> <!-- #enddocregion systemjs -->

View File

@ -1,6 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES5", "target": "es5",
"module": "system", "module": "system",
"moduleResolution": "node", "moduleResolution": "node",
"sourceMap": true, "sourceMap": true,

View File

@ -29,7 +29,7 @@
} }
} }
}); });
System.import('app/boot.1') // <----- ONLY CHANGE System.import('app/main.1') // <----- ONLY CHANGE
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -23,7 +23,7 @@
} }
} }
}); });
System.import('app/boot.2') // <----- ONLY CHANGE System.import('app/main.2') // <----- ONLY CHANGE
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -23,7 +23,7 @@
} }
} }
}); });
System.import('app/boot.3') // <----- ONLY CHANGE System.import('app/main.3') // <----- ONLY CHANGE
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -35,7 +35,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -21,7 +21,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -21,7 +21,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -12,7 +12,7 @@
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script> <script>
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}}); System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -12,7 +12,7 @@
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script> <script>
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}}); System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -12,7 +12,7 @@
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script> <script>
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}}); System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -13,4 +13,4 @@ System.register(['angular2/platform/browser', './app.component.1'], function(exp
} }
} }
}); });
//# sourceMappingURL=boot.1.js.map //# sourceMappingURL=main.1.js.map

View File

@ -13,4 +13,4 @@ System.register(['angular2/platform/browser', './app.component'], function(expor
} }
} }
}); });
//# sourceMappingURL=boot.js.map //# sourceMappingURL=main.js.map

View File

@ -12,7 +12,7 @@
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script> <script>
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}}); System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -15,7 +15,7 @@
<script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script>
<script> <script>
System.config({packages: {app: {format: 'register',defaultExtension: 'js'}}}); System.config({packages: {app: {format: 'register',defaultExtension: 'js'}}});
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -21,7 +21,7 @@
} }
} }
}); });
System.import('app/boot') System.import('app/main')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -605,19 +605,20 @@ figure.image-display
- Custom CSS classes that provide visual feedback to users about invalid controls. - Custom CSS classes that provide visual feedback to users about invalid controls.
Our final project folder structure should look like this: Our final project folder structure should look like this:
code-example(format=""). .filetree
angular2-forms .file angular2-forms
├── node_modules .children
├── app .file node_modules
| ├── app.component.js .file app
| ├── boot.js .children
| ├── hero.js .file app.component.js
| ├── hero-form.component.html .file hero.js
| └── hero-form.component.js .file hero-form.component.html
├── index.html .file hero-form.component.js
├── styles.css .file main.ts
├── tsconfig.json .file index.html
└── package.json .file package.json
.file styles.cs
:marked :marked
Heres the final version of the source: Heres the final version of the source:
@ -626,7 +627,7 @@ code-example(format="").
forms/js/app/hero-form.component.html, forms/js/app/hero-form.component.html,
forms/js/app/hero.js, forms/js/app/hero.js,
forms/js/app/app.component.js, forms/js/app/app.component.js,
forms/js/app/boot.js, forms/js/app/main.js,
forms/js/index.html, forms/js/index.html,
forms/js/styles.css`, forms/js/styles.css`,
'final, final,,,,,', 'final, final,,,,,',
@ -634,7 +635,7 @@ code-example(format="").
hero-form.component.html, hero-form.component.html,
hero.js, hero.js,
app.component.js, app.component.js,
boot.js, main.js,
index.html, index.html,
styles.css`) styles.css`)
:marked :marked

View File

@ -29,7 +29,7 @@ figure.image-display
.file app .file app
.children .children
.file app.component.js .file app.component.js
.file boot.js .file main.js
.file index.html .file index.html
.file license.md .file license.md
:marked :marked
@ -166,7 +166,7 @@ code-example(format="").
provided by another module, we get it from the `app` object. 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: 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 :marked
Angular is also modular. It is a collection of library modules. 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. 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: Add a new file , `main.js`, to the `app/` folder as follows:
+makeExample('quickstart/js/app/boot.js', null, 'app/boot.js')(format=".") +makeExample('quickstart/js/app/main.js', null, 'app/main.js')(format=".")
:marked :marked
We need two things to launch the application: We need two things to launch the application:
1. Angular's browser `bootstrap` function 1. Angular's browser `bootstrap` function
@ -224,7 +224,7 @@ code-example(format="").
.l-sub-section .l-sub-section
:marked :marked
Learn why we need `bootstrap` from `ng.platform.browser` 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 :marked
We've asked Angular to launch the app in a browser with our component at the root. We've asked Angular to launch the app in a browser with our component at the root.
Where will Angular put it? 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). 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 `<my-app>` tag in the `<body>`. **This is where our app lives!** 3. We add the `<my-app>` tag in the `<body>`. **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`, metadata, finds the `my-app` selector, locates an element tag named `my-app`,
and loads our application between those tags. and loads our application between those tags.
@ -303,18 +303,18 @@ figure.image-display
.file app .file app
.children .children
.file app.component.js .file app.component.js
.file boot.js .file main.js
.file index.html .file index.html
.file package.json .file package.json
:marked :marked
And here are the files: And here are the files:
+makeTabs(` +makeTabs(`
quickstart/js/app/app.component.js, quickstart/js/app/app.component.js,
quickstart/js/app/boot.js, quickstart/js/app/main.js,
quickstart/js/index.html, quickstart/js/index.html,
quickstart/js/package.1.json quickstart/js/package.1.json
`,null, `,null,
`app/app.component.js, app/boot.js, index.html,package.json`) `app/app.component.js, app/main.js, index.html,package.json`)
:marked :marked
.l-main-section .l-main-section
@ -437,8 +437,8 @@ code-example(format="").
.l-main-section .l-main-section
:marked :marked
<a id="boot"></a> <a id="main"></a>
### Appendix: ***boot.js*** ### Appendix: ***main.js***
#### Bootstrapping is platform-specific #### Bootstrapping is platform-specific
We use the `bootstrap` function from `ng.platform.browser`, 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. 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 We could have folded its few lines into the `app.component.js` file
and spared ourselves some complexity. and spared ourselves some complexity.
@ -472,7 +472,7 @@ code-example(format="").
#### It's easy #### It's easy
Sure it's an extra step and an extra file. How hard is that in the scheme of things? 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. even if it isn't critical for the QuickStart.
Let's develop good habits now while the cost is low. 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, It throws an error because we're not expecting to run the entire application,
just test the component. 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. and leaves us with a clean component module file.
#### Reusability #### Reusability
@ -505,7 +505,7 @@ code-example(format="").
#### Import/Export #### 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 how to 'export' from one 'module' and 'import' into another via our simple
namespace abstraction. namespace abstraction.
We'll do a lot of that as we learn more Angular. We'll do a lot of that as we learn more Angular.

View File

@ -74,7 +74,7 @@ figure
`AppComponent` class is public and accessible to other modules of the application. `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: 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 :marked
The `import` statement tells the system it can get an `AppComponent` from a module named `app.component` The `import` statement tells the system it can get an `AppComponent` from a module named `app.component`
located in a neighboring file. located in a neighboring file.
@ -102,7 +102,7 @@ figure
+makeExample('architecture/ts/app/app.component.ts', 'import')(format=".") +makeExample('architecture/ts/app/app.component.ts', 'import')(format=".")
:marked :marked
Compare that syntax to our previous import of `AppComponent`. 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 :marked
Notice the difference? Notice the difference?
In the first case, when importing from an Angular library module, 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 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 We often do so at the root when we bootstrap the application so that
the same instance of a service is available everywhere. 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 :marked
Alternatively, we might register at a component level ... Alternatively, we might register at a component level ...
+makeExample('architecture/ts/app/hero-list.component.ts', 'providers','app/hero-list.component.ts (excerpt)')(format=".") +makeExample('architecture/ts/app/hero-list.component.ts', 'providers','app/hero-list.component.ts (excerpt)')(format=".")

View File

@ -69,7 +69,7 @@ figure.image-display
+makeExample('displaying-data/ts/index.html', 'my-app')(format=".") +makeExample('displaying-data/ts/index.html', 'my-app')(format=".")
:marked :marked
When we bootstrap with the `AppComponent` class (see `boot.ts`), Angular looks for a `<my-app>` When we bootstrap with the `AppComponent` class (see `main.ts`), Angular looks for a `<my-app>`
in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
inside the `<my-app>` tag. inside the `<my-app>` tag.
@ -255,6 +255,6 @@ figure.image-display
+makeTabs(`displaying-data/ts/app/app.component.ts, +makeTabs(`displaying-data/ts/app/app.component.ts,
displaying-data/ts/app/hero.ts, displaying-data/ts/app/hero.ts,
displaying-data/ts/app/boot.ts`, displaying-data/ts/app/main.ts`,
'final,,', 'final,,',
'app/app.component.ts, app/hero.ts, boot.ts') 'app/app.component.ts, app/hero.ts, main.ts')

View File

@ -603,19 +603,21 @@ figure.image-display
- Custom CSS classes that provide visual feedback to users about invalid controls. - Custom CSS classes that provide visual feedback to users about invalid controls.
Our final project folder structure should look like this: Our final project folder structure should look like this:
code-example(format=""). .filetree
angular2-forms .file angular2-forms
├── node_modules .children
├── app .file node_modules
| ├── app.component.ts .file app
| ├── boot.ts .children
| ├── hero.ts .file app.component.ts
| ├── hero-form.component.html .file hero.ts
| └── hero-form.component.ts .file hero-form.component.html
├── index.html .file hero-form.component.ts
├── styles.css .file main.ts
├── tsconfig.json .file index.html
└── package.json .file package.json
.file styles.cs
.file tsconfig.json
:marked :marked
Heres the final version of the source: Heres the final version of the source:
@ -624,7 +626,7 @@ code-example(format="").
forms/ts/app/hero-form.component.html, forms/ts/app/hero-form.component.html,
forms/ts/app/hero.ts, forms/ts/app/hero.ts,
forms/ts/app/app.component.ts, forms/ts/app/app.component.ts,
forms/ts/app/boot.ts, forms/ts/app/main.ts,
forms/ts/index.html, forms/ts/index.html,
forms/ts/styles.css`, forms/ts/styles.css`,
'final, final,,,,,', 'final, final,,,,,',
@ -632,7 +634,7 @@ code-example(format="").
hero-form.component.html, hero-form.component.html,
hero.ts, hero.ts,
app.component.ts, app.component.ts,
boot.ts, main.ts,
index.html, index.html,
styles.css`) styles.css`)
:marked :marked

View File

@ -143,7 +143,7 @@ figure.image-display
This adds a `RestoreService` provider to the injector of the `HeroEditComponent`. This adds a `RestoreService` provider to the injector of the `HeroEditComponent`.
Couldnt we simply alter our bootstrap call to this? Couldnt 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 :marked
Technically we could, but our component wouldnt 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 its own instance of the `RestoreService`. Technically we could, but our component wouldnt 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 its own instance of the `RestoreService`.

View File

@ -320,9 +320,9 @@ figure.image-display
We should only need this trick for the live example, not production code. We should only need this trick for the live example, not production code.
:marked :marked
### Booting with the router service providers ### 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. 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 :marked
We import our root `AppComponent` and Angular's `bootstrap` function as expected. We import our root `AppComponent` and Angular's `bootstrap` function as expected.
@ -432,9 +432,9 @@ figure.image-display
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts
.file crisis-list.component.ts .file crisis-list.component.ts
.file hero-list.component.ts .file hero-list.component.ts
.file main.ts
.file index.html .file index.html
.file styles.css .file styles.css
.file tsconfig.json .file tsconfig.json
@ -443,13 +443,13 @@ figure.image-display
Here are the files discussed in this milestone Here are the files discussed in this milestone
+makeTabs( +makeTabs(
`router/ts/app/app.component.1.ts, `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/hero-list.component.ts,
router/ts/app/crisis-list.component.ts, router/ts/app/crisis-list.component.ts,
router/ts/index.html`, router/ts/index.html`,
',all,,', ',all,,',
`app.component.ts, `app.component.ts,
boot.ts, main.ts,
hero-list.component.ts, hero-list.component.ts,
crisis-list.component.ts, crisis-list.component.ts,
index.html`) index.html`)
@ -550,8 +550,18 @@ code-example(format="." language="bash").
:marked :marked
If a user enters that URL into the browser address bar, the router should recognize the 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. 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 id="navigate"></id> A [query parameter](#query-parameter) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`.
<a id="navigate"></a>
:marked
### Navigate to the detail imperatively ### Navigate to the detail imperatively
*We don't navigate to the detail component by clicking a link*. *We don't navigate to the detail component by clicking a link*.
@ -643,12 +653,12 @@ code-example(format="." language="bash").
.children .children
.file heroes .file heroes
.children .children
.file app.component.ts
.file crisis-list.component.ts
.file hero-detail.component.ts .file hero-detail.component.ts
.file hero-list.component.ts .file hero-list.component.ts
.file hero.service.ts .file hero.service.ts
.file app.component.ts .file main.ts
.file boot.ts
.file crisis-list.component.ts
.file index.html .file index.html
.file styles.css .file styles.css
.file tsconfig.json .file tsconfig.json
@ -706,7 +716,7 @@ code-example(format="." language="bash").
Then both `HeroService` and `CrisisService` would be available everywhere although Then both `HeroService` and `CrisisService` would be available everywhere although
they're only needed in their respective feature modules. That stinks. 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 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*. 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 ### Service isolation
We add the `CrisisService` to the component's providers array 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') +makeExample('router/ts/app/crisis-center/crisis-center.component.1.ts', 'providers')
:marked :marked
This step limits the scope of that service to the *Crisis Center* component and its sub-component tree. 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="").
<a id="query-parameters"></a> <a id="query-parameters"></a>
<a id="query-parameter"></a>
.l-main-section .l-main-section
:marked :marked
## Milestone #4: Query Parameters ## 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*. as we do when navigating to the `HeroDetailComponent` in order to view-and-edit the hero with *id:15*.
code-example(format="." language="bash"). code-example(format="." language="bash").
localhost:3000/hero/15 localhost:3000/hero/15
:marked :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. 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`. But it might be nice if the previously-viewed hero were pre-selected when returning from the `HeroDetailComponent`.
figure.image-display figure.image-display
@ -1000,6 +1011,19 @@ figure.image-display
The Component Router supports navigation with query strings as well as route parameters. 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. We define query string parameters in the *route parameters object* just like we do with route parameters.
<a id="route-or-query-parameter"></a>
### 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.
<a id="route-parameters-object"></a> <a id="route-parameters-object"></a>
### Route parameters object ### Route parameters object
When navigating to the `HeroDetailComponent` we specified the `id` of the hero-to-edit in the 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 crisis-center/...
.file heroes/... .file heroes/...
.file app.component.ts .file app.component.ts
.file boot.ts
.file dialog.service.ts .file dialog.service.ts
.file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file styles.css .file styles.css
@ -1170,14 +1194,14 @@ code-example(format="." language="bash").
The top level application files are The top level application files are
+makeTabs( +makeTabs(
`router/ts/app/app.component.ts, `router/ts/app/app.component.ts,
router/ts/app/boot.ts, router/ts/app/main.ts,
router/ts/app/dialog.service.ts, router/ts/app/dialog.service.ts,
router/ts/index.html, router/ts/index.html,
router/ts/styles.css router/ts/styles.css
`, `,
null, null,
`app.component.ts, `app.component.ts,
boot.ts, main.ts,
dialog.service.ts, dialog.service.ts,
index.html, index.html,
styles.css styles.css
@ -1437,7 +1461,7 @@ code-example(format=".", language="bash").
Then *override* the default strategy defined in `ROUTE_PROVIDERS` by Then *override* the default strategy defined in `ROUTE_PROVIDERS` by
providing the `HashLocationStrategy` later in the `bootstrap` providers array argument: 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)')
<a id="ie-polyfills"></a> <a id="ie-polyfills"></a>
.l-main-section .l-main-section

View File

@ -29,7 +29,7 @@ figure.image-display
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts .file main.ts
.file index.html .file index.html
.file license.md .file license.md
:marked :marked
@ -157,7 +157,7 @@ code-example(format="").
Modules rely on other modules. In TypeScript Angular apps, when we need something Modules rely on other modules. In TypeScript Angular apps, when we need something
provided by another module, we import it. provided by another module, we import it.
When another module needs to refer to `AppComponent`, it imports the `AppComponent` *symbol* like this: 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 :marked
Angular is also modular. It is a collection of library modules. Angular is also modular. It is a collection of library modules.
Each library is itself a module made up of several, related feature 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. 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: Add a new file , `main.ts`, to the `app/` folder as follows:
+makeExample('quickstart/ts/app/boot.ts', null, 'app/boot.ts')(format=".") +makeExample('quickstart/ts/app/main.ts', null, 'app/main.ts')(format=".")
:marked :marked
We need two things to launch the application: We need two things to launch the application:
1. Angular's browser `bootstrap` function 1. Angular's browser `bootstrap` function
@ -212,7 +212,7 @@ code-example(format="").
.l-sub-section .l-sub-section
:marked :marked
Learn why we import `bootstrap` from `angular2/platform/browser` 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 :marked
We've asked Angular to launch the app in a browser with our component at the root. We've asked Angular to launch the app in a browser with our component at the root.
Where will Angular put it? 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). 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 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 `<my-app>` tag in the `<body>`. **This is where our app lives!** 3. We add the `<my-app>` tag in the `<body>`. **This is where our app lives!**
@ -248,7 +248,7 @@ code-example(format="").
The specifics of SystemJS configuration are out of bounds. The specifics of SystemJS configuration are out of bounds.
We'll briefly describe this particular configuration in the [appendix below](#systemjs). 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`, metadata, finds the `my-app` selector, locates an element tag named `my-app`,
and loads our application between those tags. and loads our application between those tags.
@ -296,7 +296,7 @@ figure.image-display
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts .file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json
@ -304,12 +304,12 @@ figure.image-display
And here are the files: And here are the files:
+makeTabs(` +makeTabs(`
quickstart/ts/app/app.component.ts, quickstart/ts/app/app.component.ts,
quickstart/ts/app/boot.ts, quickstart/ts/app/main.ts,
quickstart/ts/index.html, quickstart/ts/index.html,
quickstart/ts/package.1.json, quickstart/ts/package.1.json,
quickstart/ts/tsconfig.1.json quickstart/ts/tsconfig.1.json
`,null, `,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 :marked
.l-main-section .l-main-section
@ -502,7 +502,7 @@ code-example(format="").
Our QuickStart makes such requests when one of its Our QuickStart makes such requests when one of its
application TypeScript files has an import statement like this: 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 :marked
Notice that the module name (after `from`) does not mention a filename extension. 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. 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. * Pre-compilation fits into a continuous integration process of build, test, deploy.
:marked :marked
The `System.import` call tells SystemJS to import the `boot` file The `System.import` call tells SystemJS to import the `main` file
(`boot.js` ... after transpiling `boot.ts`, remember?). (`main.js` ... after transpiling `main.ts`, remember?).
`boot` is where we tell Angular to launch the application. `main` is where we tell Angular to launch the application.
We also catch and log launch errors to the console. We also catch and log launch errors to the console.
All other modules are loaded upon request All other modules are loaded upon request
@ -540,8 +540,8 @@ code-example(format="").
.l-main-section .l-main-section
:marked :marked
<a id="boot"></a> <a id="main"></a>
### Appendix: ***boot.ts*** ### Appendix: ***main.ts***
#### Bootstrapping is platform-specific #### Bootstrapping is platform-specific
We import the `bootstrap` function from `angular2/platform/browser`, 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. 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 We could have folded its few lines into the `app.component` file
and spared ourselves some complexity. and spared ourselves some complexity.
@ -577,7 +577,7 @@ code-example(format="").
#### It's easy #### It's easy
Sure it's an extra step and an extra file. How hard is that in the scheme of things? 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. even if it isn't critical for the QuickStart.
Let's develop good habits now while the cost is low. 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, It throws an error because we're not expecting to run the entire application,
just test the component. 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. and leaves us with a clean component module file.
#### Reusability #### Reusability
@ -610,6 +610,6 @@ code-example(format="").
#### Import/Export #### 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. how to export from one module and import into another.
We'll do a lot of that as we learn more Angular. We'll do a lot of that as we learn more Angular.

View File

@ -35,7 +35,7 @@ include ../../../../_includes/_util-fns
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/main.js"></script>
</head> </head>
<body> <body>

View File

@ -46,7 +46,7 @@ pre.prettyprint.lang-bash
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> <script src="../node_modules/jasmine-core/lib/jasmine-core/main.js"></script>
</head> </head>
<body> <body>

View File

@ -20,7 +20,7 @@ include ../../../../_includes/_util-fns
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts .file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json

View File

@ -26,7 +26,7 @@ include ../../../../_includes/_util-fns
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts .file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json

View File

@ -18,7 +18,7 @@ include ../../../../_includes/_util-fns
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts .file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json
@ -210,9 +210,9 @@ code-example(format=".")
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts
.file hero.ts .file hero.ts
.file hero-detail.component.ts .file hero-detail.component.ts
.file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json

View File

@ -31,9 +31,9 @@ include ../../../../_includes/_util-fns
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts
.file hero.ts .file hero.ts
.file hero-detail.component.ts .file hero-detail.component.ts
.file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json
@ -326,10 +326,10 @@ code-example(format="." language="html").
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts
.file hero.ts .file hero.ts
.file hero-detail.component.ts .file hero-detail.component.ts
.file hero.service.ts .file hero.service.ts
.file main.ts
.file mock-heroes.ts .file mock-heroes.ts
.file index.html .file index.html
.file package.json .file package.json

View File

@ -19,11 +19,11 @@ figure.image-display
.file app .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts
.file hero.ts .file hero.ts
.file hero-detail.component.ts .file hero-detail.component.ts
.file hero.service.ts .file hero.service.ts
.file mock-heroes.ts .file mock-heroes.ts
.file main.ts
.file index.html .file index.html
.file package.json .file package.json
.file tsconfig.json .file tsconfig.json
@ -72,9 +72,9 @@ code-example.
## Bootstrapping the Tour of Heroes ## 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 lets change that and separate this startup logic. The start-up of an app is also known as bootstrapping. We are currently bootstrapping in our `HeroesComponent`, which no longer makes sense. So lets change that and separate this startup logic.
Lets move the bootstrapping logic into a new file. Well create a new file named `boot.ts` in the `app` folder. Lets move the bootstrapping logic into a new file. Well create a new file named `main.ts` in the `app` folder.
Lets add the following lines to `boot.ts`: Lets add the following lines to `main.ts`:
+makeExample('toh-4/ts-snippets/app/bootstrap.pt4.ts') +makeExample('toh-4/ts-snippets/app/bootstrap.pt4.ts')
:marked :marked
The bootstrap function accepts as its first parameter, the first component that the app will use. 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 .file app
.children .children
.file app.component.ts .file app.component.ts
.file boot.ts
.file dashboard.component.css .file dashboard.component.css
.file dashboard.component.html .file dashboard.component.html
.file dashboard.component.ts .file dashboard.component.ts
@ -456,6 +455,7 @@ figure.image-display
.file heroes.component.css .file heroes.component.css
.file heroes.component.html .file heroes.component.html
.file heroes.component.ts .file heroes.component.ts
.file main.ts
.file mock-heroes.ts .file mock-heroes.ts
.file index.html .file index.html
.file package.json .file package.json