Angular 2: Getting Started

1 First Things First

1.1 Selecting A Language

Typescript.

1.2 Selecting an Editor

Visual Studio Code.

1.3 Setting Up Our Environment

Go to npmjs.org. Download the latest stable version of Node. Install it.

1.4 Setting Up an Angular 2 Application

Many options. But let’s go with the easiest. Download the starter files here:

https://github.com/DeborahK/Angular2-GettingStarted

Rename directory to APM if you need to. CD to your APM directory. Type npm install and it’ll automatically download and install everything we need, like Typescript.

1.5 Running An Angular 2 Application

Type npm start and it begins a server and launches a browser window with the app. It also runs tsc which is the Typescript Compiler.

Every time you make a change to your files, Typescript Compiler recompiles the code and reloads the page in the browser.

1.6 About Modules

In JavaScript it’s easy to end up with variables in the global namespace. Also, it doesn’t provide any means to organize code. Modules deal with both these concerns.

Angular 1 introduced modules to deal with some namespacing issues and to organize code. TypeScript also has modules to keep things out of the global namespace. ES2015 sets a standard for defining a module; a file is a module, and a module is a file. You don’t have do anything more than just create a file and write some code and import it. That’s a module. Angular 2 makes use of ES2015’s modules.

1.6.1 ES2015 Modules

How do these ES2015 modules work? Like this:

Here’s product.ts:

export class Product {

}

And we can import this file/module anywhere else in our app. Here’s how we’d import it into product-list.ts:

import { Product } from './product'

This is a second module. And actually, we’re not importing from product.ts but rather from product.js because although we write in TypeScript, it compiles to JavaScript and saves a new file, product.js.

1.6.2 Angular Modules

Every Angular app has at least one module. There’s the Root module, which can have components below it. And additional Feature modules. Also Shared modules. Each can have components, and each component belongs to one, and only one, Angular module.

1.6.3 The Difference

The rest becomes vaguely philosophical about how the difference between ES2015 and Angular modules are about reuse vs boundaries, or organizing code vs organizing an app.

1.7 Loading ES Modules and Hosting Our App

  • The user loads up the index.html page.
    o Link tags to define stylesheets
    o Script tags to load up libraries we need
    o Script tags to load up systemJS config
    o Code to import the app module to start running our app.

System.import('app').catch(function(err){console.error(err);});

How does it know what file to load within app? In systemjs.config.js it tells it to load main.js.

In the body of the HTML page is where we host our app.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s