AngularJS Presentation

name: inverse
layout: true
class: center, middle, inverse
---
layout:false
class: center, middle

.large-image[
  ![angular](angular-logo.png)
]

Framework for Web Applications
.footnote[[angularjs.org](http://angularjs.org)]
---
template: inverse

## Web History
---
layout: false
.left-column[
  ## Static pages
]
.right-column[

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

```perl
$name = "D. Gilmour";
print "<html>";
print "<body>";
print "<h1>$name homepage</h1>";
print "<p>Welcome to the machine</p>";
print "</body>";
print "</html>";
```

### php

```php
<html>
<body>
<h1><?php $name="D. Gilmour"; echo $name ?> homepage</h1>
<p>Welcome to the machine</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 = "D. Gilmour 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 the machine</p>
<script>
    $("h1").innerHTML("D. Gilmour 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

.left-column[
  ### Developed by Google
]

.right-column[
  .large-image[
    ![angular](angular-logo.png)
  ]
]

---

## AngularJS

.left-column[
  ### Developed by Google
  ### Supports modern browsers
]

.right-column[
  .small-image[
    ![browsers](browsers.jpg)
  ]
]

---

## AngularJS

.left-column[
  ### Developed by Google
  ### Supports modern browsers
]

.right-column[
  .small-image[
    ![browsers](modern-browsers.jpg)
  ]
]
.right[[__modern*__ browsers](https://docs.angularjs.org/guide/ie)]

---

## AngularJS

.left-column[
  ### Developed by Google
  ### Supports modern browsers
  ### Active project with large eco-system
]

.right-column[
  .large-image[
    ![web trends](web-trends.jpg)
  ]
  [Google Trends](http://www.google.com/trends/explore#q=angularjs%2C%20ember.js%2C%20backbonejs%2C%20react.js%2C%20%2Fm%2F0bj6c0&date=9%2F2014%2013m&cmpt=q&tz=Etc%2FGMT%2B2)
]

---

## 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: "R. Waters",
           company: "Another Brick Co."
        }
```
]

---
.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>Another Brick Co.</h2>
Employee name:
<input value="R. Waters"></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: "R. Waters",
     company: "Another Brick Co."
  };

$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.question = "is there anybody out there?";
    $scope.Click = function() {
        alert( "Hello " + $scope.question );
    }
}
```

---

## 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": "Murphy's law...",
          "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>

---

template: inverse

# 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*

---

template: inverse

# Testability

Uses Dependency injection

Includes mocks for core services

---

# 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

Absolutely free course (_much better than this one_) [at codeschool](http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro)

This presentation was forked from

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

__Thanks!__

###Eduardo Reche

https://github.com/eduardoreche