angularTalk

AngularJS

HTML++

Templates Are

${awesome}

JSP

Hello, ${user}

Ruby

Hello, <%= user %>

ASP

Hello, <%= user %>

HTML/JavaScript

?????

AngularJS:

Hello, {{user}}

No Server

• Rich client apps
• Variables kept up to date as they change
• Quick development loop

Two-way Binding

<input type="text" ng-model="user">
Hello, {{user}}

• Inputs bind to model data
• Display is updated as model is changed
• Like a spreadsheet

Demo - Hello World

Advanced Templates

<ul>
  <li ng-repeat="item in [1,2,3]">
    {{item}}
  </li>
</ul>

Becomes:

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

Controllers

function MyController($scope) {
  $scope.greeting = 'Hello, world!';
}

<div ng-controller="MyController">
    {{greeting}}
</div>

Server Communication

function MyController($scope, $http) {
  $http.get('/greeting').success(function(data) {
    $scope.greeting = data;
  });
}

<div ng-controller="MyController">
  {{greeting}}
</div>

Controllers Example

No DOM Manipulation in Controllers

Directives

• ng-model
• ng-repeat
• your-custom-directive

Elements Work Too

Custom directives can be used to create reusable components

<tabbar>
  <tab name="Home" src="index.html"></tab>
  <tab name="About" src="about.html"></tab>
  <tab name="Contact" src="contact.html"></tab>
</tabbar>

Directives Example

Testing

describe('Buzz Client', function() {
  it('should filter results', function() {
    input('user').enter('jacksparrow');
    element(':button').click();
    expect(repeater('ul li').count()).toEqual(10);

    input('filterText').enter('Bees');
    expect(repeater('ul li').count()).toEqual(1);
  });
});

Browser Support

• Chrome, FF, Safari
• IE 8+

W3C Spec:

• Model Driven Views
• Web Components

Thanks!

• angularjs.org
• github.com/angular/angular.js