diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.spec.ts b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.spec.ts
deleted file mode 100644
index 90abbf1298..0000000000
--- a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {
- beforeEachProviders,
- describe,
- expect,
- it,
- inject
-} from '@angular/core/testing';
-import { CliQuickstartAppComponent } from '../app/cli-quickstart.component';
-
-beforeEachProviders(() => [CliQuickstartAppComponent]);
-
-describe('App: CliQuickstart', () => {
- it('should create the app',
- inject([CliQuickstartAppComponent], (app: CliQuickstartAppComponent) => {
- expect(app).toBeTruthy();
- }));
-
- it('should have as title \'cli-quickstart works!\'',
- inject([CliQuickstartAppComponent], (app: CliQuickstartAppComponent) => {
- expect(app.title).toEqual('cli-quickstart works!');
- }));
-});
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts
deleted file mode 100644
index 79ee96fdfd..0000000000
--- a/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// The file for the current environment will overwrite this one during build
-// Different environments can be found in config/environment.{dev|prod}.ts
-// The build system defaults to the dev environment
-
-export const environment = {
- production: false
-};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/index.ts b/public/docs/_examples/cli-quickstart/ts/src/app/index.ts
deleted file mode 100644
index e4a0d09c55..0000000000
--- a/public/docs/_examples/cli-quickstart/ts/src/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './environment';
-export * from './cli-quickstart.component';
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/shared/index.ts b/public/docs/_examples/cli-quickstart/ts/src/app/shared/index.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/cli-quickstart/ts/public/.npmignore b/public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep
similarity index 100%
rename from public/docs/_examples/cli-quickstart/ts/public/.npmignore
rename to public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep
diff --git a/public/docs/_examples/cli-quickstart/ts/config/environment.prod.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts
similarity index 100%
rename from public/docs/_examples/cli-quickstart/ts/config/environment.prod.ts
rename to public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts
diff --git a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts
new file mode 100644
index 0000000000..00313f1664
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+ production: false
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/index.html b/public/docs/_examples/cli-quickstart/ts/src/index.html
index d0efe67fee..8a1a7b32b3 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/index.html
+++ b/public/docs/_examples/cli-quickstart/ts/src/index.html
@@ -1,35 +1,14 @@
-
- CliQuickstart
+ MyApp
- {{#unless environment.production}}
-
- {{/unless}}
-
- Loading...
-
-
-
- {{#each scripts.polyfills}}{{/each}}
-
-
-
-
-
-
-
+ Loading...
-
diff --git a/public/docs/_examples/cli-quickstart/ts/src/main.ts b/public/docs/_examples/cli-quickstart/ts/src/main.ts
index c3561a2c57..ac78a713c2 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/main.ts
+++ b/public/docs/_examples/cli-quickstart/ts/src/main.ts
@@ -1,18 +1,12 @@
-// #docplaster
-// #docregion important
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import './polyfills.ts';
-// #enddocregion important
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
-import { environment } from './app/';
-// #docregion important
-import { CliQuickstartAppComponent } from './app/';
-// #enddocregion important
+import { environment } from './environments/environment';
+import { AppModule } from './app/app.module';
+
if (environment.production) {
enableProdMode();
}
-// #docregion important
-
-bootstrap(CliQuickstartAppComponent);
-// #enddocregion important
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
new file mode 100644
index 0000000000..4749399c2d
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/public/docs/_examples/cli-quickstart/ts/src/styles.css b/public/docs/_examples/cli-quickstart/ts/src/styles.css
new file mode 100644
index 0000000000..90d4ee0072
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/public/docs/_examples/cli-quickstart/ts/src/system-config.ts b/public/docs/_examples/cli-quickstart/ts/src/system-config.ts
deleted file mode 100644
index d2af1aac0c..0000000000
--- a/public/docs/_examples/cli-quickstart/ts/src/system-config.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/***********************************************************************************************
- * User Configuration.
- **********************************************************************************************/
-/** Map relative paths to URLs. */
-const map: any = {
-};
-
-/** User packages configuration. */
-const packages: any = {
-};
-
-////////////////////////////////////////////////////////////////////////////////////////////////
-/***********************************************************************************************
- * Everything underneath this line is managed by the CLI.
- **********************************************************************************************/
-const barrels: string[] = [
- // Angular specific barrels.
- '@angular/core',
- '@angular/common',
- '@angular/compiler',
- '@angular/http',
- '@angular/router',
- '@angular/platform-browser',
- '@angular/platform-browser-dynamic',
-
- // Thirdparty barrels.
- 'rxjs',
-
- // App specific barrels.
- 'app',
- 'app/shared',
- /** @cli-barrel */
-];
-
-const cliSystemConfigPackages: any = {};
-barrels.forEach((barrelName: string) => {
- cliSystemConfigPackages[barrelName] = { main: 'index' };
-});
-
-/** Type declaration for ambient System. */
-declare var System: any;
-
-// Apply the CLI SystemJS configuration.
-System.config({
- map: {
- '@angular': 'vendor/@angular',
- 'rxjs': 'vendor/rxjs',
- 'main': 'main.js'
- },
- packages: cliSystemConfigPackages
-});
-
-// Apply the user's configuration.
-System.config({ map, packages });
diff --git a/public/docs/_examples/cli-quickstart/ts/src/test.ts b/public/docs/_examples/cli-quickstart/ts/src/test.ts
new file mode 100644
index 0000000000..f9d51efd05
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/test.ts
@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json
index 7dbff17dfa..1cf713a384 100644
--- a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json
+++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.json
@@ -1,22 +1,18 @@
{
- "compileOnSave": false,
"compilerOptions": {
+ "baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
- "module": "commonjs",
+ "lib": ["es6", "dom"],
+ "mapRoot": "./",
+ "module": "es6",
"moduleResolution": "node",
- "noEmitOnError": true,
- "noImplicitAny": false,
- "outDir": "../dist/",
- "rootDir": ".",
+ "outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
- "inlineSources": true
- },
-
- "files": [
- "main.ts",
- "typings.d.ts"
- ]
+ "typeRoots": [
+ "../node_modules/@types"
+ ]
+ }
}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/typings.d.ts b/public/docs/_examples/cli-quickstart/ts/src/typings.d.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 583d479cb6..a1e0904223 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -40,6 +40,7 @@
"@types/angular-sanitize": "^1.3.3",
"@types/jasmine": "~2.5.36",
"@types/node": "^6.0.45",
+ "angular-cli": "^1.0.0-beta.26",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.0-beta.18",
"babel-cli": "^6.16.0",
diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade
index c56857448f..cf73ed27d0 100644
--- a/public/docs/_includes/_side-nav.jade
+++ b/public/docs/_includes/_side-nav.jade
@@ -37,6 +37,7 @@
- var basics = sections('guide', function(item) { return item.basics; });
- var guide = sections('guide', function(item) { return !item.basics; });
- var qs = sections('', function(item) { return item.slug === 'quickstart'; })[0] || {};
+- var cliqs = sections('', function(item) { return item.slug === 'cli-quickstart'; })[0] || {};
- var reference = sections('', function(item) { return item.reference; });
- var anyItemSelected = function(items) {
- var selectedCount = items.filter(function(item) { return !!item.class; }).length;
@@ -47,6 +48,11 @@
- var bit = splitted[splitted.length - 1].replace('.html', '');
- return bit === 'quickstart' ? 'is-selected' : '';
-}
+- var isCLIQuickstartSelected = function() {
+- var split = cur.split('/');
+- var bit = split[split.length - 1].replace('.html', '');
+- return bit === 'cli-quickstart' ? 'is-selected' : '';
+-}
- var isApiReferenceSelected = function() {
- var splitted = cur.split('/');
- var bit = splitted[splitted.length - 2];
@@ -79,6 +85,9 @@ nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav" data-swiftype-index="f
li.sidenav-section
a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart
+ li.sidenav-section
+ a(class="nav-title #{isCLIQuickstartSelected(cur)}" href="#{cliqs.href}" title="#{cliqs.tooltip}") CLI Quickstart
+
li.sidenav-section
a(class="nav-title is-parent #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Guide
@@ -137,4 +146,4 @@ script.
sideNav.scrollTop = link.offsetTop - (window.innerHeight/2);
//alert("offsetTop: " + link.offsetTop + " side-nav top is " + sideNav.scrollTop);
}
- })()
\ No newline at end of file
+ })()
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index 2f0f67fa99..1590ff3528 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -7,14 +7,6 @@
"banner": "The latest Angular release is 2.4. Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself."
},
- "cli-quickstart": {
- "icon": "query-builder",
- "title": "CLI Quickstart",
- "subtitle": "TypeScript",
- "description": "Use the CLI tool to quickly build Angular applications",
- "hide": true
- },
-
"quickstart": {
"icon": "query-builder",
"title": "Quickstart",
@@ -22,6 +14,13 @@
"banner": "A quick look at Angular basics"
},
+ "cli-quickstart": {
+ "icon": "query-builder",
+ "title": "CLI Quickstart",
+ "subtitle": "TypeScript",
+ "banner": "Use the CLI tool to quickly build Angular applications"
+ },
+
"tutorial": {
"icon": "list",
"title": "Tutorial",
diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade
index 90f33e179d..dc649d957f 100644
--- a/public/docs/ts/latest/cli-quickstart.jade
+++ b/public/docs/ts/latest/cli-quickstart.jade
@@ -2,7 +2,7 @@ include _util-fns
:marked
Good tools make application development quicker and easier to maintain than
- if we did everything by hand.
+ if you did everything by hand.
The [**Angular-CLI**](https://cli.angular.io/) is a **_command line interface_** tool
that can create a project, add files, and perform a variety of on-going development tasks such
@@ -13,10 +13,10 @@ include _util-fns
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
benefit _every_ Angular project.
- By the end of the chapter, we'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.
- We'll pursue these ends in the following high-level steps:
+ You'll pursue these ends in the following high-level steps:
1. [Set up](#devenv) the development environment
2. [Create](#create-proj) a new project and skeleton application
@@ -27,39 +27,31 @@ include _util-fns
.l-main-section
h2#devenv Step 1. Set up the Development Environment
:marked
- We need to set up our development environment before we can do anything.
+ You need to set up our development environment before you can do anything.
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine.
.l-sub-section
:marked
- **Verify that you are running node `v4.x.x` and npm `3.x.x`**
+ **Verify that you are running at least node `4.x.x` and npm `3.x.x`**
by running `node -v` and `npm -v` in a terminal/console window.
- Older versions produce errors.
+ Older versions produce errors, but newer versions are fine.
:marked
Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally.
-code-example(format="").
+code-example(language="sh" class="code-shell").
npm install -g angular-cli
.l-main-section
h2#create-project Step 2. Create a new project
:marked
Open a terminal window.
-
-.alert.is-important
- :marked
- _Windows Developers_: open a console window _as an **administrator**_.
- The Angular-CLI build steps later in this tutorial
- create symbolic links
- to various directories. These so-called _symlinks_ save time and space.
- But it takes administrator rights under Windows to create them.
:marked
Generate a new project and skeleton application by running the following commands:
-code-example(format="").
- ng new cli-quickstart
+code-example(language="sh" class="code-shell").
+ ng new my-app
.l-sub-section
:marked
@@ -70,12 +62,14 @@ code-example(format="").
h2#serve Step 3: Serve the application
:marked
Go to the project directory and launch the server.
-code-example(format="").
- cd cli-quickstart
+
+code-example(language="sh" class="code-shell").
+ cd my-app
ng serve
+
:marked
The `ng serve` command launches the server, watches our files,
- and rebuilds the app as we make changes to the files.
+ and rebuilds the app as you make changes to the files.
Open a browser on `http://localhost:4200/`; the app greets us with a message:
@@ -86,29 +80,23 @@ figure.image-display
h2#first-component Step 4: Edit our first Angular component
:marked
The CLI created our first Angular component for us.
- This is the _root component_ and it is named after the project. We created the project
- with the name `cli-quickstart` so our component is `CliQuickstartAppComponent` and
- it's in the file `/src/app/cli-quickstart.component.ts`
-.l-sub-section
- :marked
- _CliQuickstartAppComponent_ is a _horrible name_. Almost everyone renames it to _AppComponent_ ...
- and renames all of the associated files to _app.component.??_ as we do throughout the documentation.
- We'll leave that step as an exercise.
+ This is the _root component_ and it is named `app-root`.
+ You can find it in `./src/app/app.component.ts`.
:marked
- Open the component file and change the `title` property from _cli-quickstart works!_ to _My First Angular App_:
+ Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
-+makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.ts', 'title', 'src/app/cli-quickstart.component.ts')(format=".")
++makeExample('cli-quickstart/ts/src/app/app.component.ts', 'title', 'src/app/app.component.ts')(format=".")
:marked
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
-+makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.css', null, 'src/app/cli-quickstart.component.css')(format=".")
++makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".")
figure.image-display
- img(src='/resources/images/devguide/cli-quickstart/hello-angular.png' alt="Output of QuickStart app")
+ img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app")
:marked
Looking good!
@@ -116,163 +104,256 @@ figure.image-display
.l-main-section
:marked
## What's next?
- Our first application doesn't do much. It's basically "Hello, World" for Angular.
+ That's about all you'd expect to do in a "Hello, World" app.
- We kept it simple in our first pass: we wrote our first Angular application using the angular CLI
- and modified our first component. That's about all we'd expect to do for a "Hello, World" app.
+ You're ready to take the [Tour of Heroes Tutorial](./tutorial) and build
+ a small application that demonstrates the great things you can build with Angular.
- **We have greater ambitions!**
-:marked
- We're about to take the next step and build a small application that
- demonstrates the great things we can build with Angular.
+ Or you can stick around a bit longer to learn about the files in your brand new project.
- Join us on the [Tour of Heroes Tutorial](./tutorial)!
-
- Or stick around a bit longer to learn a few things about what we just did.
-
.l-main-section
-h1#behind-the-code Behind the code
:marked
- ### CliQuickstartAppComponent is the root of the application
+ ## Project file review
- Every Angular app has at least one **root component**, that hosts the client user experience.
- Components are the basic building blocks of Angular applications.
- A component controls a portion of the screen — a *view* — through its associated template.
+ An Angular-CLI project is the foundation for both quick experiments and enterprise solutions.
- This QuickStart has only one, extremely simple component.
- But it has the essential structure of every component we'll ever write:
+ The first file you should check out is `README.md`.
+ It has some basic information on how to use CLI commands.
+ Whenever you want to know more about how Angular-CLI works make sure to visit
+ [the Angular-CLI repository](https://github.com/angular/angular-cli) and
+ [Wiki](https://github.com/angular/angular-cli/wiki).
- * one or more [import](#component-import)
- statements to reference the things we need.
- * a [@Component decorator](#component-decorator)
- that tells Angular what template to use and how to create the component.
- * a [component class](#component-class)
- that controls the appearance and behavior of a view through its template.
+ Some of the generated files might be unfamiliar to you.
-a#component-import
-:marked
- ### Import
+block src-files
+ :marked
+ ### The `src` folder
+ Your app lives in the `src` folder.
+ All Angular components, templates, styles, images and anything else your app needs go here.
+ Any files outside of this folder are meant to support building your app.
- Angular apps are modular. They consist of many files, each dedicated to a purpose.
+.filetree
+ .file src
+ .children
+ .file app
+ .children
+ .file app.component.css
+ .file app.component.html
+ .file app.component.spec.ts
+ .file app.component.ts
+ .file app.module.ts
+ .file assets
+ .children
+ .file .gitkeep
+ .file environments
+ .children
+ .file environment.prod.ts
+ .file environment.ts
+ .file favicon.ico
+ .file index.html
+ .file main.ts
+ .file polyfills.ts
+ .file styles.css
+ .file test.ts
+ .file tsconfig.json
- Angular itself is modular. It is a collection of library modules
- consisting of several, related features that we'll use to build our application.
+style td, th {vertical-align: top}
+table(width="100%")
+ col(width="20%")
+ col(width="80%")
+ tr
+ th File
+ th Purpose
+ tr
+ td app/app.component.{ts,html,css,spec.ts}
+ td
+ :marked
+ Defines the `AppComponent` along with an HTML template, CSS stylesheet and a unit test.
+ It is the **root** component of what will become a tree of nested components
+ as the application evolves.
+ tr
+ td app/app.module.ts
+ td
+ :marked
+ Defines `AppModule`, the [root module](guide/appmodule.html "AppModule: the root module")
+ that tells Angular how to assemble the application.
+ Right now it declares only the `AppComponent`.
+ Soon there will be more components to declare.
+ tr
+ td assets/*
+ td
+ :marked
+ A folder where you can put images and anything else you need to be copied wholesale
+ when you build your application.
+ tr
+ td environments/*
+ td
+ :marked
+ This folder contains one file for each of your destination environments,
+ each exporting simple configuration variables to use on your application.
+ The files will be replaced on-the-fly when you build your app.
+ You might use a different API endpoint for development than you do for production.
+ Or maybe different analytics tokens.
+ Maybe even some mock services.
+ Either way, the CLI has you covered.
+ tr
+ td favicon.ico
+ td
+ :marked
+ Every site wants to look good on the bookmark bar.
+ Get started with your very own Angular icon.
+ tr
+ td index.html
+ td
+ :marked
+ The main html page that is served when someone visits your site.
+ Most of the time you'll never need to edit it.
+ The CLI will automatically add all `js` and `css` files when building your app so you
+ never need to add any `