docs(cli-quickstart): fix incorrect filename for example (#3356)
This commit is contained in:
Kapunahele Wong
Jules Kremer
parent
361d645d31
commit
ff727cf5bd
|
|
@ -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 <code>app/app.module.ts</code>
|
||||
td
|
||||
|
|
@ -187,8 +187,8 @@ table(width="100%")
|
|||
td <code>assets/*</code>
|
||||
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 <code>environments/*</code>
|
||||
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 `<script>` or `<link>` tags here manually.
|
||||
tr
|
||||
td <code>main.ts</code>
|
||||
|
|
@ -235,7 +235,7 @@ table(width="100%")
|
|||
td <code>styles.css</code>
|
||||
td
|
||||
:marked
|
||||
Your global styles go here.
|
||||
Your global styles go here.
|
||||
Most of the time you'll want to have local styles in your components for easier maintenance,
|
||||
but styles that affect all of your app need to be in a central place.
|
||||
tr
|
||||
|
|
@ -249,15 +249,15 @@ table(width="100%")
|
|||
td <code>tsconfig.{app|spec}.json</code>
|
||||
td
|
||||
:marked
|
||||
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
|
||||
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
|
||||
and for the unit tests (`tsconfig.spec.json`).
|
||||
|
||||
|
||||
block root-files
|
||||
:marked
|
||||
### The root folder
|
||||
The `src/` folder is just one of the items inside the project's root folder.
|
||||
Other files help you build, test, maintain, document, and deploy the app.
|
||||
The `src/` folder is just one of the items inside the project's root folder.
|
||||
Other files help you build, test, maintain, document, and deploy the app.
|
||||
These files go in the root folder next to `src/`.
|
||||
|
||||
.filetree
|
||||
|
|
@ -277,8 +277,8 @@ block root-files
|
|||
.file package.json
|
||||
.file protractor.conf.js
|
||||
.file README.md
|
||||
.file tsconfig.json
|
||||
.file tslint.json
|
||||
.file tsconfig.json
|
||||
.file tslint.json
|
||||
|
||||
style td, th {vertical-align: top}
|
||||
table(width="100%")
|
||||
|
|
@ -291,15 +291,15 @@ table(width="100%")
|
|||
td <code>e2e/</code>
|
||||
td
|
||||
:marked
|
||||
Inside `e2e/` live the End-to-End tests.
|
||||
Inside `e2e/` live the End-to-End tests.
|
||||
They shouldn't be inside `src/` because e2e tests are really a separate app that
|
||||
just so happens to test your main app.
|
||||
just so happens to test your main app.
|
||||
That's also why they have their own `tsconfig.e2e.json`.
|
||||
tr
|
||||
td <code>node_modules/</code>
|
||||
td
|
||||
:marked
|
||||
`Node.js` creates this folder and puts all third party modules listed in
|
||||
`Node.js` creates this folder and puts all third party modules listed in
|
||||
`package.json` inside of it.
|
||||
tr
|
||||
td <code>.angular-cli.json</code>
|
||||
|
|
@ -359,11 +359,11 @@ table(width="100%")
|
|||
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
|
||||
[Codelyzer](http://codelyzer.com/), used when running `ng lint`.
|
||||
Linting helps keep your code style consistent.
|
||||
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Next Step
|
||||
|
||||
If you're new to Angular, continue on the
|
||||
[learning path](guide/learning-angular.html "Angular learning path").
|
||||
If you're new to Angular, continue on the
|
||||
[learning path](guide/learning-angular.html "Angular learning path").
|
||||
You can skip the "Setup" step since you're already using the Angular CLI setup.
|
||||
|
|
|
|||
Loading…
Reference in New Issue