From 38fe94df81dcded7b317cfa67584388e79d93612 Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Wed, 27 Jul 2016 00:24:54 -0700 Subject: [PATCH] docs(qs-reboot): edits for the quickstart --- .../_examples/quickstart/ts/app/app.module.ts | 6 +- .../quickstart/ts/app/app.module2.ts | 12 + .../docs/_examples/quickstart/ts/app/main.ts | 3 +- public/docs/ts/latest/_data.json | 2 +- public/docs/ts/latest/index.jade | 2 +- public/docs/ts/latest/quickstart.jade | 690 ++++++------------ .../devguide/quickstart/my-first-app.png | Bin 7461 -> 14936 bytes 7 files changed, 249 insertions(+), 466 deletions(-) create mode 100644 public/docs/_examples/quickstart/ts/app/app.module2.ts diff --git a/public/docs/_examples/quickstart/ts/app/app.module.ts b/public/docs/_examples/quickstart/ts/app/app.module.ts index b4fc185c24..cd9673617d 100644 --- a/public/docs/_examples/quickstart/ts/app/app.module.ts +++ b/public/docs/_examples/quickstart/ts/app/app.module.ts @@ -2,11 +2,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; - @NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + imports: [ BrowserModule ] }) export class AppModule { } diff --git a/public/docs/_examples/quickstart/ts/app/app.module2.ts b/public/docs/_examples/quickstart/ts/app/app.module2.ts new file mode 100644 index 0000000000..556d3e69b9 --- /dev/null +++ b/public/docs/_examples/quickstart/ts/app/app.module2.ts @@ -0,0 +1,12 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { AppComponent} from './app.component' + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) + +export class AppModule { } diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts index 4ad787ebfd..e36de73708 100644 --- a/public/docs/_examples/quickstart/ts/app/main.ts +++ b/public/docs/_examples/quickstart/ts/app/main.ts @@ -5,4 +5,5 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; // #enddocregion import -platformBrowserDynamic().bootstrapModule(AppModule); +const platform = platformBrowserDynamic(); +platform.bootstrapModule(AppModule); diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index c774c59ca0..ad5f75d32f 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -15,7 +15,7 @@ "quickstart": { "icon": "query-builder", - "title": "5 Min Quickstart", + "title": "Quickstart", "description": "Get up and running with Angular 2" }, diff --git a/public/docs/ts/latest/index.jade b/public/docs/ts/latest/index.jade index ef50209c3e..fe6c8a9e6c 100644 --- a/public/docs/ts/latest/index.jade +++ b/public/docs/ts/latest/index.jade @@ -3,7 +3,7 @@ div.card-row.docs-landing.layout-align-space-around-center.layout-row.flex md-card.card md-card-content.layout-align-space-between-center.layout-column.flex div - h2.text-headline.text-uppercase 5 Minute Quickstart + h2.text-headline.text-uppercase Quickstart p A short beginner guide explaining the basic concepts of Angular footer diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 20ff1a90b7..fc1529d8f5 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -1,133 +1,122 @@ block includes include _util-fns - var _Install = 'Install' - - var _prereq = 'Node.js' + - var _prereq = 'Node.js and npm' - var _angular_browser_uri = '@angular/platform-browser-dynamic' - var _angular_core_uri = '@angular/core' - - var _stepInit = 4 // Step # after NgModule step + - var _stepInit = 3 // Step # after NgModule step - var _quickstartSrcURL='https://github.com/angular/quickstart/blob/master/README.md' //- TS/Dart shared step counter - var step = _stepInit :marked - Our QuickStart goal is to build and run a super-simple - Angular 2 application in #{_Lang}, and - establish a development environment for the remaining documentation samples - that also can be the foundation for real world applications. + This QuickStart guide demonstrates how to build and run a simple Angular 2 application in #{_Lang}. + It also establishes a common development environment used throughout the code examples in these + guides. .callout.is-helpful header Don't want #{_Lang}? p. - Although we're getting started in #{_Lang}, you can also write Angular 2 apps - in #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'} and JavaScript. - Just select either of those languages from the combo-box in the banner. + Although you're getting started in #{_Lang}, you can also write Angular 2 applications + in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the + banner to switch development languages for this guide. +.l-main-section +h1 Overview + +aside.is-right + :marked + The live example link opens the finished application in + Plunker so that you can interact + with the code. You'll find live examples at the start of most sections. :marked - # Try it! - - Try the which loads the sample app - - in plunker - - and displays the simple message: + The QuickStart application has the structure of a real-world Angular application and + displays the simple message: figure.image-display img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app") :marked - # Build this app! + **Try it out**. Here's a link to a . - - [Prerequisite](#prereq): Install #{_prereq} - - [Step 1](#create-and-configure): Create the app’s project folder and - define package dependencies and special project setup - - [Step 2](#root-component): Create the app’s Angular root component -
  • [Step 3](#ngmodule): Create an Angular Module
    • - - [Step !{step++}](#main): Add main.ts, identifying the root component to Angular - - [Step !{step++}](#index): Add `index.html`, the web page that hosts the application - - [Step !{step++}](#build-and-run): Build and run the app - - [Make some changes to the app](#make-some-changes) - - [Wrap up](#wrap-up) + You can also + clone the entire QuickStart application from GitHub. + +h2 Build this application! + +:marked + - [Prerequisite](#prereq): Install #{_prereq}. + - [Step 1](#create-and-configure): Create and configure the project. +
  • [Step 2](#ngmodule): Create your application.
    • + - [Step !{step++}](#root-component): Create a component and add it to your application. + - [Step !{step++}](#main): Start up your application. + - [Step !{step++}](#index): Define the web page that hosts the application. + - [Step !{step++}](#build-and-run): Build and run the application. + - [Step !{step++}](#make-changes): Make some live changes. + - [Wrap up and Next Steps](#wrap-up) - var step = _stepInit // reinitialize step counter for headers to come + .l-main-section#prereq -h2 Prerequisite: #{_prereq} +h1 Prerequisite: Install #{_prereq} block setup-tooling :marked - 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 at least node `v4.x.x` and npm `3.x.x`** - by running `node -v` and `npm -v` in a terminal/console window. - Older versions produce errors. + If Node.js and npm aren't already on your machine, install them. Our examples require node **v5.x.x** or higher and + npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v` + in a terminal window. + +aside.is-right + :marked + To easily copy text from a code example, click the *Copy to Clipboard* icon (content_copy ) in the upper right corner of + the example box. .l-main-section -.callout.is-helpful - header Download the source - :marked - Instead of following each step of these instructions, we can - [download the QuickStart source](!{_quickstartSrcURL}) - from GitHub and follow its brief instructions. +h1#create-and-configure Step 1: Create and configure the project -.l-main-section -button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)"). - Hide explanations -button(class="verbose on md-primary md-button md-ink-ripple", type="button", onclick="verbose(true)"). - View explanations -.l-verbose-section - :marked - *Explanations* describe the concepts and reasons behind the instructions. - Explanations have a thin border on the left like *this* block of text. +- var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'configuration files' - Click *Hide Explanations* to show only the instructions. - Click *View Explanations* to see everything again. - -.l-sub-section - :marked - We'll see many code blocks as we build the QuickStart app. They're all easy to copy and paste: - code-example(format="nocode"). - Click the glyph on the right to copy code snippets to the clipboard ==> - -- var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'package definition and configuration files' - -.l-main-section#create-and-configure :marked - ## Step 1: Create and configure the project + In this step you will: + * [Create the project folder](#create-the-project-folder) + * [Create #{_package_and_config_files}](#add-config-files) + * [#{_Install} packages](#install-packages) - In this step we: - * [(a) Create the project folder](#create-the-project-folder) - * [(b) Add #{_package_and_config_files}](#add-config-files) - * [(c) #{_Install} packages](#install-packages) - - ### (a) Create the project folder +h2 Create the project folder +:marked + Using a terminal window, create a directory for the project, and change into this + directory. - var _ = _docsFor == 'dart' ? '_' : '-'; code-example(language="sh"). mkdir angular2!{_}quickstart cd angular2!{_}quickstart -h3#add-config-files (b) Add #{_package_and_config_files} +h2#add-config-files Create #{_package_and_config_files} block package-and-config-files - var _tsconfigUri = 'guide/typescript-configuration.html#tsconfig' - - var _typingsUri = 'guide/typescript-configuration.html#!#typings' - p Add the following package definition and configuration files to the project folder: + p Our typical Angular project needs several configuration files: ul li. - #[b package.json] lists packages the QuickStart app depends on and - defines some useful scripts. - See #[a(href="guide/npm-packages.html") Npm Package Configuration] for details. + #[b package.json] identifies npm package dependencies for the project. li. - #[b tsconfig.json] is the TypeScript compiler configuration file. - See #[a(href="#{_tsconfigUri}") TypeScript Configuration] for details. + #[b tsconfig.json] defines how the TypeScript compiler generates JavaScript from the project's + files. li. - #[b typings.json] identifies TypeScript definition files. - See #[a(href="#{_typingsUri}") TypeScript Configuration] for details. + #[b typings.json] provides additional definition files for libraries that the TypeScript + compiler doesn't natively recognize. li. - #[b systemjs.config.js], the SystemJS configuration file. - See discussion #[a(href="#systemjs") below]. + #[b systemjs.config.js] provides information to a module loader about where to find + application modules, and registers all the necessary packages. It also + contains other packages that will be needed by later documentation examples. + + p. + Create each of these files in your project directory. Populate them by pasting in text from + the tabs in the example box below. a#config-files +makeTabs(` @@ -142,82 +131,95 @@ block package-and-config-files systemjs.config.js `) -h3#install-packages (c) #{_Install} packages + p. + Learn more about these configuration files in the + #[a(href="guide/npm-packages.html") Npm Package Configuration] guide and the + #[a(href="#{_tsconfigUri}") TypeScript Configuration] guide. + A detailed discussion of module loading is beyond the scope of this guide. + + .callout.is-helpful + header SystemJS or Webpack? + p. + Although we use SystemJS for illustrative purposes here, it's only one option for loading + modules. Use the module loader that you prefer. For Webpack and Angular, see + Webpack: an Introduction. Or, learn more about SystemJS configuration in general here. + + + h2#install-packages #{_Install} packages block install-packages :marked - We install the packages listed in `package.json` using `npm`. Enter the - following command in a terminal window (command window in Windows): + Using npm from the command line, install the packages listed in `package.json` with the command: code-example(language="sh"). npm install - .l-sub-section - :marked - The `typings` folder could not show up after `npm install`. If so, please install them manually. + :marked + Error messages—in red—might appear during the install, and you might see `npm WARN` messages. As long as there are no `npm ERR!` messages at the end, you can assume success. - code-example(language="sh"). + :marked + You should now have the following structure: + + .filetree + .file angular2-quickstart + .children + .file node_modules ... + .file typings ... + .file package.json + .file systemjs.config.js + .file tsconfig.json + .file typings.json + + + :marked + If the `typings` folder doesn't show up after running `npm install`, you'll need to install it manually with the command: + + code-example(language="sh"). npm run typings install - .alert.is-important - :marked - Scary error messages in red may appear **during** install. - The install typically recovers from these errors and finishes successfully. - .l-verbose-section(class="l-verbose-inherit") - :marked - #### npm errors and warnings - - All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**. - There might be a few `npm WARN` messages along the way — and that is perfectly fine. - - We often see an `npm WARN` message after a series of `gyp ERR!` messages. - Ignore them. A package may try to recompile itself using `node-gyp`. - If the recompile fails, the package recovers (typically with a pre-built version) - and everything works. - - Just make sure there are no `npm ERR!` messages at the end of `npm install`. - - .l-verbose-section - :marked - #### Adding the libraries and packages we need with *npm* - Angular application developers rely on the _[npm](https://docs.npmjs.com)_ - package manager to install the libraries and packages their apps require. - The Angular team recommends the starter-set of packages specified in the - `dependencies` and `devDependencies` sections. - See the [npm packages](guide/npm-packages.html) chapter for details. - - #### Helpful scripts - We've included a number of npm scripts in our suggested `package.json` to handle common development tasks: - +makeJson('quickstart/ts/package.1.json',{ paths: 'scripts'}, 'package.json (scripts)')(format=".") - - :marked - We execute most npm scripts in the following way: `npm run` followed by a *script-name*. - Some commands (such as `start`) don't require the `run` keyword. - - Here's what these scripts do: - - * `npm start` - runs the compiler and a server at the same time, both in "watch mode" - - * `npm run tsc` - runs the TypeScript compiler once - - * `npm run tsc:w` - runs the TypeScript compiler in watch mode; - the process keeps running, awaiting changes to TypeScript files and recompiling when it sees them - - * `npm run lite` - runs the lite-server, - a light-weight, static file server with excellent support for Angular apps that use routing - - * `npm run typings` - runs the [*typings* tool](#{_typingsUri}) separately - - * `npm run postinstall` - called by *npm* automatically *after* it successfully completes package installation. - This script installs the [TypeScript definition files](#{_typingsUri}) defined in `typings.json` - :marked - **We're all set.** Let's write some code. + You're now ready to write some code! ++ifDocsFor('ts') + .l-main-section + h1#ngmodule Step 2: Create your application + :marked + You compose Angular applications into closely related blocks of functionality with + [NgModules](guide/ngmodule.html). Angular itself is split into separate Angular Modules. This + makes it possible for you to keep payload size small by only importing the parts of Angular + that your application needs. -.l-main-section#root-component + Every Angular application has at least one module: the _root module_, named `AppModule` here. + + Create the file `app/app.module.ts` with the following content: + + +makeExample('app/app.module.ts')(format='.') + + :marked + This is the entry point to your application. + + Since the QuickStart application is a web application that runs in a browser, your root module + needs to import the + [`BrowserModule`](../latest/api/platform-browser/index/BrowserModule-class.html) + from `@angular/platform-browser` to the `imports` array. + + This is the smallest amount of Angular that is needed for a minimal application to run in the + browser. + + The QuickStart application doesn't do anything else, so you don't need any other modules. In a real + application, you'd likely import [`FormsModule`](../latest/api/forms/index/FormsModule-class + .html) as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and + [`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the + [Tour of Heroes Tutorial](../tutorial/). + + +.l-main-section +h1#root-component Step !{step++}: Create a component and add it to your application :marked - ## Step 2: Our first Angular component + Every Angular application has at least one component: the _root component_, named `AppComponent` + here. - Let's create a folder to hold our application and add a super-simple Angular component. + Components are the basic building blocks of Angular applications. A component controls a portion + of the screen—a *view*—through its associated template **Create #{_an} #{_appDir} subfolder** off the project root directory: @@ -231,295 +233,92 @@ p. +makeExample('app/app.component.ts') -.l-verbose-section - :marked - ### AppComponent is the root of the application +:marked + The QuickStart application has the same essential structure as any other Angular component: - Every Angular app has at least one **root component**, conventionally named `AppComponent`, - 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 import statement**. Importing gives your component access to + Angular's core [`@Component` decorator function](../latest/api/core/index/Component-decorator + .html). + * **A @Component #{_decorator}** that associates *metadata* with the + `AppComponent` component class: - This QuickStart has only one, extremely simple component. - But it has the essential structure of every component we'll ever write: + - a *selector* that specifies a simple CSS selector for an HTML element that represents + the component + - a *template* that tells Angular how to render the component's view. + * **A component class** that controls the appearance and behavior of a view + through its template. Here, you only have the root component, `AppComponent`. Since you don't + need any application logic in the simple QuickStart example, it's empty. - * 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. + You *export* the `AppComponent` class so that you can *import* it into the application that you + just created. - a#component-import - :marked - ### Import + Edit the file `app/app.module.ts` to import your new `AppComponent` and add it in the + declarations and bootstrap fields in the `NgModule` decorator: - Angular apps are modular. They consist of many files each dedicated to a purpose. - Angular itself is modular. It is a collection of library modules - each made up of several, related features that we'll use to build our application. - - When we need something from a module or library, we import it. - Here we import the Angular 2 core so that our component code can have access to - the `@Component` #{_decorator}. - - +makeExcerpt('app/app.component.ts', 'import') - - h3#component-decorator @Component #{_decorator} - +ifDocsFor('ts') - :marked - `Component` is a *decorator function* that takes a *metadata object* as argument. - We apply this function to the component class by prefixing the function with the - **@** symbol and invoking it with a metadata object, just above the class. - :marked - `@Component` is #{_a} *#{_decorator}* that allows us to associate *metadata* with the - component class. - The metadata tells Angular how to create and use this component. - - +makeExcerpt('app/app.component.ts', 'metadata') - - block annotation-fields - :marked - This particular metadata object has two fields, a `selector` and a `template`. - :marked - The **selector** specifies a simple CSS selector for an HTML element that represents the component. - - >The element for this component is named `my-app`. - Angular creates and displays an instance of our `AppComponent` - wherever it encounters a `my-app` element in the host HTML. - - The **template** specifies the component's companion template, - written in an enhanced form of HTML that tells Angular how to render this component's view. - - >Our template is a single line of HTML announcing "*My First Angular 2 App*". - - >A more advanced template could contain data bindings to component properties - and might identify other application components which have their own templates. - These templates might identify yet other components. - In this way an Angular application becomes a tree of components. - - :marked - ### Component class - At the bottom of the file is an empty, do-nothing class named `AppComponent`. - +makeExcerpt('app/app.component.ts', 'class') - :marked - When we're ready to build a substantive application, - we can expand this class with properties and application logic. - Our `AppComponent` class is empty because we don't need it to do anything in this QuickStart. - +ifDocsFor('ts') - :marked - We **export** `AppComponent` so that we can **import** it elsewhere in our application, - as we'll see when we create `app.module.ts`. - -+ifDocsFor('ts') - .l-main-section#ngmodule - :marked - ## Step 3: Our own `app.module.ts` - - We compose Angular apps into closely related blocks of functionality with [Angular Modules](guide/ngmodule.html). - Every app requires at least one module, the _root module_, that we call `AppModule` by convention. - - Create the file `app/app.module.ts` with the following content: - - +makeExample('app/app.module.ts')(format='.') - - .l-verbose-section - :marked - We're passing metadata to the `NgModule` decorator function: - - 1. `imports` - the _other_ modules that export material we need in _this_ module. - Almost every application's _root module_ should import the `BrowserModule`. - - 1. `declarations` - components and directives that belong to _this_ module. - - 1. `bootstrap` - identifies the _root component_ that Angular should _bootstrap_ when it starts the application. - - We import our lone `app.component.ts` and add it to both the `declarations` and `bootstrap` arrays. - - ### Angular Modules import other modules - Notice that we also add the `BrowserModule` from `@angular/platform-browser` to the `imports` array. - This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser. - - Angular itself is split into separate Angular Modules so we only need to import the ones we really use. - - One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`. ++makeExample('app/app.module2.ts', null, title='app/app.module.ts') .l-main-section -h2#main Step !{step++}: Add #[code #[+adjExPath('main.ts')]] +h1#main Step !{step++}: Start up your application block create-main :marked - Now we need something to tell Angular to load the app module. + Now you need to tell Angular to start up your application. + Create the file `app/main.ts` with the following content: +makeExample('app/main.ts') + - var _pBD_bootstrapModule = _docsFor == 'dart' ? _bootstrapModule : 'platformBrowserDynamic().bootstrapModule' -.l-verbose-section + +:marked + This code initializes the platform that your application runs in, then uses the platform to + bootstrap your `!{_AppModuleVsAppComp}`. + + ### Why create separate *main.ts*, app module and app component files? + + App bootstrapping is a separate concern from creating a module or + presenting a view. Testing the component is much easier if it doesn't also try to run the entire application. + + +.callout.is-helpful + header Bootstrapping is platform-specific + :marked - We import the two things we need to launch the application: - - 1. Angular's browser `!{_platformBrowserDynamicVsBootStrap}` function - 1. The application !{_moduleVsRootComp}, `!{_AppModuleVsAppComp}`. - - Then we call `!{_pBD_bootstrapModule}` with `!{_AppModuleVsAppComp}`. - - ### Bootstrapping is platform-specific - - Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function - from `#{_angular_browser_uri}`, not `#{_angular_core_uri}`. - Bootstrapping isn't core because there isn't a single way to bootstrap the app. - True, most applications that run in a browser call the bootstrap function from - this library. - - But it is possible to load a !{_moduleVsComp} 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 wish to render the first page of our application on the server - to improve launch performance or facilitate - [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf). - These targets require a different kind of bootstrap function that we'd import from a different library. - - ### Why create separate *main.ts*, app module and app component files? - - Then main.ts, app module - and the app component files are tiny. - This is just a QuickStart. - We could have merged these files into one and spared ourselves some complexity. - - We'd rather demonstrate the proper way to structure an Angular application. - App bootstrapping is a separate concern from creating a module or - presenting a view. - Mixing concerns creates difficulties down the road. - We might launch the `!{_AppModuleVsAppComp}` in multiple environments with different bootstrappers. - Testing the component is much easier if it doesn't also try to run the entire application. - Let's make the small extra effort to do it *the right way*. + Because the QuickStart application runs directly in the browser, `main.ts` imports the + `!{_platformBrowserDynamicVsBootStrap}` function from `#{_angular_browser_uri}`, not + `#{_angular_core_uri}`. On a mobile device, you might load a !{_moduleVsComp} with + [Apache Cordova](https://cordova.apache.org/) or + [NativeScript](https://www.nativescript.org/), using a bootstrap function that's specific + to that platform. .l-main-section -h2#index Step !{step++}: Add #[code index.html] +h1#index Step !{step++}: Define the web page that hosts the application :marked - In the *#{_indexHtmlDir}* folder + In the *#{_indexHtmlDir}* folder, create an `index.html` file and paste the following lines into it: +makeExample('index.html') -.l-verbose-section - :marked - The `index.html` file defines the web page that hosts the application. - +ifDocsFor('ts') - :marked - The noteworthy sections of HTML are: ++ifDocsFor('ts') +:marked + The noteworthy sections here are: - 1. The JavaScript [libraries](#libraries) - 2. Configuration file for [SystemJS](#systemjs), and a script - where we import and run the `app` module which refers to the `main` file that we just wrote. - 3. The [``](#my-app) tag in the `` which is *where our app lives!* + * JavaScript libraries: `core-js` polyfills for older browsers, the `zone.js` and + `reflect-metadata` libraries needed by Angular, and the `SystemJS` library for module loading. + * Configuration file for `SystemJS`, and a script + where you import and run the `app` module which refers to the `main` file that you just + wrote. + * The [``](#my-app) tag in the `` which is *where your app lives!* - :marked - ### Libraries - We loaded the following scripts - +makeExcerpt('index.html', 'libraries') - :marked - We begin with `core-js`'s ES2015/ES6 shim which monkey patches the global context (window) with essential features of ES2015 (ES6). - Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`. - Then the [SystemJS](#systemjs) library for module loading. - - We'll make different choices as we gain experience and - become more concerned about production qualities such as - load times and memory footprint. - - h3#systemjs SystemJS - :marked - QuickStart uses SystemJS - to load application and library modules. [Earlier](#add-config-files) we - added the `systemjs.config.js` file to the project root. - There are alternatives that work just fine including the well-regarded - [webpack](guide/webpack.html). - SystemJS happens to be a good choice. - But we want to be clear that it was a *choice* and not a *preference*. - - All module loaders require configuration and all loader configuration - becomes complicated rather quickly as soon as the file structure diversifies and - we start thinking about building for production and performance. - - We suggest becoming well-versed in the loader of your choice. - Learn more about SystemJS configuration - here. - - With those cautions in mind, what are we doing in the - QuickStart [`systemjs.config.js` configuration file we added earlier](#config-files)? - First, we create a map to tell SystemJS where to look when we import some module. - Then, we register all our packages to SystemJS: - all the project dependencies and our application package, `app`. - - .l-sub-section - :marked - Our QuickStart doesn't use all of the listed packages - but any substantial application will want many of them - and all of the listed packages are required by at least one of the documentation samples. - - There is no runtime harm in listing packages that we don't need as they will only be loaded when requested. - :marked - The `app` package tells SystemJS what to do when it sees a request for a - module from the `app/` folder. - - Our QuickStart makes such requests when one of its - application TypeScript files has an import statement like this: - +makeExcerpt('app/main.ts', 'import') - :marked - Notice that the module name (after `from`) does not mention a filename extension. - In the configuration we tell SystemJS to default the extension to `js`, a JavaScript file. - - That makes sense because we transpile TypeScript to JavaScript - *before* running the application. - - .l-sub-section - :marked - #### Transpiling in the browser - In the live example on plunker we transpile (AKA compile) to JavaScript in the browser - on the fly. _That's fine for a demo_. - - **Do not transpile in the browser during development or for production**. - - We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase - before running the application for several reasons including: - - * We see compiler warnings and errors that are hidden from us in the browser. - - * Precompilation simplifies the module loading process and - it's much easier to diagnose problems when this is a separate, external step. - - * Precompilation means a faster user experience because the browser doesn't waste time compiling. - - * We iterate development faster because we only recompile changed files. - We notice the difference as soon as the app grows beyond a handful of files. - - * Precompilation fits into a continuous integration process of build, test, deploy. - - :marked - 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 - either by an import statement or by Angular itself. - - ### *<my-app>* - - a#my-app - :marked - When Angular calls the `!{_bootstrapModule}` function in main.ts, - it reads the `!{_AppModuleVsAppComp}` metadata, sees that - `AppComponent` is the bootstrap component, - finds the `my-app` selector, locates an element tag named `my-app`, - and renders our application's view between those tags. :marked - ### Add some style - Styles aren't essential but they're nice, and `index.html` assumes we have + ## Add some style + Styles aren't essential, but they're nice, and `index.html` assumes that you have a stylesheet called `styles.css`. - Create a `styles.css` file in the *#{_indexHtmlDir}* folder and start styling, + Create a `styles.css` file in the *#{_indexHtmlDir}* folder, and start styling, perhaps with the minimal styles shown below. +makeExcerpt('styles.css (excerpt)', 'quickstart') @@ -530,47 +329,48 @@ h2#index Step !{step++}: Add #[code index.html] see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css). .l-main-section#build-and-run -h2 Step !{step++}: Build and run the app! +h1 Step !{step++}: Build and run the application block run-app :marked Open a terminal window and enter this command: code-example. npm start +aside.is-right :marked - That command runs two parallel node processes - 1. The TypeScript compiler in watch mode - 1. A static server called **lite-server** that loads `index.html` in a browser - and refreshes the browser when application files change + [Read more](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts) about + other useful npm scripts included in this example's `package.json`. - In a few moments, a browser tab should open and display +:marked + That command runs the following two parallel node processes: + * The TypeScript compiler in watch mode + * A static server called _lite-server_ that loads `index.html` in a browser + and refreshes the browser when application files change + + In a few moments, a browser tab should open and display the following: figure.image-display img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app") -:marked - **Great job!** block build-app //- Nothing for ts. +.l-main-section#make-changes +h1 Step !{step++}: Make some live changes :marked - ## Make some changes - - Try changing the message to "My SECOND Angular 2 app". + Try changing the message in `app/app.component.ts` to "My SECOND Angular 2 App". block server-watching :marked - The TypeScript compiler and `lite-server` are watching. - They should detect the change, recompile the TypeScript into JavaScript, - refresh the browser, and display the revised message. - It's a nifty way to develop an application! + The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript, + refresh the browser, and display your revised message. - We close the terminal window when we're done to terminate both the compiler and the server. + + Close the terminal window when you're done to terminate both the compiler and the server. .l-main-section +h1#wrap-up Wrap up and next steps :marked - # Wrap up - - Our final project folder structure looks like this: + The final project folder structure looks like this: block project-file-structure .filetree .file angular2-quickstart @@ -589,48 +389,22 @@ block project-file-structure .file tsconfig.json .file typings.json :marked - Here are the file contents: - -block project-files - +makeTabs(` - quickstart/ts/app/app.component.ts, - quickstart/ts/app/app.module.ts, - quickstart/ts/app/main.ts, - quickstart/ts/index.html, - quickstart/ts/package.1.json, - quickstart/ts/tsconfig.1.json, - quickstart/ts/typings.1.json, - quickstart/ts/styles.css, - quickstart/ts/systemjs.config.1.js` - , - ',,,,,,, quickstart,', - `app/app.component.ts, - app/app.module.ts, - app/main.ts, - index.html, - package.json, - tsconfig.json, - typings.json, - styles.css (excerpt), - systemjs.config.js`) + To see the file contents, open the . .l-main-section :marked ## What next? - Our first application doesn't do much. It's basically "Hello, World" for Angular 2. + This first application doesn't do much. It's basically "Hello, World" for Angular 2. - We kept it simple in our first pass: we wrote a little Angular component, - created a simple `index.html`, and launched with a - static file server. That's about all we'd expect to do for a "Hello, World" app. + You wrote a little Angular component, created a simple `index.html`, and launched with a + static file server. - **We have greater ambitions!** +ifDocsFor('ts') :marked - The good news is that the overhead of setup is (mostly) behind us. - We'll probably only touch the `package.json` to update libraries. - We'll likely open `index.html` only if we need to add a library or some css stylesheets. + You also created the basic application setup that you'll re-use for other + sections in this guide. From here, the changes you'll make in the + `package.json` or `index.html` files are only minor updates to add libraries or some css + stylesheets. You also won't need to revisit module loading again. :marked - We're about to take the next step and build a small application that - demonstrates the great things we can build with Angular 2. - - Join us on the [Tour of Heroes Tutorial](./tutorial)! + To take the next step and build a small application that demonstrates real features that you can + build with Angular, carry on to the [Tour of Heroes tutorial](./tutorial)! diff --git a/public/resources/images/devguide/quickstart/my-first-app.png b/public/resources/images/devguide/quickstart/my-first-app.png index 0b40ec2ab04dc0f4817a8b5fffcfb7c869fb2f98..fb38d08425004fd1f347dbe04a832cdd55867191 100644 GIT binary patch literal 14936 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 Q=XXz8NhOI|F;MXT0jAPnPyhe` literal 7461 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