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 `