AngularJS Presentation

name: inverse
layout: true
class: center, middle, inverse
---
#AngularJS
Framework for Web Applications
.footnote[[angularjs.org](http://angularjs.org)]
---
## Web History
---
layout: false
.left-column[
  ## Static pages
]
.right-column[

```xml
<html>
  <body>
    <h1>Mattias homepage</h1>
    <p>Welcome to my homepage</p>
  </body>
</html>
```
]
---
.left-column[
  ## Static pages
  ## Generated pages
]
.right-column[
### perl

```perl
$name = "Mattias";
print "<html>";
print "<body>";
print "<h1>$name homepage</h1>";
print "<p>Welcome to my homepage</p>";
print "</body>";
print "</html>";
```

### php

```php
<html>
<body>
<h1><?php $name="Mattias"; echo $name ?> homepage</h1>
<p>Welcome to my homepage</p>
</body>
</html>
```
]
---
.left-column[
  ## Static pages
  ## Generated pages
  ## Javascript & DOM
]
.right-column[
```xml
<html>
<body>
<h1></h1>
<p>Welcome to my homepage</p>
<script>
    h1 = document.getElementsByTagName("h1")[0];
    h1.innerHTML = "Mattias Homepage";
</script>
</body>
</html>
```
- DOM Manipulation
- Browser compatibility problems!
]
---
.left-column[
## Static pages
## Generated pages
## Javascript & DOM
## jQuery
]
.right-column[
```xml
<html>
<body>
<h1></h1>
<p>Welcome to my homepage</p>
<script>
    $("h1").innerHTML("Mattias Homepage");
</script>
</body>
</html>
```
- Powerful element selection
- Browser compatibility handled by library
- Same DOM manipulation

]
---
template: inverse

## Web Applications
.large-image[
  ![gmail](gmail.png)
]
---

## AngularJS

- Developed by Google
- Active project with large eco-system
- Supports modern browsers

---

## MVC - Model View Controller
.large-image[
  ![mvc](mvc2.png)
]

---
.left-column[
  ## Model
]
.right-column[

Entire model contained in a single javascript data structure.

```javascript
        $scope = {
           employeeName: "Mattias",
           company: "Net Insight AB"
        }
```
]

---
.left-column[
  ## Model
  ## View
]
.right-column[
"Extended" html with references to model

```html
<h2>{{company}}</h2>
Employee name:
<input ng-model="employeeName">
</input>
<button ng-click="save_info()">Submit</button>
```
### Result

.sample[
<h2>Net Insight AB</h2>
Employee name:
<input value="Mattias"></input>
<button ng-click="save_info()">Submit</button>
]

]

---
.left-column[
  ## Model
  ## View
  ## Controller
]
.right-column[
Javascript code that populates the view and reacts to changes in it.
```javascript
function myCtrl( $scope ) {
  $scope = {
     employeeName: "Mattias",
     company: "Net Insight AB"
  };

$scope.save_info = function() {
        console.log( $scope.employeeName );
  };
}
```
]

---
template: inverse
name: example1

# Example 1
# Angular watches the model

---

## Controller populates Model

```javascript
function MyCtrl( $scope ) {
    $scope.name = "World";
    $scope.Click = function() {
        alert( "Hello " + $scope.name );
    }
}
```

---

## View

```html
<html ng-app>
<head>
  <link rel="stylesheet"
    href="../bower_components/foundation/css/foundation.min.css">
  <script src="../bower_components/angular/angular.min.js"></script>
  <script src="ex1.js"></script>
</head>

<div class="row">
  <h1>{{name}}</h1>
  <input type="text" ng-model="name">
  <button ng-click="Click()">Click me</button>
</div>

</body>

</html>
```

<a href="ex1/index.html" target="_blank">Result</a>

---
template: inverse

# Example 2
# json data via http

---

## Request:

```
get "http://api.icndb.com/jokes/random"
```

## Response:

```javascript
{
   "type": "success",
   "value": {
      "id": 459,
      "joke": "Chuck Norris can solve the Towers of Hanoi in one move.",
      "categories": ["nerdy"]
   }
}
```

---

# Controller

```javascript
function MyCtrl( $scope, $http ) {

$scope.FetchJoke = function() {
        $http.get( "http://api.icndb.com/jokes/random")
        .then( function(response) {
            $scope.data = response.data;
        });
    }

}

```

---

# Template

```html
<body ng-controller="MyCtrl">
<div class="row">
    <h1>Joke {{data.value.id}}</h1>
    <p>{{data.value.joke}}</p>
    <button ng-click="FetchJoke()">Fetch joke</button>
</div>
```

<a href="ex2/index.html" target="_blank">Result</a>

---
template: inverse
name: example3

# Example 3
# Iterating through an array

---

## Request
```
get http://api.icndb.com/jokes/random/3
```

## Response
```javascript
{
    "type": "success",
    "value": [
        { "id": 513, "joke": "Chuck Norris does not...",
          "categories": ["nerdy"] },
        { "id": 156, "joke": "There is no such...",
          "categories": [] },
        { "id": 249, "joke": "Maslow's theory...",
          "categories": [] }
    ]
}
```

---

## Controller

```javascript
function MyCtrl( $scope, $http ) {

$scope.FetchJokes = function() {
    $http.get( "http://api.icndb.com/jokes/random/3")
    .then( function(response) {
      $scope.data = response.data;
    });
  }

}
```

---

## View

```html
<body ng-controller="MyCtrl">
<div class="row">
    <h1>Chuck Norris jokes</h1>
    <table>
        <tr ng-repeat="joke in data.value">
            <td>{{joke.id}}</td>
            <td>{{joke.joke}}</td>
        </tr>
    </table>
    <button ng-click="FetchJokes()">Fetch jokes</button>
</div>
</body>
```

<a href="ex3/index.html" target="_blank">Result</a>

---

# Example 4
# Showing stuff conditionally

---
template: inverse

# Custom directives

```html
<avatar username="username"></avatar>
```

```html
<div collapsable>This message can be collapsed</div>
```

*Separation of concerns*

---
template: inverse

# Routes and views

Entire application on one page but the url changes

---

# Routes and views

```javascript
.when("/ets/if/:interface/basic", {
    templateUrl: "ets.if.basic.tmpl.html",
    controller: "EtsIfBasicCtrl",
})

```

```html
<div ng-view></div>
```

*Separation of concerns*

---
template: inverse

# Services

Separate different parts of the codebase from each other using services

*Separation of concerns*

---

# Testability

Uses Dependency injection

Includes mocks for core services

---

# Real world test

---

## IP Interfaces Request

```
POST /data/oam
```

```javascript
[
  {
    "root":    "ipconf.if.*",
    "entries": "name address.0.inet? address.0.netmask? " +
               "media.active media.current mtu"
  }
]
```
---

## IP Interfaces Response

```javascript
{
"_success": true,
"_errors": [],
  "ipconf": {
    "if": {
      "0": {
        "name": "eth-aux",
        "address": {},
        "media": {
          "active": "link down",
          "current": "autoselect"
        },
        "mtu": "1500"
      },
      "1": { ... }
    }
  }
}
```

---

# Code size

Current web: **172k** mostly minified js

Webapp: **146k** minified js

Can gzip compress down to one third.

Data per page is a lot smaller with AngularJS.

---

# Development Effort

- Powerful development and debugging environment
- Quick turnaround time
- Possible to write tests
- Very little code
- Fun!

---
name: last-page
template: inverse

## More info:
[angularjs.org](http://angularjs.org)

Instruction videos on [egghead.io](http://egghead.io)

AngularJS Google+ group

This presentation is available on

https://github.com/mattiash/angular-presentation