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>

<scriptsrc="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:

<bodyng-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>

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

</head>

<bodyng-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:

Exercise 1 - Hello Universe

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.

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

Now Attempt the Hello Universe exercise.

The AngularJS Course

Angular is the wildly popular and productive front-end MVC JavaScript framework championed by Google. It is in many ways a perfect meeting place between the agile world of JavaScript and powerful design patterns, more commonly found in server-side languages like Java. Built from the ground up with testability in mind, dependency injection allows us to isolate components and yoke them into a test harness.
This course is practical. You will, right from day one, be building widgets and applications with real-world applicability. We will build against tests from the end of day one, and design sensible, component-based solutions using best practice. You will also gain an awareness of the wider JavaScript toolchain ecosystem, including Node, Karma, and Webpack.
The course will start with the fundamentals and will lead all the way up to advanced topics like code organisation, the digest cycle and modifying the scope of a transclusion in a directive.

Duration: 3 days

1.Angular Templates and Controllers

»

description:
Angular 1 places the template firmly in the driving seat. Your template controls you app in a way that you might not be used to.
This module will teach you how to use templates in your Angular application.

outcome: You will be able to create simple data driven forms and lists.