markdown Angular 2快速入门

Posted 2021-05-06

# Setup

install the Angular CLI globally (rquired: node 6.9.x, npm 3.x.x )
`npm install -g @angular/cli`

generate a new project and skeleton application:
`ng new my-app`

launch the server in http://localhost:4200/:
`cd my-app`
`ng serve --open`

configure Visual Studio Code debugger for working with Angular CLI
[https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI](https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI)

# Project file review

First file to check out is README.md (basic information on how to use CLI commands)
Your app lives in the 'src' folder.
Any files outside this folder are meant to support building your app.


## /SRC FOLDER

`app/app.component.ts`
- the root component of what will become a tree of nested components as the application evolves.

`app/app.module.ts`
- root module that tells Angular how to assemble the application.

`assets/*`
- images and anything else to be copied wholesale when you build your application.

`environments/*`
- one file for each of your destination environments, each exporting simple configuration variables to use in your application (for example, different API endpoints for production/development ). The files are replaced on-the-fly when you build your app.

`index.html`
- main HTML page that is served when someone visits your site. 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.

`main.ts`
- main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending:
`ng serve --aot`
`ng build --aot`

`polyfills.ts`
- Polyfills help to solve differences in browser support. You should be pretty safe with 'core-js' and 'zone.js', but be sure to check out https://angular.io/guide/browser-support

`test.ts`
- main entry point for your unit tests.

`tsconfig.app.json`
- TypeScript compiler configuration for the Angular app
`tsconfig.spec.json`
- TypeScript compiler configuration for unit tests

(`tsconfig.app.json`) and for the unit tests (`tsconfig.spec.json`).


## ROOT FOLDER

`e2e/`
- end-to-end tests. They are really a separate app that just so happens to test your main app. That's also why they have their own tsconfig.e2e.json.

`.angular-cli.json`
 -Configuration for Angular CLI. In this file you can set several defaults and also configure what files are included when your project is built. Check out the official documentation if you want to know more.

`karma.conf.js`
- check https://karma-runner.github.io/

`protractor.conf.js`
- End-to-end test configuration for Protractor [http://www.protractortest.org/], used when running ng e2e.

`tsconfig.json`
- TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.

`tslint.json`
- 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.