Create our first app

There are several ways to quickly start an app.

One choice is cloning a starting repo like angular2-webpack-starter.

Another choice is using Angular-CLI. Angular-CLI is Angular 2's command line utility which can help us set up the environment for Angular 2. It has fast iteration reload, quick module integration, and the generator convenience.

We will use Angular-CLI to generate our app.

Installation of Angular-CLI

npm install -g angular-cli

This will install Angular-CLI globally, then we can use it.

Generate and serve the app

Open your terminal and run:

ng new angular2-server
cd angular2-server
ng serve

Now go to http://localhost:4200/. You can see your first app now.

You should be able to see "app works!" on your screen.

src/app/app.component.ts

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
  `,
})
export class AppComponent {
  title = 'app works!';
}

To display a component property, we bind the property name through interpolation. We put the property name in the view template, enclosed in double curly braces: {{title}}.

You can change 'app works!' to 'Hello World!' and save the file, the page will be automatically reload. That is pretty cool, huh?

Some other useful information

If you want to integrate CSS Preprocessor, please check CSS Preprocessor integration.

If you want to update Angular-CLI, please check Updating angular-cli.


Run the live example for this part.

results matching ""

    No results matching ""