angular-cn/setup.md at 8ef621ad2ad5662de56af1b5eb8ed2bff45809c2

7.0 KiB

Raw Blame History

@title Setup for local development

@intro Install the Angular QuickStart seed for faster, more efficient development on your machine.

@description

{@a develop-locally}

Setup a local development environment

The QuickStart live-coding example is an Angular _playground_. It's not where you'd develop a real application. You [should develop locally](guide/setup#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.

Setting up a new project on your machine is quick and easy with the QuickStart seed, maintained on github. Make sure you have !{_prereq} installed. Then ...

Create a project folder (you can call it quickstart and rename it later).
Clone or download the QuickStart seed into your project folder.
!{_Install} !{_npm} packages.
Run !{_npm} !{_start} to launch the sample application.

{@a clone}

Clone

Perform the clone-to-launch steps with these terminal commands.

git clone .git quickstart cd quickstart


`npm start` fails in _Bash for Windows_ which does not support networking to servers as of January, 2017.

{@a download}

Download

Download the QuickStart seed and unzip it into your project folder. Then perform the remaining steps with these terminal commands.

cd quickstart


`npm start` fails in _Bash for Windows_ which does not support networking to servers as of January, 2017.

{@a non-essential}

Delete non-essential files (optional)

You can quickly delete the non-essential files that concern testing and QuickStart repository maintenance (including all git-related artifacts such as the .git folder and .gitignore!).


Do this only in the beginning to avoid accidentally deleting your own tests and git setup!

Open a terminal window in the project folder and enter the following commands for your environment:

OS/X (bash)

xargs rm -rf < non-essential-files.osx.txt rm src/app/*.spec*.ts rm non-essential-files.osx.txt

Windows

for /f %i in (non-essential-files.txt) do del %i /F /S /Q rd .git /s /q rd e2e /s /q

{@a seed}

What's in the QuickStart seed?

The QuickStart seed contains the same application as the QuickStart playground. But its true purpose is to provide a solid foundation for local development. Consequently, there are many more files in the project folder on your machine, most of which you can learn about later.

{@a app-files} Focus on the following three TypeScript (.ts) files in the /src folder.

src app app.component.ts

  <aio-file>
    app.module.ts
  </aio-file>


</aio-folder>


<aio-file>
  main.ts
</aio-file>

All guides and cookbooks have at least these core files. Each file has a distinct purpose and evolves independently as the application grows.

Files outside src/ concern building, deploying, and testing your app. They include configuration files and external dependencies.

Files inside src/ "belong" to your app. Add new Typescript, HTML and CSS files inside the src/ directory, most of them inside src/app, unless told to do otherwise.

The following are all in src/

<th>
  File
</th>


<th>
  Purpose
</th>

<td>
  <ngio-ex>app/app.component.ts</ngio-ex>
</td>


<td>
  Defines the same `AppComponent` as the one in the QuickStart !{_playground}.      
        It is the **root** component of what will become a tree of nested components      
        as the application evolves. 
</td>

<td>
  <code>app/app.module.ts</code>
</td>


<td>
  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.
</td>

<td>
  <ngio-ex>main.ts</ngio-ex>
</td>


<td>
  Compiles the application with the [JIT compiler](glossary) and      
        [bootstraps](guide/appmodule)       
        the application's main module (`AppModule`) to run in the browser.      
        The JIT compiler is a reasonable choice during the development of most projects and      
        it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.      
        You'll learn about alternative compiling and [deployment](guide/deployment) options later in the documentation.      
        
</td>


### Next Step

If you're new to Angular, we recommend staying on the [learning path](guide/learning-angular).

{@a install-prerequisites}

Appendix: !{_prereq}

Node.js and npm are essential to modern web development with Angular and other platforms. Node powers client development and build tools. The npm package manager, itself a node application, installs JavaScript libraries.

Get them now if they're not already installed on your machine.

Verify that you are running node v4.x.x or higher and npm 3.x.x or higher by running the commands node -v and npm -v in a terminal/console window. Older versions produce errors.

We recommend nvm for managing multiple versions of node and npm. You may need nvm if you already have projects running on your machine that use other versions of node and npm.

7.0 KiB Raw Blame History