<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>Environment
Table of Contents
Goals
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 which is at http://plnkr.co/
The goal of this chapter is to explain how plunker works and what the different files in an Angular 2 plunker do.
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, it will attempt to load in the preview pane.
-
As you type in the plunker, it automatically updates the preview pane.
Structure of an Angular2 Plunker
The structure of an Angular 2 plunker is
- 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 2 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:
core-js
This is an ES6 shim (i.e. brings ES6 features into an ES5 environment).
The current 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 Angular1 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 User Interface. When it didn’t know about callbacks it frustratingly didn’t update the User Interface.
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 aysnchronous work and tells Angular when things happen. So in Angular 2 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 2 is written in Typescript, this is a pollyfill (a shim for the browser) that lets us use a feature of Typecscript called annotations.
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 2 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.
Note
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 system.config.js file, we can use the System.import function, 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 2 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
<!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>