parent
eb48a71351
commit
8569479423
|
@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
|
||||||
/**
|
/**
|
||||||
* Async modal dialog service
|
* Async modal dialog service
|
||||||
* DialogService makes this app easier to test by faking this service.
|
* DialogService makes this app easier to test by faking this service.
|
||||||
* TODO: better modal implemenation that doesn't use window.confirm
|
* TODO: better modal implementation that doesn't use window.confirm
|
||||||
*/
|
*/
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class DialogService {
|
export class DialogService {
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
|
||||||
/**
|
/**
|
||||||
* Async modal dialog service
|
* Async modal dialog service
|
||||||
* DialogService makes this app easier to test by faking this service.
|
* DialogService makes this app easier to test by faking this service.
|
||||||
* TODO: better modal implemenation that doesn't use window.confirm
|
* TODO: better modal implementation that doesn't use window.confirm
|
||||||
*/
|
*/
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class DialogService {
|
export class DialogService {
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { Component } from '@angular/core';
|
||||||
template: `<button>OK<button>`
|
template: `<button>OK<button>`
|
||||||
})
|
})
|
||||||
export class HeroButtonComponent {
|
export class HeroButtonComponent {
|
||||||
onInit() { // mispelled
|
onInit() { // misspelled
|
||||||
console.log('The component is initialized');
|
console.log('The component is initialized');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
h3 Adding an aside
|
h3 Adding an aside
|
||||||
|
|
||||||
aside.is-right Did you know that hipsum is a replacment for Lorem Ipsum? To find out more visit <a href="http://hipsum.co/">hipsum.co</a>
|
aside.is-right Did you know that hipsum is a replacement for Lorem Ipsum? To find out more visit <a href="http://hipsum.co/">hipsum.co</a>
|
||||||
p.
|
p.
|
||||||
Etsy artisan Thundercats, authentic sustainable bitters wolf roof party meditation 90's asymmetrical XOXO hoodie. Twee umami cray iPhone. Chillwave shabby chic tilde occupy sriracha squid Brooklyn street art. Selvage heirloom kogi American Apparel bicycle rights. Carles Etsy Truffaut mlkshk trust fund. Jean shorts fashion axe Williamsburg wolf cardigan beard, twee blog locavore organic. Cred skateboard dreamcatcher, taxidermy Bushwick actually aesthetic normcore fanny pack.
|
Etsy artisan Thundercats, authentic sustainable bitters wolf roof party meditation 90's asymmetrical XOXO hoodie. Twee umami cray iPhone. Chillwave shabby chic tilde occupy sriracha squid Brooklyn street art. Selvage heirloom kogi American Apparel bicycle rights. Carles Etsy Truffaut mlkshk trust fund. Jean shorts fashion axe Williamsburg wolf cardigan beard, twee blog locavore organic. Cred skateboard dreamcatcher, taxidermy Bushwick actually aesthetic normcore fanny pack.
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
|
|
||||||
pre.prettyprint.linenums.lang-html
|
pre.prettyprint.linenums.lang-html
|
||||||
code.
|
code.
|
||||||
aside.is-right Did you know that hipsum is a replacment for Lorem Ipsum? To find out more visit <a href="http://hipsum.co/">hipsum.co</a>
|
aside.is-right Did you know that hipsum is a replacement for Lorem Ipsum? To find out more visit <a href="http://hipsum.co/">hipsum.co</a>
|
||||||
|
|
||||||
p.
|
p.
|
||||||
Etsy artisan Thundercats, authentic sustainable bitters
|
Etsy artisan Thundercats, authentic sustainable bitters
|
||||||
|
|
|
@ -12,7 +12,7 @@ include ../../../_includes/_util-fns
|
||||||
:marked
|
:marked
|
||||||
### Including a code example from the `_examples` folder
|
### Including a code example from the `_examples` folder
|
||||||
|
|
||||||
One of the design goals for this documention was that any code samples that appear within the documentation be 'testable'.
|
One of the design goals for this documentation was that any code samples that appear within the documentation be 'testable'.
|
||||||
In practice this means that a set of standalone testable examples exist somewhere in the same repository as the rest
|
In practice this means that a set of standalone testable examples exist somewhere in the same repository as the rest
|
||||||
of the documentation. These examples will each typically consist of a collection of html, javascript and css files.
|
of the documentation. These examples will each typically consist of a collection of html, javascript and css files.
|
||||||
|
|
||||||
|
@ -130,7 +130,7 @@ include ../../../_includes/_util-fns
|
||||||
Multiple `#docregion` tags may be defined on a single line as shown below. In addition, anytime a file contains multiple
|
Multiple `#docregion` tags may be defined on a single line as shown below. In addition, anytime a file contains multiple
|
||||||
`#docregion` tags with the same name they will automatically be combined. Each of the individually tagged sections of the combined document
|
`#docregion` tags with the same name they will automatically be combined. Each of the individually tagged sections of the combined document
|
||||||
will be separated from one another by a comment consisting of '. . .'. This default separator, known
|
will be separated from one another by a comment consisting of '. . .'. This default separator, known
|
||||||
as 'plaster' can be overriden anywhere within the affected file via a `#docplaster` comment as shown below. This example creates
|
as 'plaster' can be overridden anywhere within the affected file via a `#docplaster` comment as shown below. This example creates
|
||||||
a separator that consists of `/* more code here */` in the output file.
|
a separator that consists of `/* more code here */` in the output file.
|
||||||
|
|
||||||
code-example(format="linenums" language="js" escape="html").
|
code-example(format="linenums" language="js" escape="html").
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
header.showcase-header
|
header.showcase-header
|
||||||
h2 Basic Layouts
|
h2 Basic Layouts
|
||||||
p.
|
p.
|
||||||
You will use the following layouts throughout your documenation
|
You will use the following layouts throughout your documentation
|
||||||
to specify sections and sub-sections of content.
|
to specify sections and sub-sections of content.
|
||||||
|
|
||||||
.showcase-content
|
.showcase-content
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
header.showcase-header
|
header.showcase-header
|
||||||
h2 Tables
|
h2 Tables
|
||||||
p.
|
p.
|
||||||
Tables can be used to present tablular data as it relates
|
Tables can be used to present tabular data as it relates
|
||||||
to each other.
|
to each other.
|
||||||
|
|
||||||
.showcase-content
|
.showcase-content
|
||||||
|
|
|
@ -131,7 +131,7 @@ code-example(format=".").
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
We explain input properties in more detail [here](../guide/attribute-directives.html#why-input)
|
We explain input properties in more detail [here](../guide/attribute-directives.html#why-input)
|
||||||
where we also explain why *target* properties require this special treament and
|
where we also explain why *target* properties require this special treatment and
|
||||||
*source* properties do not.
|
*source* properties do not.
|
||||||
:marked
|
:marked
|
||||||
There are a couple of ways we can declare that `hero` is an *input*.
|
There are a couple of ways we can declare that `hero` is an *input*.
|
||||||
|
|
|
@ -489,7 +489,7 @@ figure.image-display
|
||||||
We just set a template local variable with the value of an `NgForm` directive.
|
We just set a template local variable with the value of an `NgForm` directive.
|
||||||
Why did that work? We didn't add the **[`NgForm`](../api/common/NgForm-directive.html) directive** explicitly.
|
Why did that work? We didn't add the **[`NgForm`](../api/common/NgForm-directive.html) directive** explicitly.
|
||||||
|
|
||||||
Angular added it surreptiously, wrapping it around the `<form>` element
|
Angular added it surreptitiously, wrapping it around the `<form>` element
|
||||||
|
|
||||||
The `NgForm` directive supplements the `form` element with additional features.
|
The `NgForm` directive supplements the `form` element with additional features.
|
||||||
It collects `Controls` (elements identified by an `ngControl` directive)
|
It collects `Controls` (elements identified by an `ngControl` directive)
|
||||||
|
@ -531,7 +531,7 @@ figure.image-display
|
||||||
Re-run the application. The form opens in a valid state and the button is enabled.
|
Re-run the application. The form opens in a valid state and the button is enabled.
|
||||||
|
|
||||||
Now delete the *Name*. We violate the "name required" rule which
|
Now delete the *Name*. We violate the "name required" rule which
|
||||||
is duely noted in our error message as before. And now the Submit button is also disabled.
|
is duly noted in our error message as before. And now the Submit button is also disabled.
|
||||||
|
|
||||||
Not impressed? Think about it for a moment. What would we have to do to
|
Not impressed? Think about it for a moment. What would we have to do to
|
||||||
wire the button's enable/disabled state to the form's validity without Angular's help?
|
wire the button's enable/disabled state to the form's validity without Angular's help?
|
||||||
|
|
|
@ -448,7 +448,7 @@ code-example(format="").
|
||||||
True, most Angular applications run only in a browser and we'll call the bootstrap function from
|
True, most Angular applications run only in a browser and we'll call the bootstrap function from
|
||||||
this library most of the time. It's pretty "core" if we're always writing for a browser.
|
this library most of the time. It's pretty "core" if we're always writing for a browser.
|
||||||
|
|
||||||
But it is possible to load a component in a different enviroment.
|
But it is possible to load a component in a different environment.
|
||||||
We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/).
|
We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/).
|
||||||
We might wish to render the first page of our application on the server
|
We might wish to render the first page of our application on the server
|
||||||
to improve launch performance or facilitate
|
to improve launch performance or facilitate
|
||||||
|
|
|
@ -81,7 +81,7 @@ figure.image-display
|
||||||
We generally recommended providing application-wide services in the root application component, `AppComponent`.
|
We generally recommended providing application-wide services in the root application component, `AppComponent`.
|
||||||
|
|
||||||
Here we recommend registering the title service during bootstrapping,
|
Here we recommend registering the title service during bootstrapping,
|
||||||
a location we reserve for configuring the runtime Angular enviroment.
|
a location we reserve for configuring the runtime Angular environment.
|
||||||
|
|
||||||
That's exactly what we're doing.
|
That's exactly what we're doing.
|
||||||
The `Title` service is part of the Angular *browser platform*.
|
The `Title` service is part of the Angular *browser platform*.
|
||||||
|
|
|
@ -336,7 +336,7 @@ include _util-fns
|
||||||
## ECMAScript 2015
|
## ECMAScript 2015
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The lastest released version of JavaScript,
|
The latest released version of JavaScript,
|
||||||
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
||||||
(AKA "ES2015" or "ES6")
|
(AKA "ES2015" or "ES6")
|
||||||
:marked
|
:marked
|
||||||
|
|
|
@ -40,7 +40,7 @@ include ../_util-fns
|
||||||
We didn't care about `Engine` constructor parameters when we first wrote `Car`.
|
We didn't care about `Engine` constructor parameters when we first wrote `Car`.
|
||||||
We don't really care about them now.
|
We don't really care about them now.
|
||||||
But we'll *have* to start caring because
|
But we'll *have* to start caring because
|
||||||
when the definion of `Engine` changes, our `Car` class must change.
|
when the definition of `Engine` changes, our `Car` class must change.
|
||||||
That makes `Car` brittle.
|
That makes `Car` brittle.
|
||||||
|
|
||||||
What if we want to put a different brand of tires on our `Car`? Too bad.
|
What if we want to put a different brand of tires on our `Car`? Too bad.
|
||||||
|
|
|
@ -601,7 +601,7 @@ figure.image-display
|
||||||
Re-run the application. The form opens in a valid state and the button is enabled.
|
Re-run the application. The form opens in a valid state and the button is enabled.
|
||||||
|
|
||||||
Now delete the *Name*. We violate the "name required" rule which
|
Now delete the *Name*. We violate the "name required" rule which
|
||||||
is duely noted in our error message as before. And now the Submit button is also disabled.
|
is duly noted in our error message as before. And now the Submit button is also disabled.
|
||||||
|
|
||||||
Not impressed? Think about it for a moment. What would we have to do to
|
Not impressed? Think about it for a moment. What would we have to do to
|
||||||
wire the button's enable/disabled state to the form's validity without Angular's help?
|
wire the button's enable/disabled state to the form's validity without Angular's help?
|
||||||
|
|
|
@ -55,7 +55,7 @@ a(id="dependencies")
|
||||||
## *dependencies*
|
## *dependencies*
|
||||||
There are three package categories in the `dependencies` section of the application `package.json`:
|
There are three package categories in the `dependencies` section of the application `package.json`:
|
||||||
|
|
||||||
* ***Features*** - Feature packages provide our application with framework and utility capabilites.
|
* ***Features*** - Feature packages provide our application with framework and utility capabilities.
|
||||||
|
|
||||||
* ***Polyfills*** - Polyfills plug gaps in the browser's JavaScript implementation.
|
* ***Polyfills*** - Polyfills plug gaps in the browser's JavaScript implementation.
|
||||||
|
|
||||||
|
|
|
@ -218,7 +218,7 @@ a(id="common-configuration")
|
||||||
But most of our `import` statements won't mention the extension at all.
|
But most of our `import` statements won't mention the extension at all.
|
||||||
So we tell Webpack to _resolve_ module file requests by looking for matching files with
|
So we tell Webpack to _resolve_ module file requests by looking for matching files with
|
||||||
|
|
||||||
* an explicit extention (signified by the empty extension string, `''`) or
|
* an explicit extension (signified by the empty extension string, `''`) or
|
||||||
* `.js` extension (for regular JavaScript files and pre-compiled TypeScript files) or
|
* `.js` extension (for regular JavaScript files and pre-compiled TypeScript files) or
|
||||||
* `.ts` extension.
|
* `.ts` extension.
|
||||||
|
|
||||||
|
@ -306,7 +306,7 @@ a(id="development-configuration")
|
||||||
Our CSS are buried inside our Javascript bundles by default. The `ExtractTextPlugin` extracts them into
|
Our CSS are buried inside our Javascript bundles by default. The `ExtractTextPlugin` extracts them into
|
||||||
external `.css` files that the `HtmlWebpackPlugin` inscribes as <link> tags into the `index.html`.
|
external `.css` files that the `HtmlWebpackPlugin` inscribes as <link> tags into the `index.html`.
|
||||||
|
|
||||||
Refer to the Webpack documentation for details on these and other configuation options in this file
|
Refer to the Webpack documentation for details on these and other configuration options in this file
|
||||||
|
|
||||||
Grab the app code at the end of this guide and try:
|
Grab the app code at the end of this guide and try:
|
||||||
|
|
||||||
|
|
|
@ -134,7 +134,7 @@ code-example(format=".").
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
We explain input properties in more detail [here](../guide/attribute-directives.html#why-input)
|
We explain input properties in more detail [here](../guide/attribute-directives.html#why-input)
|
||||||
where we also explain why *target* properties require this special treament and
|
where we also explain why *target* properties require this special treatment and
|
||||||
*source* properties do not.
|
*source* properties do not.
|
||||||
:marked
|
:marked
|
||||||
There are a couple of ways we can declare that `hero` is an *input*.
|
There are a couple of ways we can declare that `hero` is an *input*.
|
||||||
|
|
|
@ -198,7 +198,7 @@ var createShredMapPackage = function(mapOptions) {
|
||||||
.config(function(readFilesProcessor, extractPathsReader ) {
|
.config(function(readFilesProcessor, extractPathsReader ) {
|
||||||
readFilesProcessor.fileReaders = [ extractPathsReader];
|
readFilesProcessor.fileReaders = [ extractPathsReader];
|
||||||
})
|
})
|
||||||
// default configs - may be overriden
|
// default configs - may be overridden
|
||||||
.config(function(readFilesProcessor) {
|
.config(function(readFilesProcessor) {
|
||||||
// Specify the base path used when resolving relative paths to source and output files
|
// Specify the base path used when resolving relative paths to source and output files
|
||||||
readFilesProcessor.basePath = '/';
|
readFilesProcessor.basePath = '/';
|
||||||
|
|
Loading…
Reference in New Issue