diff --git a/aio/content/cli-quickstart.md b/aio/content/cli-quickstart.md deleted file mode 100644 index a71c2c5003..0000000000 --- a/aio/content/cli-quickstart.md +++ /dev/null @@ -1,939 +0,0 @@ -@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/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](cli-quickstart#devenv) the development environment. -2. [Create](cli-quickstart#create-proj) a new project and skeleton application. -3. [Serve](cli-quickstart#serve) the application. -4. [Edit](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](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/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 `