1. Angular 5
  2. Quickstart
  3. Plunker

Plunker

Later on I’ll be showing you how to install Angular and run the required development tools locally on your computer.

But for now we are going to use an online editor called plunker.

The goal of this chapter is to explain how plunker works and the different files that make up an Angular plunker.

Learning Outcomes

  • Understand what plunker is, why and how we use it.

  • Understand the structure of an Angular plunker.

  • Know what each of the included libraries do.

What is plunker and how to use it?

  • It’s a web based editor and development environment. With it you can create, edit and run HTML, css and JavaScript files directly from your browser.

  • No setup required, everyone can code in the browser instantly.

  • Each plunker has it’s own unique URL which you can share with others so it’s a useful way to show others your work.

  • You can’t edit someone else’s plunker but you can fork it. Forking creates a new plunker that you own with all the files copied across.

  • If your plunker has an index.html file pressing the Run button will preview the plunker in the preview pane.

Structure of an Angular Plunker

An Angular plunker is composed of:

index.html

The main HTML file which includes the required libraries and bootstraps our Angular application

script.ts

The main file in which we’ll be placing our Angular code

system.config.js

Configuration for SystemJS which handles module loading (*) and compilation of TypeScript into JavaScript

tsconfig.json

Configuration for the TypeScript transpiler (*)

(*) We will be covering these topics in more detail later.

In our index.html we are including 4 javascript files, like so:

  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
  <script src="https://unpkg.com/[email protected]?main=browser"></script>
  <script src="https://unpkg.com/[email protected]"></script>
  <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>

core-js

The version of javascript that has the broadest support across all browsers is ES5.

Then next version of javascript is ES6. ES6 does not have full support across all browsers yet. (See https://kangax.github.io/compat-table/es6/.

This library enables a browser which doesn’t have support for ES6 to run ES6 code, just maybe not in the most efficient way

For further details take a look at the project homepage: https://github.com/zloirock/core-js

zone

"Zone is a mechanism for intercepting and keeping track of asynchronous work" — https://github.com/angular/zone.js

You don’t need to know details about this yet, it’s an advanced topic, but to summarise.

One of the problems with Angular 1 was that Angular didn’t know when things happened outside of Angular, for example in asynchronous callbacks.

When Angular 1 knew about callbacks it could do wonderful things, like automatically update the page. When it didn’t know about callbacks it frustratingly didn’t update the page.

No matter how experienced you were with Angular 1 bugs with these kinds of issues cropped up time and time again.

Zones solves this problem, it keeps track of all pending asynchronous work and tells Angular when things happen. So in Angular you don’t have to worry about whether Angular knows about your callback or not, zones tracks this for you and notifies Angular when something happens.

reflect

Angular is written in TypeScript, this file lets us use a feature of TypeScript called annotations (or decorators).

You’ll learn a lot more about annotations later on in this course.

SystemJS

Instead of including all the files we need as script tags in our index.html, in Angular we break up all our code into files called modules. We then leave it to a module loader to load the modules when they are needed, in the order they are needed.

It’s a complicated problem, in a browser we can’t make hundreds of requests to load JavaScript modules one at a time when a module loader requests them so a module loader needs to be clever.

It will become part of the core JavaScript language but until then we use a module loader, there are several available but the one we use in our plunker is SystemJS.

If we build an application locally with the Angular command line tools it will use another module loader called Webpack.

systemjs.config.js

SystemJS needs help to figure out when and how to load up certain modules, e.g. if we ask for a module called @angular what does that mean? What should it load up? Which version? This configuration is stored in the systemjs.config.js file.

System.import

Now we’ve loaded up the SystemJS library and configured it by loading up the systemjs.config.js file, we can use the System.import function to load up our script.ts file, like so:

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

Why not just add script.ts as a script tag?:

<script src="script.ts"></script>

Because in script.ts we include other modules, if we loaded via a script tag the browser doesn’t know how to load those other dependant js files.

By loading with System.import we make SystemJS figure out which dependant modules are required and loads the files for those automatically.

Summary

We can code up Angular in the browser using an online editor called plunker. It gives us the ability to try our Angular quickly without requiring complex setup.

It also gives us a unique URL so:

  1. We can quickly take a look at some code another person has written.

  2. We can share our code with other people, which is especially useful when we are stuck with some broken code and need help.

Listing

http://plnkr.co/edit/NzQ1skgIrliMIGgEPkp8?p=preview

<!DOCTYPE html>
<!--suppress ALL -->
<html>
<head>
  <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">

  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
  <script src="https://unpkg.com/[email protected]?main=browser"></script>
  <script src="https://unpkg.com/[email protected]"></script>
  <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
  <script src="systemjs.config.js"></script>
  <script>
    System.import('script.ts').catch(function (err) {
      console.error(err);
    });
  </script>
</head>

<body>
</body>
</html>

Learn Angular 5 For FREE

I've released my 700 page Kick Starter funded Angular 5 book for FREE