diff --git a/gulpfile.js b/gulpfile.js index 3675e70184..9f6a332f61 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -223,11 +223,19 @@ function findAndRunE2eTests(filter, outputFile) { // fileName; then shut down the example. All protractor output is appended // to the outputFile. function runE2eTsTests(appDir, outputFile) { - // start the app - var appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { cwd: appDir }); - var tscRunSpawnInfo = spawnExt('npm',['run','tsc'], { cwd: appDir }); + // spawn tasks to start the app + var appBuildSpawnInfo; + var appRunSpawnInfo; - return runProtractor(tscRunSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile); + if (fs.existsSync(path.join(appDir, 'angular-cli.json'))) { + appBuildSpawnInfo = spawnExt('npm', ['run', 'build:cli'], { cwd: appDir }); + appRunSpawnInfo = spawnExt('npm', ['run', 'http-server:cli', '--', '-s'], { cwd: appDir }); + } else { + appBuildSpawnInfo = spawnExt('npm',['run','tsc'], { cwd: appDir }); + appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { cwd: appDir }); + } + + return runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile); } function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) { diff --git a/public/docs/_examples/cli-quickstart/e2e-spec.ts b/public/docs/_examples/cli-quickstart/e2e-spec.ts new file mode 100644 index 0000000000..4134ed74a1 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/e2e-spec.ts @@ -0,0 +1,11 @@ +/// +describe('cli-quickstart App', () => { + beforeEach(() => { + return browser.get('/'); + }) + + it('should display message saying app works', () => { + var pageTitle = element(by.css('cli-quickstart-app h1')).getText() + expect(pageTitle).toEqual('My First Angular 2 App'); + }); +}); diff --git a/public/docs/_examples/cli-quickstart/ts/.gitignore b/public/docs/_examples/cli-quickstart/ts/.gitignore new file mode 100644 index 0000000000..766f37285b --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/.gitignore @@ -0,0 +1,38 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp + +# dependencies +/node_modules +/bower_components + +# IDEs and editors +/.idea + +# misc +/.sass-cache +/connect.lock +/coverage/* +/libpeerconnection.log +npm-debug.log +testem.log +/typings + +# e2e +/e2e/*.js +/e2e/*.map + +#System Files +.DS_Store +Thumbs.db + +# angular.io overrides +!angular-cli.json +!angular-cli-build.js +!config/environment.js +!config/karma-test.js +!config/karma.conf.js +!config/protractor.conf.js +!src/typings.d.ts diff --git a/public/docs/_examples/cli-quickstart/ts/angular-cli-build.js b/public/docs/_examples/cli-quickstart/ts/angular-cli-build.js new file mode 100644 index 0000000000..dad887ff3d --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/angular-cli-build.js @@ -0,0 +1,17 @@ +/* global require, module */ + +var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); + +module.exports = function(defaults) { + return new Angular2App(defaults, { + vendorNpmFiles: [ + 'systemjs/dist/system-polyfills.js', + 'systemjs/dist/system.src.js', + 'zone.js/dist/**/*.+(js|js.map)', + 'es6-shim/es6-shim.js', + 'reflect-metadata/**/*.+(js|js.map)', + 'rxjs/**/*.+(js|js.map)', + '@angular/**/*.+(js|js.map)' + ] + }); +}; diff --git a/public/docs/_examples/cli-quickstart/ts/angular-cli.json b/public/docs/_examples/cli-quickstart/ts/angular-cli.json new file mode 100644 index 0000000000..16964f2477 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/angular-cli.json @@ -0,0 +1,31 @@ +{ + "project": { + "version": "1.0.0-beta.5", + "name": "cli-quickstart" + }, + "apps": [ + { + "main": "src/main.ts", + "tsconfig": "src/tsconfig.json", + "mobile": false + } + ], + "addons": [], + "packages": [], + "e2e": { + "protractor": { + "config": "config/protractor.conf.js" + } + }, + "test": { + "karma": { + "config": "config/karma.conf.js" + } + }, + "defaults": { + "prefix": "app", + "sourceDir": "src", + "styleExt": "css", + "prefixInterfaces": false + } +} diff --git a/public/docs/_examples/cli-quickstart/ts/config/environment.dev.ts b/public/docs/_examples/cli-quickstart/ts/config/environment.dev.ts new file mode 100644 index 0000000000..ffe8aed766 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/config/environment.dev.ts @@ -0,0 +1,3 @@ +export const environment = { + production: false +}; diff --git a/public/docs/_examples/cli-quickstart/ts/config/environment.js b/public/docs/_examples/cli-quickstart/ts/config/environment.js new file mode 100644 index 0000000000..4fa28880da --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/config/environment.js @@ -0,0 +1,10 @@ +/* jshint node: true */ + +module.exports = function(environment) { + return { + environment: environment, + baseURL: '/', + locationType: 'auto' + }; +}; + diff --git a/public/docs/_examples/cli-quickstart/ts/config/environment.prod.ts b/public/docs/_examples/cli-quickstart/ts/config/environment.prod.ts new file mode 100644 index 0000000000..3612073bc3 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/config/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/public/docs/_examples/cli-quickstart/ts/config/karma.conf.js b/public/docs/_examples/cli-quickstart/ts/config/karma.conf.js new file mode 100644 index 0000000000..d39036fa52 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/config/karma.conf.js @@ -0,0 +1,42 @@ +module.exports = function (config) { + config.set({ + basePath: '..', + frameworks: ['jasmine'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher') + ], + customLaunchers: { + // chrome setup for travis CI using chromium + Chrome_travis_ci: { + base: 'Chrome', + flags: ['--no-sandbox'] + } + }, + files: [ + { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false }, + { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false }, + { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false }, + { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false }, + { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false }, + { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false }, + + { pattern: 'config/karma-test-shim.js', included: true, watched: true }, + + // Distribution folder. + { pattern: 'dist/**/*', included: false, watched: true } + ], + exclude: [ + // Vendor packages might include spec files. We don't want to use those. + 'dist/vendor/**/*.spec.js' + ], + preprocessors: {}, + reporters: ['progress'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; diff --git a/public/docs/_examples/cli-quickstart/ts/config/protractor.conf.js b/public/docs/_examples/cli-quickstart/ts/config/protractor.conf.js new file mode 100644 index 0000000000..57f4f87dd7 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/config/protractor.conf.js @@ -0,0 +1,29 @@ +/*global jasmine */ +var SpecReporter = require('jasmine-spec-reporter'); + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + '../e2e/**/*.e2e.ts' + ], + capabilities: { + 'browserName': 'chrome' + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + useAllAngular2AppRoots: true, + beforeLaunch: function() { + require('ts-node').register({ + project: 'e2e' + }); + }, + onPrepare: function() { + jasmine.getEnv().addReporter(new SpecReporter()); + } +}; diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e.ts b/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e.ts new file mode 100644 index 0000000000..130d236c1c --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e.ts @@ -0,0 +1,14 @@ +import { CliQuickstartPage } from './app.po'; + +describe('cli-quickstart App', function() { + let page: CliQuickstartPage; + + beforeEach(() => { + page = new CliQuickstartPage(); + }); + + it('should display message saying app works', () => { + page.navigateTo(); + expect(page.getParagraphText()).toEqual('cli-quickstart works!'); + }); +}); diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts b/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts new file mode 100644 index 0000000000..645e0e83a8 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts @@ -0,0 +1,9 @@ +export class CliQuickstartPage { + navigateTo() { + return browser.get('/'); + } + + getParagraphText() { + return element(by.css('cli-quickstart-app h1')).getText(); + } +} diff --git a/public/docs/_examples/cli-quickstart/ts/example-config.json b/public/docs/_examples/cli-quickstart/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/cli-quickstart/ts/public/.npmignore b/public/docs/_examples/cli-quickstart/ts/public/.npmignore new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.css b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.css new file mode 100644 index 0000000000..a2b21fae82 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.css @@ -0,0 +1,6 @@ +/* #docregion */ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.html b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.html new file mode 100644 index 0000000000..b6931b538a --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.html @@ -0,0 +1,3 @@ +

+ {{title}} +

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 new file mode 100644 index 0000000000..90abbf1298 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.spec.ts @@ -0,0 +1,22 @@ +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/cli-quickstart.component.ts b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts new file mode 100644 index 0000000000..5510df7476 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts @@ -0,0 +1,17 @@ +// #docregion import +import { Component } from '@angular/core'; +// #enddocregion import + +// #docregion metadata +@Component({ + moduleId: module.id, + selector: 'cli-quickstart-app', + templateUrl: 'cli-quickstart.component.html', + styleUrls: ['cli-quickstart.component.css'] +}) +// #enddocregion metadata +// #docregion title, class +export class CliQuickstartAppComponent { + title = 'My First Angular 2 App'; +} +// #enddocregion title, class diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts new file mode 100644 index 0000000000..79ee96fdfd --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/environment.ts @@ -0,0 +1,7 @@ +// 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 new file mode 100644 index 0000000000..e4a0d09c55 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/app/index.ts @@ -0,0 +1,2 @@ +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 new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/cli-quickstart/ts/src/favicon.ico b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico new file mode 100644 index 0000000000..8081c7ceaf Binary files /dev/null and b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico differ diff --git a/public/docs/_examples/cli-quickstart/ts/src/index.html b/public/docs/_examples/cli-quickstart/ts/src/index.html new file mode 100644 index 0000000000..637094f4b9 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/index.html @@ -0,0 +1,32 @@ + + + + + CliQuickstart + + + {{#unless environment.production}} + + {{/unless}} + + + + + Loading... + + + + {{#each scripts.polyfills}}{{/each}} + + + + + + + + + diff --git a/public/docs/_examples/cli-quickstart/ts/src/main.ts b/public/docs/_examples/cli-quickstart/ts/src/main.ts new file mode 100644 index 0000000000..c3561a2c57 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/main.ts @@ -0,0 +1,18 @@ +// #docplaster +// #docregion important +import { bootstrap } from '@angular/platform-browser-dynamic'; + +// #enddocregion important +import { enableProdMode } from '@angular/core'; +import { environment } from './app/'; +// #docregion important +import { CliQuickstartAppComponent } from './app/'; +// #enddocregion important +if (environment.production) { + enableProdMode(); +} + +// #docregion important + +bootstrap(CliQuickstartAppComponent); +// #enddocregion important diff --git a/public/docs/_examples/cli-quickstart/ts/src/system-config.ts b/public/docs/_examples/cli-quickstart/ts/src/system-config.ts new file mode 100644 index 0000000000..d2af1aac0c --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/system-config.ts @@ -0,0 +1,54 @@ +/*********************************************************************************************** + * 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/typings.d.ts b/public/docs/_examples/cli-quickstart/ts/src/typings.d.ts new file mode 100644 index 0000000000..eebc2728b8 --- /dev/null +++ b/public/docs/_examples/cli-quickstart/ts/src/typings.d.ts @@ -0,0 +1 @@ +/// diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index a4cbe17705..3f9150681d 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -7,6 +7,7 @@ "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"", "http-server": "tsc && http-server", "http-server:e2e": "http-server", + "http-server:cli": "http-server dist/", "lite": "lite-server", "postinstall": "typings install", "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", @@ -17,7 +18,8 @@ "webdriver:update": "webdriver-manager update", "start:webpack": "webpack-dev-server --inline --progress --port 8080", "test:webpack": "karma start karma.webpack.conf.js", - "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" + "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail", + "build:cli": "ng build" }, "keywords": [], "author": "", @@ -32,17 +34,16 @@ "@angular/router": "2.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.1", "@angular/upgrade": "2.0.0-rc.1", - "systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", - "angular2-in-memory-web-api": "0.0.11", "bootstrap": "^3.3.6" }, "devDependencies": { + "angular-cli": "^1.0.0-beta.5", "canonical-path": "0.0.2", "concurrently": "^2.0.0", "css-loader": "^0.23.1", diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 4c5dd3550f..6df7846a08 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -6,6 +6,13 @@ "banner": "Welcome to Angular in TypeScript! The current Angular 2 release is rc.1. Please consult the Change Log about recent enhancements, fixes, and breaking changes." }, + "cli-quickstart": { + "icon": "query-builder", + "title": "CLI Quickstart", + "description": "Use the CLI tool to build apps quickly in Angular 2", + "hide": true + }, + "quickstart": { "icon": "query-builder", "title": "5 Min Quickstart", diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade new file mode 100644 index 0000000000..85211af1ff --- /dev/null +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -0,0 +1,256 @@ +include _util-fns + +: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. + +h1 Build this app! +:marked + - [Prerequisite](#prereq): Install Node.js and angular-cli + - [Step 1](#create-project): Create a new project + - [Step 2](#serve): Serve our project + - [Step 3](#first-component): Our first angular component + +.l-main-section +h2#prereq Prerequisite: Node.js and angular-cli + +: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 `v5.x.x` and npm `3.x.x`** + by running `node -v` and `npm -v` in a terminal/console window. + Older versions may produce errors. + +:marked + Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** + +code-example(format=""). + npm install -g angular-cli + +.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. + + Click *Hide Explanations* to show only the instructions. + Click *View Explanations* to see everything again. + +.l-main-section +h2#create-project Step 1: Create a new project +:marked + Generate a new project by running the following commands: + +code-example(format=""). + ng new cli-quickstart + +.l-sub-section + :marked + Patience please. + It takes time to set up a new project, most of it spent installing npm packages. +:marked + **Let's serve our app.** + +.l-main-section +h2#serve Step 2: Serve our project +:marked + Go to the project directory and launch the server. +code-example(format=""). + cd cli-quickstart + ng serve +:marked + The `ng serve` command launches the server, watches our files, + and rebuilds the app as we make changes to the files. + + Open a browser on `http://localhost:4200/`; the app greets us with a message: + +figure.image-display + img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!") + +.l-main-section +h2#first-component Step 3: Our first Angular component +:marked + The CLI created our first Angular component for us, which is named after the project. We created the project + with the name `cli-quickstart` so our component is `CliQuickstartAppComponent` and can be found in + `/src/app/cli-quickstart.component.ts` + + Open it and update the title: + ++makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.ts', 'title', 'src/app/cli-quickstart.component.ts')(format=".") + +.l-verbose-section + :marked + ### CliQuickstartAppComponent is the root of the application + + 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. + + This QuickStart has only one, extremely simple component. + But it has the essential structure of every component we'll ever write: + + * 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. + + a#component-import + :marked + ### Import + + 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('src/app/cli-quickstart.component.ts', 'import') + + h3#component-decorator @Component decorator + :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. + + `@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('src/app/cli-quickstart.component.ts', 'metadata') + + :marked + This particular metadata object has four fields, a `moduleId`, a `selector` a `templateUrl` and an array of `styleUrls`. + + The **moduleId** allows us to specify the location of the template and style files. + + >Just by setting the **moduleId** we can specify the location of those files to be relative to the component class. + + The **selector** specifies a simple CSS selector for an HTML element that represents the component. + + >The element for this component is named `cli-quickstart-app`. + Angular creates and displays an instance of our `CliQuickstartAppComponent` + wherever it encounters a `cli-quickstart-app` element in the host HTML. + + The **templateUrl** specifies the location of the component's companion template, + which is written in an enhanced form of HTML that tells Angular how to render this component's view. + + >Our template is a single header element 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. + + The **styleUrls** array specifies the locations of the component's styles. + + >Our component can be styled using CSS files. By default, all the CSS rules we + specify in those files are only applied to that component and won't leak outside it. + + :marked + ### Component class + At the bottom of the file there is a class named `CliQuickstartAppComponent`. + +makeExcerpt('src/app/cli-quickstart.component.ts', 'class') + :marked + This class contains a property called `title` that show in our template thanks to data binding. + We can expand this class with more properties and application logic. + + We **export** `CliQuickstartAppComponent` so that we can **import** it elsewhere in our application. + +:marked + The browser reloads automatically and we see the revised title. That's nice, but we can make look better. + + Open `src/app/angular2-cli-quickstart.component.css` and give the app some style + ++makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.css', null, 'src/app/cli-quickstart.component.css')(format=".") + +:marked + Looking good! + +figure.image-display + img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app") + +.l-verbose-section + :marked + ### The main.ts file + + How does this work? Earlier we **exported** our root component `CliQuickstartAppComponent`, but that + component needs to be bootstraped at `main.ts`. + + +makeExcerpt('src/main.ts', 'important') + + :marked + We import the two things we need to launch the application: + + 1. Angular's browser `bootstrap` function + 1. The application root component, `CliQuickstartAppComponent`. + + Then we call `bootstrap` with `CliQuickstartAppComponent`. + + ### Bootstrapping is platform-specific + Notice that we import the `bootstrap` function from `@angular/platform-browser-dynamic`, + not `@angular/core`. + 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 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 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* and app component files? + + Both `main.ts` and the app component files are tiny. + This is just a QuickStart. + We could have merged these two 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 presenting a view. + Mixing concerns creates difficulties down the road. + We might launch the `CliQuickstartAppComponent` 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*. + + ### Importing the application + + The CLI uses `System.js` to load the application. We just need to call `System.import` and pass it our `main.ts` + file to boot our application. + + +makeExcerpt('src/index.html', 'import') + + :marked + ### *<cli-quickstart-app>* + + When Angular calls the `bootstrap` function in `main.ts`, it reads the `CliQuickstartAppComponent` + metadata, finds the `cli-quickstart-app` selector, locates an element tag named `cli-quickstart-app`, + and renders our application's view between those tags. + +.l-main-section +:marked + ## What next? + Our first application doesn't do much. It's basically "Hello, World" for Angular 2. + + We kept it simple in our first pass: we wrote our first Angular 2 application using the angular CLI + and modified our first component. That's about all we'd expect to do for a "Hello, World" app. + + **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 2. + + Join us on the [Tour of Heroes Tutorial](./tutorial)! diff --git a/public/resources/images/devguide/cli-quickstart/app-works.png b/public/resources/images/devguide/cli-quickstart/app-works.png new file mode 100644 index 0000000000..e0b9fb73f5 Binary files /dev/null and b/public/resources/images/devguide/cli-quickstart/app-works.png differ diff --git a/public/resources/images/devguide/cli-quickstart/my-first-app.png b/public/resources/images/devguide/cli-quickstart/my-first-app.png new file mode 100644 index 0000000000..77a660ad77 Binary files /dev/null and b/public/resources/images/devguide/cli-quickstart/my-first-app.png differ