9e661e58d1
* fix(aio): allow code blocks to clear floated images Previously the negative margin on the code headings were causing floated images to overlay the start of a code block. Now all code block successfully clear all floated elements. * feat(aio): add a `.clear` class for clearing floating images * fix(aio): tidy up image styles The css rules for `img.right` and `img.left` allow authors easy access to floating an image on the left or right, respectively. The `.image-display` rule which was always found on a figure has been simplified so that all figures have this styling. It is very unlikely that a figure will be used outside the content area; and at this time it seems like `figure` is as good an indicator that we want this kind of styling as anything. Now that images are all tagged with width and height values, we cannot assume to modify these dimensions via CSS as it can cause the image to lose its correct proportions. Until we find a better solition we must set `height` to `auto` when the screen width is below 1300px to ensure that these images maintain their proportions as they get shrunk to fit. * docs(aio): general tidy up of image HTML in guides Previously, the guides have a lot of inline image styling and unnecessary use of the `image-display` css class. Images over 700px are problematic for guide docs, so those have been given specific widths and associated heights. * docs(aio): use correct anchor for "back to the top" link The `#toc` anchor does not work when the page is wide enough that the TOC is floating to the side. * build(aio): add `#top-of-page` to path variants for link checking Since the `#top-of-page` is outside the rendered docs the `checkAnchorLinks` processor doesn't find them as valid targets for links. Adding them as a `pathVariant` solves this problem but will still catch links to docs that do not actually exist. * fix(aio): ensure that headings clear floated images * fix(aio): do not force live-example embedded image to 100% size This made them look too big, generally. Leaving them with no size means that they will look reasonable in large viewports and switch to 100% width in narrow viewports.
13 KiB
@title CLI QuickStart
@description
Good tools make application development quicker and easier to maintain than if you did everything by hand.
The Angular CLI is a command line interface tool 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 while adhering to the Style Guide 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.
And you can also download the example.
Step 1. Set up the Development Environment
You need to set up your development environment before you can do anything.
Install Node.js® and npm if they are not already on your machine.
Verify that you are running at least node 6.9.x and npm 3.x.x
by running node -v and npm -v in a terminal/console window.
Older versions produce errors, but newer versions are fine.
Then install the Angular CLI globally.
npm install -g @angular/cliStep 2. Create a new project
Open a terminal window.
Generate a new project and skeleton application by running the following commands:
ng new my-appPatience please. It takes time to set up a new project, most of it spent installing npm packages.
Step 3: Serve the application
Go to the project directory and launch the server.
cd my-app ng serve --openThe 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/.
Your app greets you with a message:
Step 4: Edit your first Angular component
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.
Open the component file and change the title property from app works! to My First Angular App:
The browser reloads automatically with the revised title. That's nice, but it could look better.
Open src/app/app.component.css and give the component some style.
Looking good!
What's next?
That's about all you'd expect to do in a "Hello, World" app.
You're ready to take the Tour of Heroes Tutorial and build a small application that demonstrates the great things you can build with Angular.
Or you can stick around a bit longer to learn about the files in your brand new project.
Project file review
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
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 and
Wiki.
Some of the generated files might be unfamiliar to you.
The src folder
Your app lives in the src folder.
All Angular components, templates, styles, images, and anything else your app needs go here.
Any files outside of this folder are meant to support building your app.
| File | Purpose |
|---|---|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
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.
These files go in the root folder next to src/.
| File | Purpose |
|---|---|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
Next Step
If you're new to Angular, continue with the tutorial. You can skip the "Setup" step since you're already using the Angular CLI setup.