diff --git a/aio/content/guide/cli-quickstart.md b/aio/content/guide/cli-quickstart.md new file mode 100644 index 0000000000..1f243f3841 --- /dev/null +++ b/aio/content/guide/cli-quickstart.md @@ -0,0 +1,939 @@ +@description +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 +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](guide/guide/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. + +You'll pursue these ends in the following high-level steps: + +1. [Set up](guide/cli-quickstart#devenv) the development environment. +2. [Create](guide/cli-quickstart#create-proj) a new project and skeleton application. +3. [Serve](guide/cli-quickstart#serve) the application. +4. [Edit](guide/cli-quickstart#first-component) the application. + +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](https://nodejs.org/en/download/)** +if they are not already on your machine. + +~~~ {.l-sub-section} + +**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](https://github.com/angular/angular-cli)** globally. + + + + npm install -g @angular/cli + + + + + + +

+ Step 2. Create a new project +

+ +Open a terminal window. +Generate a new project and skeleton application by running the following commands: + + + + ng new my-app + + + + + +~~~ {.l-sub-section} + +Patience 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 --open + + + +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/`. + +Your app greets you with a message: + + +
+ The app works! +
+ + + + +

+ 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. + + + + + + + + + +
+ Output of QuickStart app +
+ +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](guide/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](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. + +### 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. + + + + + + + src + + + app + + + app.component.css + + + + + + app.component.html + + + + + + app.component.spec.ts + + + + + + app.component.ts + + + + + + app.module.ts + + + + + + + + + assets + + + .gitkeep + + + + + + + + + environments + + + environment.prod.ts + + + + + + environment.ts + + + + + + + + + favicon.ico + + + + + + index.html + + + + + + main.ts + + + + + + polyfills.ts + + + + + + styles.css + + + + + + test.ts + + + + + + tsconfig.app.json + + + + + + tsconfig.spec.json + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ File + + Purpose +
+ app/app.component.{ts,html,css,spec.ts} + + 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. +
+ app/app.module.ts + + Defines `AppModule`, the [root module](guide/guide/appmodule) that tells Angular how to assemble the application. + Right now it declares only the `AppComponent`. + Soon there will be more components to declare. +
+ assets/* + + A folder where you can put images and anything else to be copied wholesale + when you build your application. +
+ environments/* + + 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 + or maybe different analytics tokens. + You might even use some mock services. + Either way, the CLI has you covered. +
+ favicon.ico + + Every site wants to look good on the bookmark bar. + Get started with your very own Angular icon. +
+ index.html + + 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 + never need to add any `