Angular (COMEM+ Web Dev)

# Angular

Getting started with and understanding the basics of [AngularJS][angular] (version 1), the JavaScript front-end web application framework.

This material is used in [COMEM+](http://www.heig-vd.ch/comem) [web development courses](https://github.com/MediaComem/comem-webdev).

**You will need**

* [Google Chrome][chrome] (recommended, any browser with developer tools will do)

**Recommended reading**

* [JavaScript][js]
* [JavaScript closures][js-closures]

---
class: center, middle, image-header
## What is Angular?

.breadcrumbs[<a href="#1">Angular</a>]

> "Angular is a complete **JavaScript front-end web application framework** created by Google to address many of the challenges of developing **rich single-page applications**."

---
### Traditional Model-View-Controller (MVC) architecture

.breadcrumbs[<a href="#1">Angular</a> > <a href="#2">What is Angular?</a>]

In traditional MVC frameworks,
the application's **Controllers** receive the user's requests when navigating from page to page in the browser,
and respond by generating HTML **Views** from the **Model**.

---
### DOM manipulation and AJAX requests

.breadcrumbs[<a href="#1">Angular</a> > <a href="#2">What is Angular?</a>]

.grid-60[

Serving dynamic HTML from the server works, but each user action requires that a **complete page be loaded** from the server.

To improve user experience:

* [AJAX][ajax] was developed in 1999 to retrieve data from the server asynchronously in the background
* [jQuery][jquery] was released in 2006 to simplify DOM manipulation and AJAX requests

]
.grid-40[

]
.container[

This allows you to load data from the server in the background and **dynamically update the page** without reloading.

Initially, these technologies were used to **enrich** existing HTML pages that were still built and served by a traditional MVC framework.

]
---
### Single-page applications

.breadcrumbs[<a href="#1">Angular</a> > <a href="#2">What is Angular?</a>]

.grid-50[

A single-page application (SPA) is a web application that **fits on a single web page** but provides a user experience similar to that of a **desktop application**:

* All content is retrieved with a **single page load or loaded dynamically**
* The page **does not reload** (location hash or [HTML 5 History API][html-history-api] to navigate between logical pages)
* Dynamic **communication with the web server** behind the scenes

]
.grid-50[

]
---
### Dynamic HTML with Angular

.breadcrumbs[<a href="#1">Angular</a> > <a href="#2">What is Angular?</a>]

> "AngularJS is what HTML would have been, had it been designed for building web-apps."

HTML is great for displaying static documents, but is not so good at describing the **dynamic views** needed for **rich, interactive applications**.

With Angular, you can:
  * **Automatically bind data** to HTML elements
  * **Extend the HTML vocabulary** with new elements and attributes
  * **Isolate** your application logic from how the data is displayed

---
### Evolution of Angular

.breadcrumbs[<a href="#1">Angular</a> > <a href="#2">What is Angular?</a>]

Angular is one of the most popular client-side frameworks, and it is still evolving.
[Angular 2][angular-2] has been released recently (June 2016) to take advantage of:

* [TypeScript][typescript]: a superset of JavaScript with optional typing and the latest ECMAScript features
* [Web components][web-components]: a way to create reusable user interface widgets

This tutorial will cover Angular 1, but many concepts are useful to understand Angular 2 as well.

---
class: center, middle
## Getting started

.breadcrumbs[<a href="#1">Angular</a>]

---
### Starter template

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

You can use this template for the exercises in this tutorial.
It includes Angular already.
Save it as an HTML file and create an empty `angular-demo.js` file next to it:

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>Angular demo</title>
    <script
src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js'>
    </script>
  </head>
  <body>

<script src='angular-demo.js'></script>
  </body>
</html>
```

You can use [live-server][live-server] to serve these files in your browser.
You should keep your [developer console][chrome-dev] open throughout this tutorial to detect errors in your code.

---
### Overview

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

.grid-50[

**Angular elements**

* Modules
* Controllers
* Scope
* Services
* Filters
* Directives & components
* Constants
* Config functions
* Run functions

]
.grid-50[

**Angular concepts**

* Interpolation
* Two-way data binding
* Dependency injection
* Scope hierarchy
* Form validation

]
---
### Modules

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

To make an Angular application, you have to create a **module**:

```js
// Create an angular module
angular.module('starter', []);
```

The two arguments of `angular.module()` are:

* A name (in this case: the name of your application)
* A list of dependencies (leave it blank for now)

To plug your Angular application into a web page, use the `ng-app` attribute.
It's customary to put it on the `<body>` tag:

```html
*<body ng-app='starter'>
  
</body>
```

---
### Controllers

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

A controller is a function which **controls part of an HTML template**:

```js
angular.module('starter').controller(`'HelloController'`, function($scope) {
  $scope.name = 'World';
});
```

You can apply your controller to the HTML tags you want to control with the `ng-controller` attribute:

```html
<div `ng-controller='HelloController'`>
  <p>Hello {{ name }}!</p>
</div>
```

Let's dig into that line by line.

---
#### Creating a controller

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

Note that we call `angular.module()` again, but this time **only with the name**.
Instead of creating a new module, this returns the **existing module** with that name:

```js
`angular.module('starter')`.controller('HelloController', function($scope) {
  $scope.name = 'World';
});
```

Then, we define a controller named `HelloController`:

```js
angular.module('starter')`.controller('HelloController'`, function($scope) {
  $scope.name = 'World';
});
```

That controller is simply a **function**:

```js
angular.module('starter').controller('HelloController', `function($scope) {`
* $scope.name = 'World';
`}`);
```

---
#### The scope

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

The `$scope` object is the **view model**, i.e. the model that will be presented by the view:

```js
angular.module('starter').controller('HelloController', function(`$scope`) {
  `$scope.name` = 'World';
});
```

Properties you attach to the scope can be interpolated into HTML templates with double curly braces:

```html
<div ng-controller='HelloController'>
  <p>Hello `{{ name }}`!</p>
</div>
```

---
#### Named controllers

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

You can also access the scope by using **named controllers**.
**Instead** of using the `$scope`, you attach properties directly to the controller using `this`:

```js
angular.module('starter').controller('HelloController', function() {
  `var helloCtrl = this;`
  `helloCtrl.name` = 'World';
});
```

In the template, use `MyController as myName` in the `ng-controller` attribute.
This assigns a name to the controller, which you can then use in interpolation:

```html
<div ng-controller='HelloController `as helloCtrl`'>
  <p>Hello {{ `helloCtrl.name` }}!</p>
</div>
```

Even when using this syntax, there is still a **scope** being created and used.

You will find examples of both (using only the scope or using named controllers) in the documentation and examples online.

---
#### Outside the scope of a controller

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

Add a new `div` outside the one you already created:

```html
<div ng-controller='HelloController as helloCtrl'>
  <p>Hello {{ helloCtrl.name }}</p>
</div>

*<div>
* <p>I am {{ helloCtrl.name }}</p>
*</div>
```

No name will be displayed there.

This new part of the DOM is **outside the scope** of `HelloController`,
as we applied the `ng-controller` only to the other `div`.

---
#### Multiple controllers

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

Add another controller:

```js
angular.module('starter').controller('OtherController', function() {
  var otherCtrl = this;
  otherCtrl.name = 'Bob';
});
```

Also add an `ng-controller` to use it on the second `div`,
and change the variable from `helloCtrl.name` to `otherCtrl.name`:

```html
<div `ng-controller='OtherController as otherCtrl'`>
 <p>I am {{ `otherCtrl`.name }}</p>
</div>
```

This time it will work.

As you can see, **each controller has its scope** and controls only that part of the DOM to which it is applied with `ng-controller`.

---
#### Using functions in the view

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

You can also attach functions to the scope or controller:

```js
angular.module('starter').controller('HelloController', function() {
  var helloCtrl = this;
  helloCtrl.name = 'World';
* helloCtrl.double = function(n) {
*   return n * 2;
* };
});
```

These functions can be called in the view:

```html
<div ng-controller='HelloController as helloCtrl'>
  <p>Hello {{ helloCtrl.name }}!</p>
* <p>Two times two equals {{ helloCtrl.double(2) }}</p>
</div>
```

---
#### Using `ng-model`

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

You can bind the **view model** and **view** together:

```js
angular.module('starter').controller('HelloController', function() {
  var helloCtrl = this;
  // ...
  `helloCtrl.value = 2;`
});
```

Reference this new `helloCtrl.value` variable in the view with `ng-model`:

```html
<p>
  Two times <input `ng-model='helloCtrl.value'` />
  equals {{ helloCtrl.double(`helloCtrl.value`) }}
</p>
```

---
#### Data binding

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

What's interesting about `ng-model` is that it goes both ways.
Add a function that modifies the value of your scope variable:

```js
angular.module('starter').controller('HelloController', function() {
  var helloCtrl = this;
  // ...
* helloCtrl.reset = function() {
*   helloCtrl.value = 2;
* };
});
```

Then add a button that calls this new function below the previous HTML:

```html
<p>
  Two times <input ng-model='helloCtrl.value' />
  equals {{ helloCtrl.double(helloCtrl.value) }}
</p>
*<button type='button' ng-click='helloCtrl.reset()'>Reset</button>
```

See how the view changes when you modify the value and click the reset button.

---
#### Two-way data binding

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#12">Controllers</a>]

.grid-50[

Traditional templating systems bind data **in only one direction**.

The developer has to write code that constantly syncs the view with the model and vice versa.

]
.grid-50[

With Angular changes are **immediately reflected** in both view and model.

This is one of the great strengths of Angular: the **controller** is completely **isolated from and unaware of the view**.
It does not care about DOM manipulation or rendering concerns.

]
---
### Services

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

In general, controllers shouldn't try to do too much.
They should contain only the business logic needed for a **single view**.
Keep controllers slim is by encapsulating work that doesn't belong to controllers into **services** and then using these services in controllers.

You can create a service by calling `factory()`.
As the name implies, you must pass a **factory function** that will create and return the service.

Let's create a service with that `double` function we wrote earlier:

```js
angular.module('starter')`.factory('HelloService', function() {`

var service = {};

service.double = function(n) {
    return n * 2;
  };

return service;
`}`);
```

---
#### Dependency injection

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#22">Services</a>]

Using the service is as simple as adding it as an argument to our controller:

```js
angular.module('starter').controller('HelloController', function(`HelloService`) {
  var helloCtrl = this;
  helloCtrl.name = 'World';
  helloCtrl.double = `HelloService.double`;
});
```

This works because Angular is built around **dependency injection**:

* When you define a controller, service or other kind of Angular element, you give it **a name**
* In the factory function that creates the controller (or other element), you tell Angular **the names of the other elements you need** as arguments
* Angular will **inject** the required elements into your factory function for you

---
#### Why dependency injection?

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#22">Services</a>]

.grid-50[

**Strong coupling**

```js
function Car() {
  this.engine = new Engine(24);
}
function Engine(gasLead) {
  this.gas = new Gas(gasLead);
}
function Gas(lead) {
  this.lead = lead;
}
```

]
.grid-50[

**Loose coupling** (with an *injector*)

```js
function Car(engine) {
  this.engine = engine;
}
function Engine(gas) {
  this.gas = gas;
}
function Gas(lead) {
  this.lead = lead;
}
```

]
---
#### The $http service

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#22">Services</a>]

Angular provides several useful services out of the box.
The `$http` service can make AJAX requests for you:

```js
angular.module('starter').factory('HelloService', function(`$http`) {

var service = {};

// ...

* service.retrieveJoke = function() {
*   return $http.get('https://api.icndb.com/jokes/random').then(function(res) {
*     return res.data.value.joke;
*   });
* };

return service;
});
```

---
#### Making HTTP requests through a service

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#22">Services</a>]

It's good practice to make HTTP requests in a service rather than in a controller directly.
That way your controller remains **as simple as possible** and only manages the view:

```js
angular.module('starter').controller('HelloController', function(HelloService) {

var helloCtrl = this;
  helloCtrl.name = 'World';
  helloCtrl.double = HelloService.double;

* HelloService.retrieveJoke().then(function(joke) {
*   helloCtrl.joke = joke;
* });
});
```

You can now display the joke in the HTML template:

```html
<div ng-controller='HelloController as helloCtrl'>
  <p>Hello {{ helloCtrl.name }}!</p>
  <p>Two times two equals {{ helloCtrl.double(2) }}</p>
* <p>Did you hear? {{ helloCtrl.joke }}</p>
</div>
```

---
#### Using `service()`

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#22">Services</a>]

Services can also be defined with Angular's `service()` function instead of `factory()`.
They **both create services**; the only difference is how your **factory function** is invoked to create the service.

When using `factory()`, Angular will simply call your factory function to create the service:

```js
function MyServiceFactory() {
  var service = {};      // Create the service yourself
  service.foo = 'bar';   // Attach stuff to it
  return service;        // Return it
}

// Angular will execute "MyServiceFactory()" to create the service
angular.module('starter').factory('MyService', MyServiceFactory);
```

When using `service()`, Angular calls your factory function as a **constructor**:

```js
function MyServiceFactory() {
  this.foo = 'bar'; // Attach stuff to "this", which will be the service
}

// Angular will execute "new MyServiceFactory()" to create the service
angular.module('starter').service('MyService', MyServiceFactory);
```

---
### Filters

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

Filters are simple functions that format a value for display to the user.

To create a filter, you must use `filter()` and pass a factory function (where you can inject dependencies if you need them).
This function **must return the filter function** that will be called with the value:

```js
angular.module('starter').filter('hello', function() {
* return function(input) {
*   return 'Hello ' + input + '!';
* };
});
```

You apply a filter by "piping" a value into it.
Let's modify the first paragraph of our previous template a bit:

```html
<p>{{ `helloCtrl.name | hello` }}</p>
```

---
#### Built-in filters

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#28">Filters</a>]

Angular has a number of useful [built-in filters][angular-built-in-filters]:

---
#### A few filter examples

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#28">Filters</a>]

Several filters can be "piped" together:

```html
<p>{{ helloCtrl.name | uppercase | hello }}</p>
```

Let's try the `date` filter.
Create a date in your controller first:

```js
angular.module('starter').controller('HelloController', function(HelloService) {
  var helloCtrl = this;
  // ...
  `helloCtrl.now = new Date();`
});
```

Then filter it in the view:

```html
<p>It's {{ `helloCtrl.now | date: 'HH:mm:ss'` }}</p>
```

---
### Directives

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

[Directives][angular-directives] are **markers on a DOM element** that tell Angular's **HTML compiler** to attach a **specified behavior** to that DOM element, or to **transform** the DOM element and its children.

You've already used them: `ng-controller` and `ng-model` are directives.

A directive can be an **HTML attribute**:

```html
<input `ng-model='helloCtrl.value'` />
```

An **HTML class**:

```html
<p `class='my-directive'`>Hello</p>
```

Or a custom **HTML tag**:

```html
*<person person='person'></person>
```

---
#### Making your own directive

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#31">Directives</a>]

A directive is not magic, you can create your own using Angular's `directive` function.
This function must return a **directive definition object**:

```js
angular.module('starter')`.directive('redAlert', function() {`
  return `{`
*   link: function(scope, element, attributes) {
*     element.css('background-color', '#ff7777');
*   }
  `}`;
`}`);
```

You can then use this directive in the view:

```html
<div ng-controller='HelloController as helloCtrl'>
  
  <p `red-alert`>Did you hear? {{ joke }}</p>
</div>
```

Note that you use **dash-delimited names in the view**,
but Angular looks for a directive with a corresponding **camel-case name**.

---
#### DOM manipulation in directives

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#31">Directives</a>]

The **main goal** of directives is to perform **DOM manipulation instead of controllers**,
so that controllers only have to deal with the view model.

A directive's link function has the following signature:

```
  function(scope, element, attributes)
```

* The `scope` is the Angular scope object corresponding to the HTML DOM element to which the directive is attached
* The `element` is a [jQuery][jquery] wrapper around the HTML DOM element
* The `attributes` are an object representing the HTML DOM element's attributes and values

If you have not included jQuery in your project, the `element` is actually a [jqLite wrapper][angular-element].

jqLite is a tiny, API-compatible **subset of jQuery** that allows Angular to manipulate the DOM in a cross-browser compatible way.
It implements only the **most commonly needed** functionality with the goal of having a **very small footprint**.

---
#### Built-in directives

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#31">Directives</a>]

Directive             | Description
:---                  | :---
`ng-app`              | Designate the root HTML element of an Angular application
`ng-class`            | Set CSS classes on an HTML element based on an expression
`ng-controller`       | Attach an Angular controller to an HTML element
`ng-click`            | Specify custom behavior when an HTML element is clicked
`ng-disabled`         | Sets the `disabled` attribute on an HTML element (e.g. `<input>`, `<button>`, `<select>`) based on an expression
`ng-if`               | Removes or recreates an HTML element based on an expression
`ng-model`            | Bind a form input (e.g. `<input>`, `<select>`, `<textarea>`) to a property of the Angular scope
`ng-repeat`           | Repeat an HTML element once per item from a list
`ng-show` / `ng-hide` | Shows or hides an HTML element based on an expression
`ng-switch`           | Conditionally swap HTML elements based on an expression

Read the [documentation][angular-directives-list] to learn more.

---
#### An example with `ng-repeat`

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#31">Directives</a>]

Let's add a list of people to our `HelloController`:

```js
angular.module('starter').controller('HelloController', function(HelloService) {
  var helloCtrl = this;
  // ...
* helloCtrl.people = [
*   { firstName: 'John', lastName: 'Doe' },
*   { firstName: 'Jane', lastName: 'Doe' },
*   { firstName: 'Richard', lastName: 'Doe' }
* ];
});
```

Let's say we want to display an `<ul>` list with an `<li>` element for each person.
`ng-repeat` can handle that for you:

```html
<div ng-controller='HelloController as helloCtrl'>
  
  <p>
    <ul>
      <li `ng-repeat='person in helloCtrl.people'`>
        {{ person.firstName }} {{ person.lastName }}
      </li>
    </ul>
  </p>
</div>
```

---
#### Two-way binding with `ng-repeat`

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#31">Directives</a>]

Let's add a couple of HTML input fields to add a new person with a first and last name,
and a button that will call `helloCtrl.addPerson()` when clicked:

```html
<div ng-controller='HelloController as helloCtrl'>
  
  <p>
    <input ng-model='helloCtrl.newPerson.firstName' placeholder='First' />
    <input ng-model='helloCtrl.newPerson.lastName' placeholder='Last' />
    <button type='button' ng-click='helloCtrl.addPerson()'>Add</button>
  </p>
</div>
```

Now add that function to the controller:

```js
angular.module('starter').controller('HelloController', function(HelloService) {
  var helloCtrl = this;
  // ...
* helloCtrl.addPerson = function() {
*   helloCtrl.people.push(helloCtrl.newPerson);
*   helloCtrl.newPerson = {};
* };
});
```

The HTML is automatically updated when the new person is pushed into the array.
Angular's two-way binding and `ng-repeat` do everything for us.

---
### Components

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

Components are a **special kind of directive** with simpler configuration and which is suitable for a **component-based application structure**.
They're a first step towards making applications with [web components][a-guide-to-web-components], an approach which has been taken further in Angular 2.

A component is basically:

* A **reusable view** (an HTML template)
* Some **logic** attached to this template (a controller)
* Clearly defined **inputs** and **outputs**

For this example, we'll create a `<person>` component to display a person.

---
#### Component HTML template

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#37">Components</a>]

Let's say we want to reuse the bit of template we wrote to display a person,
because we know we're going to display people at multiple places in our app:

```html
{{ personCtrl.person.firstName }} {{ personCtrl.person.lastName }}
```

`personCtrl` will be our component's controller.
We will define it later.

Save this content to a `person.html` file next to `index.html`.
Angular will make an AJAX request to load it dynamically when we define our component.

---
#### Component definition

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#37">Components</a>]

Call Angular's `component()` function to define a component.
The second argument is a **component definition object** with various properties that configure your component:

```js
angular.module('starter').component('person', `{`
* templateUrl: 'person.html',
* bindings: {
*   person: '<'
* },
* controller: function() {
*   var personCtrl = this;
* },
* controllerAs: 'personCtrl'
`}`);
```

* `templateUrl` tells Angular what **HTML template** to use
  (it can be a relative or absolute URL)
* `bindings` defines the component's **inputs** and **outputs**
* `controller` is the component's **controller** that will be applied to the template
  (just like if we used `ng-controller`)
* `controllerAs` is the **name of the controller** in the template
  (just like if we used `as personCtrl` in `ng-controller`)

---
#### Using a component

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#37">Components</a>]

Now we can use our new component in the main view.
Update the list to use your new component:

```html
<p>
  <ul>
    <li ng-repeat='person in helloCtrl.people'>
      `<person person='person'></person>`
    </li>
  </ul>
</p>
```

It's good practice to structure your application into **reusable components**.

---
#### Component inputs

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#37">Components</a>]

Components should only control **their own view and data**.
You can define the behavior of inputs with the values in the `bindings` object:

Binding | Description
:---    | :---
`<`     | Input with one-way binding: changes to the value will not be reflected in the parent (although if it's an object or array, changes to its contents will be reflected)
`=`     | Input with two-way binding (changes to the value will be reflected in the parent)
`@`     | String input (when the input is simply a string that doesn't change, i.e. not a variable)

When writing components, it's good practice to use `<` and `@` instead of `=`,
to make it clearer who controls what data.
Here's an example of the difference between using `<` and `@`:

```html

<hello name='person.name'></hello>

<hello name='John Doe'></hello>
```

---
#### Component outputs

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#37">Components</a>]

Outputs allow your component to **communicate with the parent component** (or view).
Let's modify our `person.html` template and add a button to say hello to each person:

```html
{{ personCtrl.person.firstName }} {{ personCtrl.person.lastName }}
*<button type='button' ng-click='personCtrl.sayHello()'>Say hello</button>
```

Add the `sayHello` function to the component's controller.
Just log the name for now and make sure it works:

```js
angular.module('starter').component('person', {
  templateUrl: 'person.html',
  bindings: {
    person: '<'
  },
  controller: function() {
    var personCtrl = this;
*   personCtrl.sayHello = function() {
*     console.log(personCtrl.person);
*   };
  },
  controllerAs: 'personCtrl'
});
```

---
#### Output callbacks

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#37">Components</a>]

Component outputs allow you to define **callbacks to component events**.

You define an output by adding a `&` binding.
This kind of binding is a **function** that is added to the scope and **which you can call**:

```js
angular.module('starter').component('person', {
  templateUrl: 'person.html',
  bindings: {
    person: '<',
*   onSayHello: '&'
  },
  controller: function() {
    var personCtrl = this;
    personCtrl.sayHello = function() {
*     personCtrl.onSayHello({ personToSalute: personCtrl.person });
    };
  },
  controllerAs: 'personCtrl'
});
```

---
#### Using a component output

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#37">Components</a>]

The **parent component** (or view) can plug a **callback function** into our new component output:

```html
<person
  person='person'
  `on-say-hello='helloCtrl.sayHelloToPerson(personToSalute)'`>
</person>
```

We can use the property names of the object passed to the output as variables in the parent
(the `personToSalute` variable name is defined by the component when it uses the output).

Define the `sayHelloToPerson` function in `HelloController` to react to the output:

```js
angular.module('starter').controller('HelloController', function(HelloService) {
  var helloCtrl = this;
  // ...
* helloCtrl.sayHelloToPerson = function(person) {
*   helloCtrl.name = person.firstName;
* };
});
```

---
### Application configuration and runtime

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a>]

The remaining Angular elements are simple but useful:

* **Constants** allow to define constant values that can serve as configuration
* **Config functions** are run when configuring the Angular application,
  and allow you to customize services and other elements
* **Run functions** are run after configuration is complete,
  before your controllers, directives and components are applied

---
#### Constants

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#45">Application configuration and runtime</a>]

A constant is simply a **value that can be injected** into other Angular elements.
You define it by calling Angular's `constant()` function:

```js
angular.module('starter')`.constant('theMeaningOfLife', 42)`;
```

Simply inject it where you need it:

```js
angular.module('starter')
  .controller('HelloController', function(HelloService, `theMeaningOfLife`) {
    var helloCtrl = this;
    // ...
*   console.log('The meaning of life is ' + theMeaningOfLife);
  });
```

---
#### Config functions

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#45">Application configuration and runtime</a>]

A **config function** is called while the Angular application is being configured:

```js
angular.module('starter').config(function() {
  // Do some stuff...
});
```

You **cannot** inject services into a config function, as they have not been instantiated yet.
You can however inject constants and **providers**, which can be used to customize services:

```js
angular.module('starter').config(function(`$httpProvider`, `theMeaningOfLife`) {
  // Get the object of default headers send by $http on every request
  var commonHeaders = `$httpProvider`.defaults.headers.common;
  // Tell $http to always request XML from the server
  commonHeaders.Accept = 'application/xml';
  // Tell $http to always send the MeaningOfLife header to the server
  commonHeaders.MeaningOfLife = `theMeaningOfLife`;
});
```

---
#### Run functions

.breadcrumbs[<a href="#1">Angular</a> > <a href="#8">Getting started</a> > <a href="#45">Application configuration and runtime</a>]

A **run function** is called after the Angular application is configured but **before** your controllers, directives and components are applied:

```js
angular.module('starter').run(function(HelloService) {
  console.log('2 times 2 equals ' + HelloService.double(2));
});
```

You can use it to perform tasks that should be run once when your application starts.

---
## Scope hierarchy

.breadcrumbs[<a href="#1">Angular</a>]

Many directives in Angular create a **new scope**, like `ng-controller` or `ng-repeat`.
Child scopes **inherit properties from their parent scope**.

You can see it in action [here][angular-codepen-scope-hierarchy].

---
### Scopes and components

.breadcrumbs[<a href="#1">Angular</a> > <a href="#49">Scope hierarchy</a>]

When you define a component, you create an **isolated scope** which **does not inherit** from the parent scope.
Your component can only communicate with the parent view through **inputs** and **outputs**.

You can see it in action [here][angular-codepen-scope-components].

---
## Forms

.breadcrumbs[<a href="#1">Angular</a>]

Angular provides **validation** services for forms and controls.
These validations are performed **client-side** for a better user experience: the user gets **instant feedback**.

However, keep in mind that although this provides a good user experience, it can easily be circumvented and thus **cannot be trusted**.
**Server-side validation is still necessary** for a secure application.

---
### HTML validations

.breadcrumbs[<a href="#1">Angular</a> > <a href="#51">Forms</a>]

HTML 5 has built-in validation attributes to define validations on your form inputs (e.g. `<input>`, `<textarea>`, etc):

You simply add them to the HTML tag to ask the **browser** to validate user input:

```html
<input type='text' `required minlength=2` />
```

Read the [documentation][html-input] to learn more.

---
#### Using `novalidate`

.breadcrumbs[<a href="#1">Angular</a> > <a href="#51">Forms</a> > <a href="#52">HTML validations</a>]

In Angular, you don't want the browser to perform the validations as it's not flexible.
By adding the `novalidate` attribute to your form, it will **disable browser validation**:

```html
<form `novalidate`>
  
</form>
```

Angular **will validate** your inputs for you instead of the browser.
This enables **more complex validations and interaction**.
Another advantage is that Angular **polyfills** HTML 5 validations in older browsers that don't support them.

---
### Binding to form state

.breadcrumbs[<a href="#1">Angular</a> > <a href="#51">Forms</a>]

Any form in an Angular application is an instance of [FormController][angular-form-controller].
Any input with the `ng-model` directive is an instance of [NgModelController][angular-ng-model-controller].
By adding a `name` attribute to these elements, you can **bind form state to the scope**:

```html
<form `name='userForm'` ng-submit='submit()' novalidate>
  <input type='text' ng-model='user.name' `name='name'` `required` />
  <div ng-if='`userForm.name.$error.required`'>Tell us your name.</div>
</form>
```

In this example, adding `name='userForm'` to the form **puts the `userForm` variable in the scope**:
this is the `FormController` instance.

Adding `name='name'` to the form field **puts the `userForm.name` variable in the scope**:
this is the `NgModelController` instance.

---
#### Form and `ng-model` controllers

.breadcrumbs[<a href="#1">Angular</a> > <a href="#51">Forms</a> > <a href="#54">Binding to form state</a>]

Form and `ng-model` controllers have the following useful properties:

---
#### Complete validation example

.breadcrumbs[<a href="#1">Angular</a> > <a href="#51">Forms</a> > <a href="#54">Binding to form state</a>]

```html
<form `name='userForm'` ng-submit='submit()' novalidate>
  <label>
    Name:
    <input type='text' ng-model='user.name' `name='name'` required minlength=2 />
  </label>
  <div ng-if='`userForm.name.$dirty`'>
    <div ng-if='`userForm.name.$error.required`'>Tell us your name.</div>
    <div ng-if='`userForm.name.$error.minlength`'>Your name is too short.</div>
  </div>

<label>
    E-mail:
    <input type='email' ng-model='user.email' `name='email'` required />
  </label>
  <div ng-if='`userForm.email.$dirty`'>
    <span ng-if='`userForm.email.$error.required`'>Tell us your e-mail.</span>
    <span ng-if='`userForm.email.$error.email`'>This is not a valid e-mail.</span>
  </div>

<input type='submit' ng-disabled='`userForm.$invalid`' value='Save' />
</form>
```

See it in action [here][angular-codepen-form-validation].
Read the [documentation][angular-forms] to learn more.

---
#### Custom synchronous validators

.breadcrumbs[<a href="#1">Angular</a> > <a href="#51">Forms</a> > <a href="#54">Binding to form state</a>]

AngularJS provides basic implementation for most common HTML 5 validations,
but sometimes you need to add your own.
You can do that by defining a **validation directive**:

```js
var INTEGER_REGEXP = /^-?\d+$/;
app.directive('integer', function() {
  return {
    `require: 'ngModel',` // Gives access to the ng-model controller
    link: function(scope, element, attrs, `ngModelCtrl`) {
      `ngModelCtrl.$validators.integer` = function(modelValue, viewValue) {
        if (ngModelCtrl.$isEmpty(modelValue)) {
          return true; // Consider an empty value to be valid
        }

// Return true if the string value is an integer
        `return INTEGER_REGEXP.test(viewValue);`
      };
    }
  };
});
```

Using it is as simple as applying the directive as an attribute:

```html
<input type='number' ng-model='size' name='size' min='0' max='10' `integer` />
```

---
class: center, middle
## The `$http` service

.breadcrumbs[<a href="#1">Angular</a>]

The `$http` service is a core AngularJS service that facilitates communication with remote HTTP servers.

---
### How to make requests

.breadcrumbs[<a href="#1">Angular</a> > <a href="#58">The `$http` service</a>]

Here's a typical HTTP `POST` request to authenticate a user:

```http
POST /authenticate HTTP/1.1
Authorization: Bearer letmein
Content-Type: application/json

{ "name": "jdoe", "password": "test" }
```

Here's how you would make that request with Angular:

```js
$http({
  method: 'POST',
  headers: {
    Authorization: 'Bearer letmein',
    Content-Type: 'application/json'
  },
  data: {
    name: 'jdoe',
    password: 'test'
  }
});
```

---
#### Query parameters

.breadcrumbs[<a href="#1">Angular</a> > <a href="#58">The `$http` service</a> > <a href="#59">How to make requests</a>]

Here's an HTTP `GET` request with query parameters:

```http
GET /movies?director=abc&include=foo&include=bar&page=2&pageSize=30
```

You can put the query parameters in the URL yourself:

```js
var director = 'abc';
var page = 2;
var pageSize = 30;
var includes = [ 'foo', 'bar' ];

var url = '/movies';
url = url + '?director=' + director;
url = url + '&page=' + page + '&pageSize=' + pageSize;

for (var i = 0; i < includes.length; i++) {
  url = url + '&include=' + includes[i];
}

$http({
  url: url
});

// GET /movies?director=abc&include=foo&include=bar&page=2&pageSize=30
```

---
#### Using the `params` object

.breadcrumbs[<a href="#1">Angular</a> > <a href="#58">The `$http` service</a> > <a href="#59">How to make requests</a>]

Or you can use the `params` object which does it for you:

```js
var director = 'abc';
var page = 2;
var pageSize = 30;
var includes = [ 'foo', 'bar' ];

$http({
  url: '/movies,
* params: {
*   director: director,
*   page: page,
*   pageSize: pageSize,
*   include: includes
* }
});

// GET /movies?director=abc&include=foo&include=bar&page=2&pageSize=30
```

---
### How to parse a response

.breadcrumbs[<a href="#1">Angular</a> > <a href="#58">The `$http` service</a>]

Here's a typical HTTP response:

```http
HTTP/1.1 201 Created
Content-Type: application/json
Location: /users/abc

{
  "id": "abc",
  "name": "jdoe"
}
```

Here's how to extract all the data from that response:

```js
$http(options).then(function(res) {
  // Get the status code
  console.log(res`.status`); // 201
  console.log(res`.statusText`); // 'Created'
  // Get the headers
  console.log(res`.headers`('Content-Type')); // 'application/json'
  console.log(res`.headers`('Location')); // '/users/abc'
  // Get the response body
  console.log(res`.data`); // { id: 'abc', name: 'jdoe' }
  console.log(res`.data`.name); // 'jdoe'
});
```

---
class: center, middle, image-header
## Best practices

.breadcrumbs[<a href="#1">Angular</a>]

---
### File structure

.breadcrumbs[<a href="#1">Angular</a> > <a href="#63">Best practices</a>]

There are several possible file structures:

.grid-50[

**By element type**

```txt
index.html
*controllers
  hello-controller.js
  other-controller.js
*services
  hello-service.js
*components
  person-component.js
  person-component.html
```

]
.grid-50[

**By feature**

```txt
index.html
*hello
  hello-controller.js
  hello-service.js
*other
  other-controller.js
*person-component
  person-component.js
  person-component.html
```

]
.container[

There is no *right or wrong* solution here.

Just **don't put everything in one file**.

]
---
### Multiple controllers on one page

.breadcrumbs[<a href="#1">Angular</a> > <a href="#63">Best practices</a>]

When you have a complex page with multiple areas that each have their specific logic,
it's good practice to **isolate each part into a component**:

---
### Dependency injection and minification

.breadcrumbs[<a href="#1">Angular</a> > <a href="#63">Best practices</a>]

**Minification** is the process of **removing all unnecessary characters** from source code **without changing its functionality**.
Take the following code as an example:

```js
var numbers = [];
for (var i = 0; i < 20; i++) {
  numbers[i] = i;
}
```

It can be rewritten like this:

```js
for(var a=[i=0];++i<20;a[i]=i);
```

Although much less readable, minified code can be much smaller.
Minification tools are often used to **reduce file size**, especially when downloading a rich Internet application's **JavaScript files**.

---
#### Dependency injection is broken by minification

.breadcrumbs[<a href="#1">Angular</a> > <a href="#63">Best practices</a> > <a href="#66">Dependency injection and minification</a>]

Angular relies on **variable names** to perform dependency injection by default:

```js
.controller('HelloController', function(`HelloService`) {
  var helloCtrl = this;
  helloCtrl.double = `HelloService`.double;
});
```

This code **will not work if variable names are minified**:

```js
.controller('HelloController',function(`a`){
var b=this;b.double=`a`.double;
});
```

How would Angular know that variable `a` should be your `HelloService`?

---
#### Inline array annotation

.breadcrumbs[<a href="#1">Angular</a> > <a href="#63">Best practices</a> > <a href="#66">Dependency injection and minification</a>]

When you know your code is going to be minified, you should use the **inline array annotation** to declare your injected parameters:

```js
.controller('HelloController', `[ 'HelloService', function(HelloService) {`
  var helloCtrl = this;
  helloCtrl.double = HelloService.double;
`}]`);
```

That way, even when your variables are minified, the **names in the inline array** will tell Angular what you need to inject:

```js
.controller('HelloController',[`'HelloService'`,function(`a`){
var b=this;b.double=`a`.double;
}]);
```

You will often find the inline array annotation in examples as it is the recommended dependency injection syntax.

---
## Resources

.breadcrumbs[<a href="#1">Angular</a>]

**Documentation**

* [Angular developer guide][angular-guide]
  * [Angular Forms][angular-forms]
* [Angular API reference][angular-api]
  * [Angular Components][angular-components]
  * [Angular Directives][angular-directives] ([built-in][angular-directives-list])
  * [Angular input][angular-input]
* [HTML input tag][html-input]

**Further reading**

* [A guide to web components][a-guide-to-web-components]
* [Angular 2 components][angular-2-series-components]
* [JavaScript promises][js-promises]
* [Promises in Angular][angular-promises]

[a-guide-to-web-components]: https://css-tricks.com/modular-future-web-components/
[ajax]: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
[angular]: https://angularjs.org/
[angular-api]: https://docs.angularjs.org/api
[angular-built-in-filters]: https://docs.angularjs.org/api/ng/filter
[angular-codepen]: http://codepen.io/AlphaHydrae/pen/LxoRze?editors=1010#0
[angular-codepen-form-validation]: http://codepen.io/AlphaHydrae/pen/EWZOOR?editors=1011
[angular-codepen-scope-hierarchy]: http://codepen.io/AlphaHydrae/pen/ryjaXN?editors=1010#0
[angular-codepen-scope-components]: http://codepen.io/AlphaHydrae/pen/LWxVzj?editors=1010#0
[angular-components]: https://docs.angularjs.org/guide/component
[angular-directives]: https://docs.angularjs.org/guide/directive
[angular-directives-list]: https://docs.angularjs.org/api/ng/directive
[angular-element]: https://docs.angularjs.org/api/ng/function/angular.element
[angular-form-controller]: https://docs.angularjs.org/api/ng/type/form.FormController
[angular-forms]: https://docs.angularjs.org/guide/forms
[angular-guide]: https://docs.angularjs.org/guide
[angular-input]: https://docs.angularjs.org/api/ng/directive/input
[angular-ng-model-controller]: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
[angular-promises]: ../angular-promises/
[angular-2]: https://angular.io
[angular-2-series-components]: http://blog.ionic.io/angular-2-series-components/
[chrome]: https://www.google.com/chrome/
[chrome-dev]: https://developers.google.com/web/tools/chrome-devtools/console/
[html-history-api]: https://developer.mozilla.org/en-US/docs/Web/API/History_API
[html-input]: https://www.w3schools.com/tags/tag_input.asp
[jquery]: http://jquery.com
[js]: ../js/
[js-closures]: ../js-closures/
[js-promises]: ../js-promises/
[live-server]: https://www.npmjs.com/package/live-server
[minification]: https://en.wikipedia.org/wiki/Minification_(programming)
[typescript]: https://www.typescriptlang.org
[web-components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components