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:
parent
e52cf35da7
commit
79d3d9f0ad
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
<!-- #enddocregion scripts-hero-form -->
|
||||
<!-- #docregion scripts, scripts-hero, scripts-hero-form -->
|
||||
<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 -->
|
||||
</head>
|
||||
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
<!-- 2. Load our 'modules' -->
|
||||
<!-- #docregion modules -->
|
||||
<script src='app/app.component.js'></script>
|
||||
<script src='app/boot.js'></script>
|
||||
<script src='app/main.js'></script>
|
||||
<!-- #enddocregion modules -->
|
||||
|
||||
</head>
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
<!-- #enddocregion systemjs -->
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES5",
|
||||
"target": "es5",
|
||||
"module": "system",
|
||||
"moduleResolution": "node",
|
||||
"sourceMap": true,
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot.1') // <----- ONLY CHANGE
|
||||
System.import('app/main.1') // <----- ONLY CHANGE
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot.2') // <----- ONLY CHANGE
|
||||
System.import('app/main.2') // <----- ONLY CHANGE
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot.3') // <----- ONLY CHANGE
|
||||
System.import('app/main.3') // <----- ONLY CHANGE
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script>
|
||||
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script>
|
||||
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script>
|
||||
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -13,4 +13,4 @@ System.register(['angular2/platform/browser', './app.component.1'], function(exp
|
|||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=boot.1.js.map
|
||||
//# sourceMappingURL=main.1.js.map
|
|
@ -13,4 +13,4 @@ System.register(['angular2/platform/browser', './app.component'], function(expor
|
|||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=boot.js.map
|
||||
//# sourceMappingURL=main.js.map
|
|
@ -12,7 +12,7 @@
|
|||
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<script>
|
||||
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<script src="node_modules/angular2/bundles/router.dev.js"></script>
|
||||
<script>
|
||||
System.config({packages: {app: {format: 'register',defaultExtension: 'js'}}});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
System.import('app/boot')
|
||||
System.import('app/main')
|
||||
.then(null, console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 `<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`,
|
||||
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
|
||||
<a id="boot"></a>
|
||||
### Appendix: ***boot.js***
|
||||
<a id="main"></a>
|
||||
### 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.
|
||||
|
|
|
@ -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=".")
|
||||
|
|
|
@ -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 `<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
|
||||
inside the `<my-app>` 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')
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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`.
|
||||
|
||||
|
|
|
@ -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`.
|
||||
|
||||
<a id="navigate"></id>
|
||||
<a id="navigate"></a>
|
||||
: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="").
|
|||
|
||||
|
||||
<a id="query-parameters"></a>
|
||||
<a id="query-parameter"></a>
|
||||
.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.
|
||||
|
||||
<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>
|
||||
### 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)')
|
||||
|
||||
<a id="ie-polyfills"></a>
|
||||
.l-main-section
|
||||
|
|
|
@ -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 `<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.
|
||||
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
|
||||
<a id="boot"></a>
|
||||
### Appendix: ***boot.ts***
|
||||
<a id="main"></a>
|
||||
### 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.
|
||||
|
|
|
@ -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-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>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -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-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>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue