Setup for local development

  • There are many more files in the project folder on your machine, most of which you can learn about later .
  • npm start fails in Bash for Windows which does not support networking to servers as of January, 2017.
  • Each file has a distinct purpose and evolves independently as the application grows.
  • Clone or download the QuickStart seed into your project folder.
  • Files inside src/ “belong” to your app.

Angular is a development platform for building mobile and desktop web applications

@mariorandrade: Don’t U just love it when a tutorial of 1 of the biggest things in the world doesn’t work. #angular #angularjs #npm

The QuickStart live-coding example is an Angular playground. It’s not where you’d develop a real application. You should 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 node and npm installed. Then …

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

fails in Bash for Windows which does not support networking to servers as of January, 2017.

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

fails in Bash for Windows which does not support networking to servers as of January, 2017.

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

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.

folder.

import { Component } from ‘@angular/core’; @Component({ selector: ‘my-app’, template: `

Hello {{name}}

` }) export class AppComponent { name = ‘Angular’; } import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { AppComponent } from ‘./app.component’; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’; import { AppModule } from ‘./app/app.module’; platformBrowserDynamic().bootstrapModule(AppModule);

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

concern building, deploying, and testing your app. They include configuration files and external dependencies.

, unless told to do otherwise.

app/app.component.ts

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.

. Soon there will be more components to declare.

main.ts

) 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 options later in the documentation.

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.

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.

Live coding in the browser is a great way to explore Angular.

Links on almost every documentation page open completed samples in the browser. You can play with the sample code, share your changes with friends, and download and run the code on your own machine.

internally for the playground only. so the reader can discover Angular without distraction. The other samples are based on the QuickStart seed.

As much fun as this is …

Use the live coding environment as a playground, a place to try the documentation samples and experiment on your own. It’s the perfect place to reproduce a bug when you want to file a documentation issue or file an issue with Angular itself.

For real development, we strongly recommend developing locally.

Setup for local development