From ff727cf5bd994d217f28be6e51303d1b551288ed Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Thu, 9 Mar 2017 00:14:36 -0500 Subject: [PATCH] docs(cli-quickstart): fix incorrect filename for example (#3356) --- public/docs/ts/latest/cli-quickstart.jade | 88 +++++++++++------------ 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index b8e3e7977c..4c7ffc7e12 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -1,23 +1,23 @@ include _util-fns - + :marked Good tools make application development quicker and easier to maintain than 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 ongoing development tasks such + that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. - - The goal in this guide is to build and run a simple Angular - application in TypeScript, using the Angular CLI + + The goal in this guide is to build and run a simple Angular + application in TypeScript, using the Angular CLI while adhering to the [Style Guide](./guide/style-guide.html) recommendations that benefit _every_ Angular project. - + 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 for real world applications. 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. 3. [Serve](#serve) the application. @@ -29,7 +29,7 @@ include _util-fns h2#devenv Step 1. Set up the Development Environment :marked You need to set up your 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 @@ -39,10 +39,10 @@ h2#devenv Step 1. Set up the Development Environment Older versions produce errors, but newer versions are fine. :marked Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally. - + 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 @@ -56,7 +56,7 @@ code-example(language="sh" class="code-shell"). .l-sub-section :marked - Patience please. + Patience please. It takes time to set up a new project, most of it spent installing npm packages. .l-main-section @@ -67,41 +67,41 @@ h2#serve Step 3: Serve the application code-example(language="sh" class="code-shell"). cd my-app ng serve --open - + :marked - The `ng serve` command launches the server, watches your files, + The `ng serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files. - Using the `--open` (or just `-o`) option will automatically open your browser - on `http://localhost:4200/`. - + Using the `--open` (or just `-o`) option will automatically open your browser + on `http://localhost:4200/`. + Your app greets you with a message: - + figure.image-display img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!") .l-main-section h2#first-component Step 4: Edit your first Angular component :marked - The CLI created the first Angular component for you. + The CLI created the first Angular component for you. 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 _app works!_ to _My First Angular App_: - + +makeExample('cli-quickstart/ts/src/app/app.component.ts', 'title', 'src/app/app.component.ts')(format=".") :marked The browser reloads automatically with the revised title. That's nice, but it could look better. - - Open `src/app/cli-quickstart.component.css` and give the component some style. + + Open `src/app/app.component.css` and give the component some style. +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/my-first-app.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! @@ -123,11 +123,11 @@ figure.image-display 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 + 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). - Some of the generated files might be unfamiliar to you. + Some of the generated files might be unfamiliar to you. block src-files :marked @@ -175,7 +175,7 @@ table(width="100%") :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. + as the application evolves. tr td app/app.module.ts td @@ -187,8 +187,8 @@ table(width="100%") td assets/* td :marked - A folder where you can put images and anything else to be copied wholesale - when you build your application. + A folder where you can put images and anything else to be copied wholesale + when you build your application. tr td environments/* td @@ -196,7 +196,7 @@ table(width="100%") This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. - You might use a different API endpoint for development than you do for production + You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered. @@ -212,7 +212,7 @@ table(width="100%") :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 automatically adds all `js` and `css` files when building your app so you + The CLI automatically adds all `js` and `css` files when building your app so you never need to add any `