Hello Angular

In this section we are going to get some Angular running in a browser.

Getting Angular

We download Angular from angularjs.org. If you want to get fancy, there's also an NPM module.

To use Angular, it is sufficient to just link it in a script tag at the top of the page.

<script src="angular.js"></script>

If you prefer, you can also use a CDN such as the Google Angular CDN.

<script src="https://developers.google.com/speed/libraries/devguide#angularjs"></script>

Angular is template driven

Angular is driven by the template. Your HTML5 is the wires that hold together your app. This is different from most other JavaScript frameworks where the HTML is driven by the JavaScript. We call this an inversion of control.

In Angular we modify our app by modifying our template. Angular reads the templates and decides which JavaScript components are needed.

The simplest Angular template is just an HTML5 file like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.js"></script>
  </head>
  <body>

  </body>
</html>

Angular is a DOM compiler

Angular will take a portion of this HTML5 file and compile it. We tell it which portion to compile using an ng-app attribute (directive).

We can attach this attribute to any DOM node, typically the html or body tags:

<body ng-app>
  Hello!
</body>

All the HTML5 within this directive is an Angular template and will be compiled as such.

Curly curlies

We can tell Angular to treat portions of our HTML as an expression using curly curly braces, like so:

<p>
  {{"hello" + "world"}}
</p>

We can put all kinds of expressions between these braces:

<span>
  {{1000 * 1000}}
</span>

Hello World

The simplest possible Angular hello world app would look something like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.js"></script>
  </head>
  <body ng-app>
    {{"Hello" + "World"}}
  </body>
</html>

Expressions !== JavaScript

It's important to remember that Angular expressions are not JavaScript. The expression language looks a lot like JavaScript, but we can do other things too, for example, filters:

Filters

A filter looks like this:

{{100000000 | number}}

This is the number filter. It will output a string like this:

100,000,000

There are other filters, for example the uppercase filter, which looks like this:

{{'hello world' | uppercase}}

This is the uppercase filter. It will output a string like this:

HELLO WORLD

We can write our own filters, as we will see later.

Exercise Resources and Downloads

Exercise 1 - Hello Universe

Try and get a simple hello world app running in your browser.

Download Angular latest uncompressed from here: https://angularjs.org/
Concatenate the strings "Hello" and "World" to make a hello world app.
Open the file in your browser and verify that it works.

You can use the exercise start point in the Github repository, or you can just make a file and start hacking.

Exercise 2 - Maths

We're going to do some simple maths in the browser.

Create an Angular template which tells you how many seconds there are in a day, a year, a century.
Find out how many weeks there are in a human lifetime.

Exercise 3 - Visual Studio Setup (if you are using VS)

If you need to develop in Visual Studio, you may have a bit of a culture shock when you start using Angular. We use static HTML templates and compile in the browser using JavaScript. The role of the server is dramatically reduced.

Visual Studio 2015 has excellent support for Angular. MS TypeScript is the language of Angular 2, and VS 2015 has Gulp and Node built right into it.

You may however have to adjust your thinking just a little bit, and you will have rather more hoops to jump through.

Creating the Project

First create a new project.
From Templates, create an ASP.Net Web Application.
Choose Empty to create a completely empty application. We won't be using any of the features of .Net in our front end application.

Create the HTML file

Right click your new application, add new item, and create an html file. Call it index.html. This is our template.
Insert a little bit of text inside it.
Now right click the file and open in browser. See the text?
Alt tab back to Visual Studio and make a change to the text.
Now alt tab back to your web browser. Press refresh. See the change you made?

Getting Angular

We can use NuGet to install Angular.

Right click the project in the solution explorer and choose manage NuGet packages.
Choose Angular Core from the list. It will be installed into your Scripts folder. Have a look there now.

Linking Angular

Now we need to link Angular. Because this is the front end we do this with a script tag right in the html.

<script src="/Scripts/angular.js"></script>

Now Attempt the Hello Universe exercise.