Google+

Creating an Angular 2 Application with the CLI

Angular is a JavasScript framework from the fine folks over at Google. The focus of Angular is building applications across all platforms.

Angular Logo

This is the first in a series of posts on Angular where we are using Chemistry data from the periodic table to help us understand the framework. The others posts are

  1. Angular - Introduction
  2. Angular - Getting Started

Getting started in the world of Web Development/JavaScript has become a lot more work over the last several years. We are pretty far removed where someone could create a web page and a JavaScript application with notepad. Libraries and frameworks such as React,
Angular and Aurelia all require things like JavaScript task managers such as Gulp or Grunt to transpile code, bundle files, minify them, etc. If that doesn't work, you can consider Babel and/or WebPack to get you moving.

The decisions for getting started have become so overwhelming, people have created a term, called JavaScript fatigue that sums up frustration from a subset of developers. The reality is, especially for a library like React, there are just too many tools for people. Initial project setup, whether React or Angular takes time.

For example, the Angular five minute quickstart guide was not very quick for me. There are over 20 NPM packages to install and users mostly just copy and paste an existing package.json file. The good news is that Angular, as well as React, both recently came out with command line tools to get developers up and running quick. That is what we will explore in this blog post.

In May of this year at NG-Conf the Angular team introduced the Angular Command Line Interfact (CLI) that helped really quickstart Angular application development and follows best practices.

To install the Angular CLI, type npm install -g angular-cli and wait a few minutes. Angular CLI as of this writing (August of 2016) is currently in beta under active development. One of the current focuses is moving from Brocolli to WebPack.

Install Angular

Once this is done, we can now use the command line to create our application. This is seriously good stuff.

To get started creating an application, we simply type

ng new APPLICATION_NAME

in our case, we will call our application AngularPeriodic and type

ng new AnuglarPeriodic

This will create our application structure as well as tests, setup up TypeScript and install all the requisite NPM packages.

Angular CLI to create application

A quick look at our directory structure sees that we hae a lot there..

Atom view of application

A quick look at our package.json file indicates the NPM packages that Google prefers out of the box, along with a testing framework based on

{
  "name": "angular-periodic",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.10",
    "codelyzer": "0.0.20",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "protractor": "3.3.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "1.8.10",
    "typings": "1.3.1"
  }
}

Not only are we able to get our structure created, we can actually run our application. This is done via the ng serve command. This takes our files, such as typescript and compiles them as well as bundling via Broccoli. Our initial application start displays a screen that lets us, literally, know that our application is working.

Initial Web Page

Our next step, and something the Angular CLI can handle for us, is to create a component. We will dig into this more in future posts, but one of the big benefits of Angular 2 is more modular approach for application development. We are going to create a Periodic Table application, so it makes sense to create a Periodic Table component. This is done by using the generate command for the Angular CLI command. We type

ng generate component periodicTable

and the files and structure for our component our created. This includes a TypeScript file for our component, a specification, HTML placeholder and CSS markup.

Component Generate

A quick change to our initial app structure to wire up the component (again, more on this later) and we can see our component get rendered.

In general, the structure of our application follows current Angular best practices. All the JavaScript files are placed in an app directory.

Directory Structure

The component TypeScript gets generated and creates our selector, reference our HTML template as well as our CSS file for styling.

import { Component, OnInit } from [email protected]/core';

@Component({
  moduleId: module.id,
  selector: 'app-periodic-table',
  templateUrl: 'periodic-table.component.html',
  styleUrls: ['periodic-table.component.css']
})
export class PeriodicTableComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

So, this is a quick look at the Angular CLI process for Angular 2. It is a great improvement over the previous setup process and helps development teams get up and moving quicker.


 

Angular/Angular2 Introduction

I spent a lot of time blogging about AngularJS in the past. Time moves on, especially on the Internet and Google is feverishly working on finishing up Angular2, which is currently in release candidate as of this writing (August of 2016).

We will take a similar approach to last time, where we developed a periodic table application that investigates different features about Angular.

One thing to note, Google has renamed Angular 2. The previous version of AngularJS, the 1.x stack was called AngularJS. The new version is now called just Angular. Part of the reason for this is to show its ability to create native mobile applications, so the JavaScript name can be a bit limiting. We will, in general, keep the same names. Angular and/or Angular 2 will refer to the current version of Anuglar. The older versions will be called AngularJS or Angular 1.x.

First though, why even upgrade at all, since the upgrade path from Angular 1.x to Angular 2? Let's highlight some reasons.

Component Based

Web development is moving towards component based development, especially with some of the emerging web standards. While those standards are not fully completed yet, Google is definitley preparing for that world. If you need further proof, checkout Google's Polymer project.

TypeScript

TypeScript is an extension of JavaScript created by Microsoft, open sourced and adopted by Google (I know!! Right?!?!) TypeScript essentially is ECMAScript 6, combined with the ability to create type and annotations. It is used to create Angular. The code samples developed by Google are all in TypeScript, with JavaScipt following later. You don't HAVE to use TypeScript, but it will make life easier.

Virtual DOM

One of the things ReactJS taught the world, is the value of a Virtual DOM. This is a virtual representation of the Document Object Model (DOM) for a HTML page. You can then work on this in memory which offers GREAT performance improvements. Google has adopted a Virtual DOM and has realized the expected performance boosts.

Those are a few of the highlights of why Angular2 over AngularJS 1.x. We will hit more as we contineu our series.


 

That Conference 2016 - Angular vs React

One of my favorite things each year is That Conference. I have been lucky enough to be chosen as a speaker each year (though I missed last year due to work commitments).

This year I talked on Angular vs React, and compared two of the most popular things going on in the world of JavaScript these days. Thanks to all of those who attended and provided engaging converstation.

For those interested, here is the presentation. I will also be uploading the code to my GitHub in a while after I button it up some more.

Thanks to all the organizer, sponsors and speakers for a great community event! I highly encourage folks to go next year, Aug 7-9.

ThatConference 2016


 

John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinions, which are not those of my employer.

Currently, I am reading Imajica by Clive Barker

@jptacekGitHubLinkedInStack OverflowGoogle+