honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(quickstart): restore app.module and main (#3166) 

We seemed to create more confusion by omitting app.module (and main) in QS than we gained in simplicity of QS
Every other example requires these files.
This PR restores them to QS _but doesn't talk about them_ in QS, leaving _that_ to the Setup guide.
This commit is contained in:
Ward Bell 2017-02-06 18:35:49 -08:00 committed by GitHub
parent dc4da634c4
commit b2f4148472
11 changed files with 50 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js
View File

@ -79,58 +79,6 @@
} }
}); });
if (global.autoBootstrap) { bootstrap(); }
// Bootstrap with a default `AppModule`
// ignore an `app/app.module.ts` and `app/main.ts`, even if present
// This function exists primarily (exclusively?) for the QuickStart
function bootstrap() {
console.log('Auto-bootstrapping');
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
getAppModule()
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
// Make the default AppModule
// returns a promise for the AppModule
function getAppModule() {
console.log('Making a bare-bones, default AppModule');
return Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('app/app.component')
])
.then(function (imports) {
var core = imports[0];
var browser = imports[1];
var appComp = imports[2].AppComponent;
var AppModule = function() {}
AppModule.annotations = [
new core.NgModule({
imports: [ browser.BrowserModule ],
declarations: [ appComp ],
bootstrap: [ appComp ]
})
]
return {AppModule: AppModule};
})
}
})(this); })(this);
/* /*

52
public/docs/_examples/_boilerplate/src/systemjs.config.web.js
View File

@ -66,58 +66,6 @@
} }
}); });
if (global.autoBootstrap) { bootstrap(); }
// Bootstrap with a default `AppModule`
// ignore an `app/app.module.ts` and `app/main.ts`, even if present
// This function exists primarily (exclusively?) for the QuickStart
function bootstrap() {
console.log('Auto-bootstrapping');
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
getAppModule()
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
// Make the default AppModule
// returns a promise for the AppModule
function getAppModule() {
console.log('Making a bare-bones, default AppModule');
return Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('app/app.component')
])
.then(function (imports) {
var core = imports[0];
var browser = imports[1];
var appComp = imports[2].AppComponent;
var AppModule = function() {}
AppModule.annotations = [
new core.NgModule({
imports: [ browser.BrowserModule ],
declarations: [ appComp ],
bootstrap: [ appComp ]
})
]
return {AppModule: AppModule};
})
}
})(this); })(this);
/* /*

2
public/docs/_examples/quickstart/ts/plnkr.json
View File

@ -3,6 +3,8 @@
"basePath": "src/", "basePath": "src/",
"files": [ "files": [
"app/app.component.ts", "app/app.component.ts",
"app/app.module.ts",
"main.ts",
"index.html" "index.html"
], ],
"open": "app/app.component.ts", "open": "app/app.component.ts",

5
public/docs/_examples/quickstart/ts/src/index.html
View File

@ -16,11 +16,6 @@
<script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- #docregion autobootstrap-->
<script> window.autoBootstrap = true; </script>
<!-- #enddocregion autobootstrap-->
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('main.js').catch(function(err){ console.error(err); }); System.import('main.js').catch(function(err){ console.error(err); });

28
public/docs/ts/latest/cli-quickstart.jade
View File

@ -8,13 +8,13 @@ include _util-fns
that can create a project, add files, and perform a variety of on-going development tasks such that can create a project, add files, and perform a variety of on-going development tasks such
as testing, bundling, and deployment. as testing, bundling, and deployment.
Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular The goal in this CLI QuickStart chapter is to build and run a super-simple Angular
application in TypeScript, using Angular-CLI application in TypeScript, using Angular-CLI
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
benefit _every_ Angular project. benefit _every_ Angular project.
By the end of the chapter, you'll have a basic understanding of development with the CLI By the end of the chapter, you'll have a basic understanding of development with the CLI
and a foundation for both these documentation samples and our real world applications. and a foundation for both these documentation samples and for real world applications.
You'll pursue these ends in the following high-level steps: You'll pursue these ends in the following high-level steps:
@ -27,7 +27,7 @@ include _util-fns
.l-main-section .l-main-section
h2#devenv Step 1. Set up the Development Environment h2#devenv Step 1. Set up the Development Environment
:marked :marked
You need to set up our development environment before you can do anything. You need to set up your development environment before you can do anything.
Install **[Node.js® and npm](https://nodejs.org/en/download/)** Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine. if they are not already on your machine.
@ -68,18 +68,18 @@ code-example(language="sh" class="code-shell").
ng serve ng serve
:marked :marked
The `ng serve` command launches the server, watches our files, The `ng serve` command launches the server, watches your files,
and rebuilds the app as you make changes to the files. and rebuilds the app as you make changes to those files.
Open a browser on `http://localhost:4200/`; the app greets us with a message: Open a browser on `http://localhost:4200/`; the app greets you with a message:
figure.image-display figure.image-display
img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!") img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!")
.l-main-section .l-main-section
h2#first-component Step 4: Edit our first Angular component h2#first-component Step 4: Edit your first Angular component
:marked :marked
The CLI created our first Angular component for us. The CLI created the first Angular component for you.
This is the _root component_ and it is named `app-root`. This is the _root component_ and it is named `app-root`.
You can find it in `./src/app/app.component.ts`. You can find it in `./src/app/app.component.ts`.
@ -91,7 +91,7 @@ h2#first-component Step 4: Edit our first Angular component
:marked :marked
The browser reloads automatically and we see the revised title. That's nice, but we can make it look better. The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
Open `src/app/cli-quickstart.component.css` and give our component some style Open `src/app/cli-quickstart.component.css` and give the component some style
+makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".") +makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".")
@ -175,8 +175,7 @@ table(width="100%")
td <code>app/app.module.ts</code> td <code>app/app.module.ts</code>
td td
:marked :marked
Defines `AppModule`, the [root module](guide/appmodule.html "AppModule: the root module") Defines `AppModule`, the [root module](guide/appmodule.html "AppModule: the root module") that tells Angular how to assemble the application.
that tells Angular how to assemble the application.
Right now it declares only the `AppComponent`. Right now it declares only the `AppComponent`.
Soon there will be more components to declare. Soon there will be more components to declare.
tr tr
@ -215,9 +214,8 @@ table(width="100%")
td td
:marked :marked
The main entry point for your app. The main entry point for your app.
Compiles the application with the [JiT compiler](glossary.html#jit) Compiles the application with the [JIT compiler](glossary.html#jit)
and [bootstraps](guide/appmodule.html#main "bootstrap the application") and bootstraps the application's root module (`AppModule`) to run in the browser.
the application to run in the browser.
You can also use the [AoT compiler](glossary.html#ahead-of-time-aot-compilation) You can also use the [AoT compiler](glossary.html#ahead-of-time-aot-compilation)
without changing any code by passing on `--aot` to `ng build` or `ng serve`. without changing any code by passing on `--aot` to `ng build` or `ng serve`.
tr tr

1
public/docs/ts/latest/guide/_data.json
View File

@ -33,7 +33,6 @@
"basics": true "basics": true
}, },
"appmodule": { "appmodule": {
"title": "AppModule: the root module", "title": "AppModule: the root module",
"navTitle": "The Root Module", "navTitle": "The Root Module",

35
public/docs/ts/latest/guide/appmodule.jade
View File

@ -22,7 +22,7 @@ include ../_util-fns
* **_declarations_** &mdash; the application's lone component, which is also ... * **_declarations_** &mdash; the application's lone component, which is also ...
* **_bootstrap_** &mdash; the _root_ component that Angular creates and inserts into the `index.html` host web page. * **_bootstrap_** &mdash; the _root_ component that Angular creates and inserts into the `index.html` host web page.
The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules. The [Angular Modules (NgModule)](ngmodule.html) guide dives deeply into the details of Angular modules.
All you need to know at the moment is a few basics about these three properties. All you need to know at the moment is a few basics about these three properties.
a#imports a#imports
@ -43,27 +43,31 @@ a#imports
.alert.is-important .alert.is-important
:marked :marked
**Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`. **Only `NgModule` classes** go in the `imports` array. Do not put any other kind of class in `imports`.
.l-sub-section .l-sub-section
:marked :marked
Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array. The `import` statements at the top of the file and the Angular module's `imports` array
They have different jobs. are unrelated and have completely different jobs.
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
so you can reference them within _this_ file. so you can reference them within _this_ file.
You add `import` statements to almost every application file.
They have nothing to do with Angular and Angular knows nothing about them. They have nothing to do with Angular and Angular knows nothing about them.
The _module's_ `imports` array tells Angular about specific Angular modules &mdash; classes decorated with `@NgModule` &mdash; The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
It tells Angular about specific _other_ Angular modules &mdash; all of them classes decorated with `@NgModule` &mdash;
that the application needs to function properly. that the application needs to function properly.
a#declarations a#declarations
:marked :marked
### The _declarations_ array ### The _declarations_ array
You must declare _every_ component in one (and _only one_) `NgModule` class.
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array. You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
As you create more components, you'll add them to `declarations`. As you create more components, you'll add them to `declarations`.
You must declare _every_ component in an `NgModule` class.
If you use a component without declaring it, you'll see a clear error message in the browser console.
You'll learn to create two other kinds of classes &mdash; You'll learn to create two other kinds of classes &mdash;
[directives](attribute-directives.html) and [pipes](pipes.html) &mdash; [directives](attribute-directives.html) and [pipes](pipes.html) &mdash;
that you must also add to the `declarations` array. that you must also add to the `declarations` array.
@ -71,7 +75,7 @@ a#declarations
.alert.is-important .alert.is-important
:marked :marked
**Only _declarables_** &mdash; _components_, _directives_ and _pipes_ &mdash; belong in the `declarations` array. **Only _declarables_** &mdash; _components_, _directives_ and _pipes_ &mdash; belong in the `declarations` array.
Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes. Do not put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes.
a#bootstrap-array a#bootstrap-array
:marked :marked
@ -121,18 +125,13 @@ l-main-section
This file is very stable. Once you've set it up, you may never change it again. This file is very stable. Once you've set it up, you may never change it again.
a#quickstart-appmodule
l-main-section l-main-section
:marked :marked
## QuickStart's _AppModule_ ## More about Angular Modules
Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html).
You didn't see it but it was there.
A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you Your initial app has only a single module, the _root_ module.
so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly. As your app grows, you'll consider subdividing it into multiple "feature" modules,
so of which can be loaded later ("lazy loaded") if and when the user chooses
to visit those features.
If you're feeling adventurous, add your own `AppModule` and `main.ts` to the When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](ngmodule.html) guide.
live code in the _QuickStart_ plunker.
Remove the following `<script>` tag from the `index.html` and see _your_ work in action.
+makeExample('quickstart/ts/src/index.html','autobootstrap','Remove this script tag from "index.html"')(format='.')

5
public/docs/ts/latest/guide/learning-angular.jade
View File

@ -18,9 +18,8 @@ figure
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access. a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
1. <a id="architecture"></a>Read the [Architecture](architecture.html) overview for the big picture. 1. <a id="architecture"></a>Read the [Architecture](architecture.html) overview for the big picture.
<li if-docs="ts"><p>
[The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application. 1. [The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application.
</p></li>
1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen. 1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen.

4
public/docs/ts/latest/guide/ngmodule.jade
View File

@ -14,11 +14,11 @@ block includes
It may add service providers to the application dependency injectors. It may add service providers to the application dependency injectors.
And there are many more options covered here. And there are many more options covered here.
[The Root Module](appmodule.html) page introduced Angular Modules and the essentials [The Root Module](appmodule.html) guide introduced Angular Modules and the essentials
of creating and maintaining a single _root_ `AppModule` for the entire application. of creating and maintaining a single _root_ `AppModule` for the entire application.
Read that first. Read that first.
This page goes into much greater depth as this extensive table of contents reveals. This page goes into Angular modules in much greater depth.
## Table of Contents ## Table of Contents
* [Angular modularity](#angular-modularity "Add structure to the app with NgModule") * [Angular modularity](#angular-modularity "Add structure to the app with NgModule")

18
public/docs/ts/latest/guide/setup.jade
View File

@ -20,11 +20,6 @@ a#develop-locally
Setting up a new project on your machine is quick and easy with the **QuickStart seed**, Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
maintained [on github](!{_qsRepo} "Install the github QuickStart repo"). maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
.l-sub-section
:marked
The <live-example title="QuickStart Seed in Plunker">QuickStart seed live-example</live-example> is QuickStart
_plus_ the `app.module.ts` and `main.ts` application files ([described below](#app-files "QuickStart application files")) that facilitate richer application examples.
:marked :marked
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?"). Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
Then ... Then ...
@ -81,9 +76,9 @@ a#non-essential
### OS/X (bash) ### OS/X (bash)
code-example(language="sh" class="code-shell"). code-example(language="sh" class="code-shell").
xargs -a non-essential-files.txt rm -rf xargs rm -rf &lt; non-essential-files.osx.txt
rm src/app/*.spec*.ts rm src/app/*.spec*.ts
rm non-essential-files.txt rm non-essential-files.osx.txt
:marked :marked
### Windows ### Windows
@ -166,11 +161,12 @@ table(width="100%")
td <ngio-ex>main.ts</ngio-ex> td <ngio-ex>main.ts</ngio-ex>
td td
:marked :marked
Compiles the application with the [JIT compiler](../glossary.html#jit) Compiles the application with the [JIT compiler](../glossary.html#jit) and
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser. [bootstraps](appmodule.html#main "bootstrap the application")
That's a reasonable choice for the development of most projects and the application's main module (`AppModule`) to run in the browser.
The JIT compiler is a reasonable choice during the development of most projects and
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker. it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
You'll learn about alternative compiling and deployment options later in the documentation. You'll learn about alternative compiling and [deployment](deployment.html) options later in the documentation.
.l-sub-section .l-sub-section
:marked :marked