Getting Started with Angular2

AngularJS is a popular JavaScript framework for creating web applications. Angular 2 is set to build on this popularity by bringing true object oriented web development to the mainstream.

At the end of 2014 Google announced that Angular 2 would be a complete rewrite of AngularJS, and they even created a new language AtScript that was meant to be used for writing Angular 2 applications.

Microsoft agreed to add support for decorators to their TypeScript language - strict superset of JavaScript -, resulting in what emerged as the language for the development of the Angular 2 framework itself, and the recommended language for developing applications using the AngularJS framework.

TypeScript

TypeScript is a superset of JavaScript that allows you to define new types. Declaring variables with types rather than the generic var opens the door to new tooling support, which you will find to be a great productivity enhancer.

TypeScript comes with a static code analyzer, and as you enter code in your TypeScript-aware IDE (WebStorm , Visual Studio Code, Sublime Text, etc.) youâ€™re guided by context sensitive help suggesting the available methods in the object or types of the function argument. If you accidentally use an incorrect type, the IDE will highlight the erroneous code.

Angular 2

Angular 2 application can be developed in ES5, EcmaScript 2015, TypeScript or Dart, but the framework lends itself best to TypeScript. Writing in TypeScript requires a bit more setup but the return on investment is tenfold in terms of productivity and clarity in our code. Instructions for how your TypeScript code will be transpiled to are typically defined in a tsconfig.json in your application root folder.

Angular 2 is not an MVC framework, but rather a component-based framework. In Angular 2 an application is a tree of loosely coupled components. Component communication should be implemented in a loosely coupled manner. Components can declare input and output properties. To pass the data from a parent to a child component, the parent binds the values to the input properties of the child. The child has no need to know who provided the values; it just knows it needs to use the data to perform some action.

Node and Npm

To develop an angular2 you'll most probably use Node and NPM for your tooling and build system, that tests and builds the static Javascript files you send into production.

install Node Version Manager (NVM)

Development IDE

You can develop using angular using nearly any Development IDE or even simply any text editor.

My preferred Editors are :

Starter Kits

There are a number of starter kits available that will assist you in getting started with an angular project really quickly.

Angular-Cli is one such quick starter guides. For the purpose of this guide I will assume you are running on a *nix based system and have access to the bash. You will also need to ensure you have node and npm installed.

## Install the angular-cli globall
npm install -g angular-cli
 
## create directory for your project
mkdir projectName
 
## change into your new project directory
cd projectName
 
 
### Create a new project
ng init
 
 
##   open project with vs code 
code .

The ng init command will bootstrap our application, download all the external dependencies weâ€™ll need, configure webpack, and basically do all grunt set up work for you.

Once the ng init has completed the setup process, navigate to localhost:4200 and you will see a message saying â€œapp works!â€.

Basic Application

We now have a very basic application we can now continue to work with. We will now just carry out some simple refactoring to help make us familiar with the project structure and make it easier to work with.

The first thing we would like to do is create a components folder under the app folder in order to create individual folders for our components. We will also create a new app folder under our component folder
We will also move 4 files in order that they are under our new app folder.

app.component.html
app.component.ts
app.component.spec.ts
app.component.css

There is one line we need to change in the app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
 
// Just change this line to include the file path
import { AppComponent } from './component/app/app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.Module

Angular Modules help to organize an application into cohesive blocks of functionalities and extend it with capabilities from external libraries.

The @NgModule is needed to:

Understanding @NgModule

Compile time:

Configuration of the template compiler.
Provide compilation context (which directives/pipes are visible in a directive) for the template compiler. (Visibility of components, directives, pipes, and eventually schema)
Provide a way to have ambient directives (such an ngIf, ngFor, ...) in the way which is scoped to a set of directives (such as Material Design, Ionic, Forms, etc)
Provide a mental model for reusable libraries: (such as Material Design, Ionic, Forms, etc)

Runtime:

Defines how to create an injector using the providers defined in the module and modules it recursively imports.
Configuration (and composition) of the injector through providers.
Eager initialization.

Add General Style sheet

We also want to add the bootstrap styles so we can style the application a little easier. For now we just include the following link to the bootsrtap ccs CDN in the index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularCli</title>
  <base href="/">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Add a link to bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

This will enable us to use bootstrap styles as the basis for our application styles.

App.Component.html

Although this is not strictly Angular 2 but it's just a little fun to get familiar with the structure, of the files. We'll just edit the app.component.html to include a div container.

The app.component.html will contain all the html mark up for our component. This enables us to have a separation of concerns within our code, so we don't intermingle our typescript code with our TypeScript code.

We will just wrap our header tags in container div.

<div class="container">
<h1>
  {{title}}
</h1>
</div>

app.component.css

Each of your components may require there our customizations of css, which you don't want to spread across the entire application. Adding styles to your app.component.css enables you to add these styles.

We'll just add a simple style rule for to make the h1 to red.

h1 {
 
    color:red;
 
}

app.component.ts

We'll now change the title that is displayed on the page as it's displayed, by editing app.component.ts

A quick review of the app.component file we'll notice that it defines it selector, template Url and style Urls and imports any additional modules it may require.

All the code we need to implement functionality within our component will be added here.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello Angular!';
}

Build and Serve

We are now finally ready to examine our handy work. We will need to build our application and then serve it.

In order to build the application we will use ng build in the integrated terminal window of VS Code

ng build

If there are no errors we are now ready to serve our application using ng serve

ng serve

Now if you browse to http://localhost:4200 , we will view our finished starter application and it should now look like this.

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.